Javascript kineticjs'；在mousemove'；不跟踪外部形状_Javascript_Kineticjs

Javascript kineticjs'；在mousemove'；不跟踪外部形状

javascript

Javascript kineticjs'；在mousemove'；不跟踪外部形状,javascript,kineticjs,Javascript,Kineticjs,我有一个带有两个矩形的简单kineticjs程序。一个叫做“rect”，另一个叫做“grow”。当用户点击并拖动“增长”时，我想增长另一个矩形。因此，当我在grow中获得mousedown时，我会在grow rect上执行“on mousemove”（也尝试了layer和stage）。除了用户快速移动鼠标和鼠标移动到grow rect之外，这一切都很好。我曾尝试在图层和舞台上使用“mousemove”功能，希望这样可以在鼠标离开生长盒后继续生长，但这似乎不起作用该守则的整体内容如下： <

我有一个带有两个矩形的简单kineticjs程序。一个叫做“rect”，另一个叫做“grow”。当用户点击并拖动“增长”时，我想增长另一个矩形。因此，当我在grow中获得mousedown时，我会在grow rect上执行“on mousemove”（也尝试了layer和stage）。除了用户快速移动鼠标和鼠标移动到grow rect之外，这一切都很好。我曾尝试在图层和舞台上使用“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>



调试：
开始
var阶段=新的动力学阶段({
容器：'容器'，
宽度：500，
身高：500
});
var layer=新的动能层（）；
var rect=新的动能.rect({
x:10，
y:10，
宽度：90，
身高：90，
填充：“绿色”
});
var grow=new动能.Rect({
x:80，
y:80，
宽度：20，
身高：20，
填充：“红色”
});
层。添加（rect）；
层。添加（生长）；
layer.draw（）；
阶段。添加（层）；
stage.draw（）；
var锚=0
函数调试{
var div=document.getElementById（“调试”）；
div.innerHTML=s；
}
函数doGrow（）{
调试（“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）；
锚点=鼠标点；
layer.draw（）；
}
grow.on（'mousedown'，函数（e）{
调试（“关闭”）；
anchor=stage.getMousePosition（）；
//grow.on（'mousemove'，doGrow）；//这是我的三次尝试
//层上（'mousemove'，doGrow）；
舞台上的（“鼠标移动”，多格罗）；
});

所以问题是，除了用户移动太快和grow函数不能继续被调用之外，它还能工作

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

看起来KineticJS只有在您移动某个元素时才会发出

mousemove

事件。因此，我想到了两种可能性：

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

2）通过其他方式（如jQuery）或直接在JavaScript中附加

mousemove

处理程序

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

哇！非常感谢你。这是我的第一个javascript，所以我很长一段时间都无法理解这一点。我真的很感谢你的帮助。没问题，查理，我很高兴能帮上忙！第一个解决方案可能更像是“动力学”解决方案，但我对动力学不太熟悉，所以我选择了对我来说很简单的解决方案。