0

そこで、コードをできる限り単純化して、基本的に 2 つのステージ、2 つのドラッグ可能なレイヤーを作成し、それぞれに画像を付けました。(私は 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>

画像を押したまま移動すると正常にパンしますが、カーソルを (押したままにして) 他の画像の上に移動すると、「Uncaught TypeError: プロパティ 'x を読み取れません」というエラーでキネティックが中断します。 '未定義の"

編集: jsfiddle jsfiddle.net/LFeDg/ thx から EliteOctagon へ

編集: この「バグ」は、Chrome 開発者ツールを開いたときにのみ発生します。

カーソルがどこに移動してもカーソルが保持されている限り、パン操作が機能し続ける必要があります (この場合、ドラッグ アンド ドロップはまったく必要ありません)。どうすれば修正できますか? これはキネティックバグですか？

ありがとうございました！

4

1 に答える 1