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