किनेटिकजेएस

Question

में ज़ूम और पैन क्या कोई तरीका है कि कोई KineticJS का उपयोग करके कैनवास पर ज़ूम और पैन कर सकता है? मुझे यह लाइब्रेरी kineticjs-viewport मिली है, लेकिन यह सोचकर कि क्या यह हासिल करने का कोई अन्य तरीका है, क्योंकि यह लाइब्रेरी इतनी सारी अतिरिक्त पुस्तकालयों का उपयोग कर रही है और मुझे यकीन नहीं है कि नौकरी पाने के लिए कौन से जरूरी हैं।

वैकल्पिक रूप से, मैं रुचि के क्षेत्र के चारों ओर एक आयत खींचने और उस विशेष क्षेत्र में ज़ूम करने के विचार के लिए भी खुला हूं। इसे कैसे प्राप्त किया जाए इस पर कोई विचार? एक JSFiddle उदाहरण भयानक होगा!

Answer 1

आप बस एक परत में .setDraggable("draggable") जोड़ सकते हैं और जब तक कर्सर के नीचे कोई ऑब्जेक्ट नहीं है तब तक आप इसे खींच सकेंगे। आप सब कुछ खींचने योग्य बनाने के लिए एक बड़ा, पारदर्शी rect जोड़ सकते हैं। ज़ूम को परत के पैमाने को सेट करके हासिल किया जा सकता है। इस उदाहरण में मैं इसे मूसहेल के बावजूद नियंत्रित कर रहा हूं, लेकिन यह केवल एक ऐसा कार्य है जहां आप उस राशि को पार करते हैं जिसे आप ज़ूम करना चाहते हैं (ज़ूम इन करने के लिए सकारात्मक, ज़ूम आउट करने के लिए नकारात्मक)।

var stage = new Kinetic.Stage({ 
    container: "canvas", 
    width: 500, 
    height: 500 
}); 

var draggableLayer = new Kinetic.Layer(); 
draggableLayer.setDraggable("draggable"); 

//a large transparent background to make everything draggable 
var background = new Kinetic.Rect({ 
    x: -1000, 
    y: -1000, 
    width: 2000, 
    height: 2000, 
    fill: "#000000", 
    opacity: 0 
}); 

draggableLayer.add(background); 


//don't mind this, just to create fake elements 
var addCircle = function(x, y, r){ 
    draggableLayer.add(new Kinetic.Circle({ 
     x: x*700, 
     y: y*700, 
     radius: r*20, 
     fill: "rgb("+ parseInt(255*r) +",0,0)" 
    }) 
); 
} 

var circles = 300 
while (circles) { 
    addCircle(Math.random(),Math.random(), Math.random()) 
    circles--; 
} 

var zoom = function(e) { 
    var zoomAmount = e.wheelDeltaY*0.001; 
    draggableLayer.setScale(draggableLayer.getScale().x+zoomAmount) 
    draggableLayer.draw(); 
} 

document.addEventListener("mousewheel", zoom, false) 

stage.add(draggableLayer) 

http://jsfiddle.net/zAUYd/

Answer 2

जैसा कि मैं आज केनेटिक के साथ काम कर रहा था, मुझे SO question मिला जो आपको रूचि दे सकता है।

मुझे पता है कि यह एक टिप्पणी के रूप में बेहतर होगा, लेकिन मेरे पास इसके लिए पर्याप्त प्रतिनिधि नहीं है, वैसे भी, मुझे आशा है कि इससे मदद मिलती है।

Answer 3

यह वही है जो मैंने अभी तक किया है .. उम्मीद है कि यह आपकी मदद करेगा।

http://jsfiddle.net/v1r00z/ZJE7w/

Answer 4

यहाँ जूमिंग और पैनिंग एक परत का एक बहुत ही त्वरित और आसान कार्यान्वयन है। यदि आपके पास अधिक परतें थीं जो एक ही समय में पैन और ज़ूम करने की आवश्यकता होगी, तो मैं उन्हें समूहबद्ध करने का सुझाव दूंगा और उसके बाद उसी समूह को ("क्लिक") को उसी प्रभाव के लिए लागू करूँगा।

http://jsfiddle.net/renyn/56/

