0

我有一个带有两个矩形的简单 kineticjs 程序。一个叫“rect”，一个叫“grow”。当用户单击并拖动“增长”时，我想增长另一个矩形。因此，当我在成长中获得 mousedown 时，我会在成长 rect 上执行“on mousemove”（也尝试过 layer 和 stage ）。这工作正常，除了用户快速移动鼠标并且鼠标移动到增长矩形之外。我曾尝试将“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>

所以交易是，除了用户移动太快并且增长函数不会继续被调用之外，它仍然有效。

任何帮助将不胜感激。谢谢你。

4

1 回答 1

0

看起来 KineticJS 只会mousemove在您要移动的元素时发出事件。于是想到了两种可能性：

1）添加一个覆盖整个图层的背景矩形；你可以让它透明，我想。

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

您可以在这里看到第二种方法的实际应用：

http://jsfiddle.net/SdXqA/

于 2013-07-05T17:44:15.613 回答