Question

所以我尽可能地简化了我的代码，基本上创建了两个阶段，两个可拖动的图层，每个图层都有一个图像。（我试图创建一个JSfiddle，但似乎draggable在那里根本不起作用）

<html>

<body>
  <div id="view1" style="float:left;"></div>
  <div style="float:left;">--</div>
  <div id="view2" style="float:left;"></div>
</body>

<script type='text/javascript' src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script>

<script>

for (var i = 0; i < 2; i++) {
    var divName = 'view' + (i + 1);

    var stage = new Kinetic.Stage({
        container: divName,
        width: 200,
        height: 200
    });

    var kineticLayer = new Kinetic.Layer();
    kineticLayer.setDraggable("draggable");
    stage.add(kineticLayer);

    var image = new Image();
    image.onload = imageOnLoad;
    image.kineticLayer=kineticLayer;

    image.src = 'http://2.bp.blogspot.com/-lwBsEScRW_U/T-Hwz0-CVGI/AAAAAAAAKjY/2RC9pFcXRsE/s1600/Muppets.JPG';
}


function imageOnLoad() {
    this.kineticLayer.removeChildren();

    var kineticImage = new Kinetic.Image({
        image: this
    });

    this.kineticLayer.add(kineticImage);
    this.kineticLayer.draw();
}

</script>

</html>

当您按住图像并将其移动时，平移可以正常，但是当您将光标移动（同时按下并按住）位于另一个图像的顶部时，动能断开并显示错误“Uncaught TypeError：无法读取属性'x'未定义“

编辑：jsfiddle jsfiddle.net/LFeDg/ thx to EliteOctagon

编辑：这个'错误'只会在Chrome开发工具打开时发生！

我需要平移操作才能继续工作，只要光标被保持，无论它在哪里（我根本不需要拖放），我该如何解决这个问题？这是一个动态的错误吗？

谢谢！

Answer 1

以下是您发布的代码的jsfiddle：http://jsfiddle.net/LFeDg/

您在开头没有描述的内容。你有两个阶段，每个阶段都有一个图层和图像。

尝试编写没有循环结构的代码并使用不同版本的kineticjs。像：

stage1 = new Kinetic.Stage();
stage2 = new Kinetic.Stage();

等

将一个图像（平移）拖动到另一个图像上时，动力学会中断

1 个答案: