kineticjs - kineticjsは、マウスダウン時に要素を別のレイヤーに移動します

Question

dragOnTop が最近導入されたことは知っていますが、常に一番上に自動生成されたレイヤーではなく、特定のレイヤーを使用したいのです。だから私はフィドルを作成しました: http://jsfiddle.net/jure/EwrkQ/

darthVaderImg.on("mousedown", function() {
    this.moveTo(temp);
    this.setDraggable(true);
    //...
}

しかし、うまくいきません！レイヤーを変更すると、マウスイベントフックが失われるようです...助けてください！

Answer 1

問題のほとんどは、ドラッグ可能: false のオブジェクトの初期状態に起因します。

これがこれまでの私の解決策です。

    darthVaderImg.on('mouseover', function() {
      document.body.style.cursor = 'move';
    });
    darthVaderImg.on('mousedown', function() {
      this.moveTo(temp);
      this.setDraggable(true);
      this.simulate('dragstart');
      layer.draw();
      temp.draw();
    });
    darthVaderImg.on('dragmove', function() {
      temp.draw();
    });
    darthVaderImg.on("dragend",function(){
        //this.setDraggable(false);
        this.moveTo(layer);
        layer.draw();
        temp.draw();
        this.off("mouseup");
      });

    darthVaderImg.on('mouseout', function() {
      document.body.style.cursor = 'default';
    });

Answer 2

マウスダウン時にkineticjsが要素を別のレイヤーに移動するには、以下のリンクを参照してください

http://codedbot.com/questions/3016590/kineticjs-move-element-to-another-layer-on-mousedown

Answer 3

さて、dragOnTop はアイテムを一時レイヤーに移動するため、その機能を無効にする必要があります。

 darthVaderImg = new Kinetic.Image({... , dragOnTop: false, ...});

それはうまくいくはずです。