Question

我有一个简单的kineticjs程序，有两个矩形。一个叫做“rect”，另一个叫做“grow”。当用户点击并拖动“增长”时，我想要增长另一个矩形。因此，当我成长为mousedown时，我会在成长矩阵上做一个'on mousemove'（还尝试了图层和舞台）。这种方法很好，除非用户快速移动鼠标并且鼠标移动到成长矩形之外。我已经尝试将'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>

所以这笔交易是有效的，除非用户移动得太快，并且不会继续调用grow函数。

非常感谢任何帮助。谢谢。

Answer 1

看起来KineticJS只会发出一个mousemove事件，如果你正在移动一个元素。所以有两种可能性浮现在脑海中：

1）添加覆盖整个图层的背景矩形;你可以把它变得透明，我想。

2）通过其他方式（如jQuery）或直接在JavaScript中附加mousemove处理程序。

您可以在此处看到第二种方法：

http://jsfiddle.net/SdXqA/

kineticjs'on mousemove'不跟踪外部形状

1 个答案: