1

私はKineticJSを使用しています。ドラッグ可能でサイズ変更可能な画像を含むキャンバスがあります（コードはhttp://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/からコピーしたものです）。ドラッグ可能でサイズ変更可能な画像が 1 つのレイヤーにあり、別のレイヤーに四角形があります。長方形のレイヤーが上にあります。四角形は透明です (塗りつぶしなし)。

画像を四角形の下にドラッグして再度画像をクリックしようとすると、もちろん画像は移動しません - 画像が上にないためです。長方形が上です。ただし、透明な四角形をクリックして「スルー」し、下の画像に作用し続けたいと思います。つまり、クリックしてドラッグすると、長方形が存在しないようにしたいのですが、長方形が上に表示されるようにします。

デモは次のとおりです: http://jsfiddle.net/T8m64/106/ 画像を四角形の下にドラッグすると、下にあるため、もはやそれをつかむことができないことがわかります。[これが「邪魔にならない JavaScript」ではないことは十分承知しています。つまり、javascript は html に埋め込まれています。ごめん。上記の最初のリンクからコピーしただけです。]

とにかく、私が言ったように、デモは上記の最初のリンクからコピーされ、最後に次のコードが追加されています。

//Overlying rectangle. I'm doing it as a path not a rect, because that's ultimately what I care about
var rect = new Kinetic.Path({
    x: 0,
    y: 0,
    data: 'm 2.0012417,2.0057235 125.7664883,0 0,105.8016465 -125.7664883,0 z',
    fill: 'none',
    stroke: 'black',
    scale: 1
});

// add the shape to the layer
var rectLayer = new Kinetic.Layer();
rectLayer.add(rect);
stage.add(rectLayer);
rectLayer.moveToTop();

ありがとう

4

1 に答える 1

2

イベントのリッスンを停止するようレイヤーに指示できます。

これにより、下のレイヤーがこれらのイベントに応答できるようになります。

rectLayer.setListening(false);
于 2013-04-20T22:42:14.473 に答える