यदि यह स्पष्ट नहीं है, ऊपर बाईं ओर स्थित प्रकाश नीले वर्गों अंदर और बाहर ज़ूम करने के लिए क्लिक कर रहे हैं, और नीचे बाईं ओर स्थित गुलाबी वर्गों छोड़ दिया और सही पैन करने के लिए क्लिक किया जाता है।

संपादित करें: एक नोट के रूप में, यह निश्चित रूप से "mousedown" या अन्य घटनाओं का समर्थन करने के लिए बदला जा सकता है, और मुझे नहीं पता कि क्यों परिवर्तन कोनेटिक के रूप में लागू नहीं किया जा सकता था। उन्हें आसान बनाने के लिए एनीमेशन।

Answer 5

दुर्भाग्य से, राज्य या परत खींचने योग्य रोकता है स्थापित करने खींचने योग्य नहीं वस्तुओं: यहाँ कोड है। डुओपिक्सेल का ज़ूमिंग समाधान अच्छा है, लेकिन मैं इसे स्तर स्तर के लिए सेट नहीं करूँगा, परत स्तर नहीं।

उसे मेरी समाधान

var stage = new Kinetic.Stage({ 
    container : 'container', 
    width: $("#container").width(), 
    height: $("#container").height(), 
}); 
var layer = new Kinetic.Layer(); 

//layer.setDraggable("draggable"); 
var center = { x:stage.getWidth()/2, y: stage.getHeight()/2}; 

var circle = new Kinetic.Circle({ 
    x: center.x-100, 
    y: center.y, 
    radius: 50, 
    fill: 'green', 
    draggable: true 
}); 
layer.add(circle); 
layer.add(circle.clone({x: center.x+100})); 

// zoom by scrollong 
document.getElementById("container").addEventListener("mousewheel", function(e) { 
    var zoomAmount = e.wheelDeltaY*0.0001; 
    stage.setScale(stage.getScale().x+zoomAmount) 
    stage.draw(); 
    e.preventDefault(); 
}, false) 

// pan by mouse dragging on stage 
stage.on("dragstart dragmove", function(e) {window.draggingNode = true;}); 
stage.on("dragend", function(e) { window.draggingNode = false;}); 
$("#container").on("mousedown", function(e) { 
    if (window.draggingNode) return false; 
    if (e.which==1) { 
     window.draggingStart = {x: e.pageX, y: e.pageY, stageX: stage.getX(), stageY: stage.getY()}; 
     window.draggingStage = true; 
    } 
}); 
$("#container").on("mousemove", function(e) { 
    if (window.draggingNode || !window.draggingStage) return false; 
    stage.setX(window.draggingStart.stageX+(e.pageX-window.draggingStart.x)); 
    stage.setY(window.draggingStart.stageY+(e.pageY-window.draggingStart.y)); 
    stage.draw(); 
}); 
$("#container").on("mouseup", function(e) { window.draggingStage = false }); 

stage.add(layer); 

http://jsfiddle.net/bighostkim/jsqJ2/

Answer 6

मैं वास्तव में लिखा kineticjs-व्यूपोर्ट है। मुझे यह सुनकर खुशी हुई कि आप इसमें रूचि रखते थे।

यह वास्तव में केवल खींचने से अधिक के लिए है। यह ज़ूमिंग और प्रदर्शन-केंद्रित क्लिपिंग की भी अनुमति देता है। क्लिप क्षेत्र के बाहर की चीजें बिल्कुल प्रस्तुत नहीं की जाती हैं, इसलिए यदि आपके पास ऑब्जेक्ट्स के टन के साथ एक विशाल परत है तो भी आपको शानदार प्रतिपादन प्रदर्शन हो सकता है।

यह मेरे पास उपयोग का मामला है।उदाहरण के लिए, एक छोटे आरटीएस मानचित्र जो आप छोटे व्यूपोर्ट क्षेत्र के माध्यम से देखते हैं - स्टारक्राफ्ट सोचें।

मुझे उम्मीद है कि इससे मदद मिलती है।

Answer 7

ये उत्तर KineticJS 5.1.0 के साथ काम नहीं करते हैं। ये मुख्य रूप से पैमाने समारोह के हस्ताक्षर बदलाव के लिए काम नहीं करते:

JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/