0

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

<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>

当您按住图像并在其周围移动时，它可以平移，但是当您将光标（按住并按住）移动到另一个图像的顶部时，动力学中断并出现错误“未捕获的类型错误：无法读取属性'x '未定义的"

编辑： jsfiddle jsfiddle.net/LFeDg/ 感谢 EliteOctagon

编辑：此“错误”仅在打开 chrome 开发人员工具时发生！

只要光标保持在任何位置，我都需要平移动作继续工作（在这种情况下我根本不需要拖放），我该如何解决这个问题？这是一个动力学错误吗？

谢谢！

4

1 回答 1

0

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

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

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

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

等等

于 2013-05-01T13:54:29.390 回答