使用kineticjs交互式繪圖

我想繪製一個矩形點擊並拖動。我怎樣才能做到這一點？我必須在哪裏放置我的點擊事件監聽器？在舞臺上還是在圖層上？我有以下代碼，但它不起作用：使用kineticjs交互式繪圖

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(); 
})

謝謝。

來源

2012-05-03 jrabary

據我所知，在kineticjs舞臺上沒有「點擊」事件。你應該使用類似這樣的東西：

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

來源

2012-05-07 18:44:46

getContent（）方法不存在。我使用'getContainer（）'來獲取實際的畫布，然後使用'addEventLister'。 +1幫助理解這一部分。 –

是的，他們改變了API –

我有完全相同的問題，事實上Guilherme的方法工作得很好。

但是有一個簡單的選擇：建立一個透明的Rect（動力學矩形）的大小相同的帆布：

<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>

當您懸停它超過上面的代碼將打印鼠標的x和y位置畫布（帶有「容器」ID的div）。在使用此代碼之前，您當然需要加載KineticJS庫。

來源

2012-10-23 19:02:28 gaborous

鏈接到小提琴，顯示什麼，我一直在努力：

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

這是一個集描繪使用KineticJS和Sketch.js

工具，您需要選擇「使草圖「徒手繪製，然後」複製素描到動力學「複製你的素描到動力學階段。選擇「製作矩形」做一個矩形。

我需要包括代碼來發布此所以在這裏是當你選中「使矩形」按鈕的代碼：

$（「＃makeRect」）點擊（函數（E）{

   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（「鼠標按下」，函數（E）{

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

        drawLayer.setVisible(false); 
       return; 

      });

來源

2012-10-25 16:17:18 robtown

你不應該使用'drawLayer.on（「mousemove」，function（e）{'但是'stage.getContainer（）。addEventListener（'mousemove'，function（e）{'，否則聽衆不會在舞臺上跟隨鼠標。 –

使用kineticjs交互式繪圖

回答

相關問題