kineticjs

Question

के साथ इंटरेक्टिव ड्राइंग मैं क्लिक और ड्रैग के साथ एक आयत खींचना चाहता हूं। मैं यह कैसे कर सकता हूँ ? मुझे अपना क्लिक इवेंट श्रोता कहां रखना है? मंच पर या परत पर? मेरे पास निम्न कोड है लेकिन यह काम नहीं करता है:

stage = new Kinetic.Stage({...}) 
layer = new Kinetic.Layer({...}) 

stage.add(layer) 

stage.on('click', function() { 
    var pos = stage.getMousePosition(); 
    var rect = new Kinetic.Rect({ 
     x: pos.x, 
     y: pos.y, 
     width: 10, 
     height: 10, 
    }); 
    layer.add(rect); 
    layer.draw(); 
}) 

धन्यवाद।

Answer 1

जहां तक ​​मुझे पता है कि kineticjs में मंच पर कोई "क्लिक" घटना नहीं है। आपको इस तरह कुछ उपयोग करना चाहिए:

stage.getContainer().addEventListener('mousedown', function(evt) {}); 

Answer 2

मुझे एक ही समस्या थी, और वास्तव में गिलेरमेम की विधि बहुत काम करती है।

लेकिन वहाँ एक सरल विकल्प है:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){ 
    function writeMessage(messageLayer, message) { 
     var context = messageLayer.getContext(); 
     messageLayer.clear(); 
     context.font = '18pt Calibri'; 
     context.fillStyle = 'black'; 
     context.fillText(message, 10, 25); 
    } 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
    }); 
    var shapesLayer = new Kinetic.Layer(); 
    var messageLayer = new Kinetic.Layer(); 

    var rect = new Kinetic.Rect({ 
     x:0, 
     y:0, 
     width:stage.getWidth(), 
     height:stage.getHeight(), 
     stroke:0 
    }); 

    rect.on('mousemove', function() { 
     var mousePos = stage.getMousePosition(); 
     var x = mousePos.x; 
     var y = mousePos.y; 
     writeMessage(messageLayer, 'x: ' + x + ', y: ' + y); 
    }); 


    stage.getContainer().addEventListener('mouseout', function(evt) { 
     writeMessage(messageLayer, ''); 
    }); 

    shapesLayer.add(rect); 

    stage.add(shapesLayer); 
    stage.add(messageLayer); 
}//]]> 
</script> 

ऊपर कोड जब आप उस पर होवर एक्स और माउस के y स्थिति प्रिंट होगा: एक पारदर्शी रेक्ट (काइनेटिक आयत) कैनवास के रूप में एक ही आकार बनाने कैनवास (आईडी "कंटेनर" वाला एक div)। इस कोड का उपयोग करने से पहले आपको KineticJS लाइब्रेरी को लोड करने की ज़रूरत है। एक बेला के लिए

Answer 3

लिंक से पता चलता है कि मैं क्या पर काम कर रहा है:

http://jsfiddle.net/robtown/SGQq7/22/

यह KineticJS और Sketch.js

का उपयोग कर उपकरण ड्राइंग का एक सेट आप "स्केच बनाने के चयन करने की आवश्यकता है "अपने स्केच को गतिशील चरण में कॉपी करने के लिए फ्रीहैंड खींचें और फिर" काइनेटिक को कॉपी करें "। एक आयत बनाओ "आयताकार बनाएं" का चयन करें। (समारोह (ई

$ ('# makeRect') पर क्लिक करें) {

   followRect = new Kinetic.Rect({ 
       width: 120, 
       height: 40, 
       x: -200, 
       y:-200,      
       stroke: 'red', 
       strokeWidth: 3 
      }); 
      drawLayer.setVisible(true); 

      drawLayer.add(followRect); 
      drawLayer.draw(); 
      makeRect = true; 
      drawLayer.on("mousemove", function (e) { 
       if (makeRect) { 
        followRect.setX(e.x+5); 
        followRect.setY(e.y+5); 
        drawLayer.draw(); 
       } 
      }); 

:

मैं इस इसलिए यहाँ जब आप "आयत करें" बटन का चयन करने के लिए कोड है पोस्ट करने के लिए कोड को शामिल करने की जरूरत है।

drawLayer.on ("mousedown", समारोह (ई) {

:

यह एक आयत जब तक आप कैनवास पर क्लिक करें कि माउस इस प्रकार पैदा करता है, तो यह चरण के Redlines परत में आयत चला जाता है

   //for (var f = 0 ; f < 1; f++) { 
       //alert(e.length); 
       if (makeRect) { 
        addToRedlineLayer(e.x, e.y); 
       } 
       //} 
        followRect.setX(-200); 

        drawLayer.setVisible(false); 
       return; 

      });