kineticjs'在mousemove'不跟蹤外部形狀

我有一個簡單的kineticjs程序有兩個矩形。一個被稱爲「rect」，另一個被稱爲「成長」。當用戶點擊並拖動「增長」時，我想要增長另一個矩形。因此，當我獲得成功時，我會在成長矩陣上做一個'移動鼠標'（也嘗試過圖層和階段）。這工作正常，除了用戶快速移動鼠標並且鼠標移動到增長矩形之外。我已經嘗試在圖層上放置'mousemove'函數，並且希望這樣可以讓增長在鼠標離開增長框後繼續增長，但這似乎不起作用。kineticjs'在mousemove'不跟蹤外部形狀

的代碼，在它的全部，就是：

<html> 
<body> 

<br>debug: 
<div id="debug">start</div> 
<div id="container"></div> 

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script> 

<script defer="defer"> 
var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 500, 
     height: 500 
     }); 
var layer = new Kinetic.Layer(); 
var rect = new Kinetic.Rect({ 
    x : 10, 
    y : 10, 
    width : 90, 
    height : 90, 
    fill : "green" 
}); 
var grow = new Kinetic.Rect({ 
    x : 80, 
    y : 80, 
    width : 20, 
    height : 20, 
    fill : "red" 
}); 
layer.add(rect); 
layer.add(grow); 
layer.draw(); 
stage.add(layer); 
stage.draw(); 

var anchor = 0 

function debug(s) { 
    var div = document.getElementById("debug"); 
    div.innerHTML = s; 
} 

function doGrow() { 
    debug("doGrow"); 
    var mousePos = stage.getMousePosition(); 
     var dx = mousePos.x - anchor.x; 
     var dy = mousePos.y - anchor.y; 
    rect.setWidth(rect.getWidth() + dx); 
    rect.setHeight(rect.getHeight() + dy); 
    grow.setX(grow.getX() + dx); 
    grow.setY(grow.getY() + dy); 
    anchor = mousePos; 
    layer.draw(); 
} 

grow.on('mousedown', function(e) { 
    debug("down"); 
    anchor = stage.getMousePosition(); 
    //grow.on('mousemove', doGrow);  // These are my three attempts 
    //layer.on('mousemove', doGrow); 
    stage.on('mousemove', doGrow); 
}); 
</script> 
</body> 
</html>

所以這筆交易，它的工作原理除了用戶移動過快和成長功能不繼續被調用。

任何幫助將不勝感激。謝謝。

來源

2013-07-05 Charlie Burns