1

私はkineticjsをダウンさせようとしていて、画像をドラッグしてサイズ変更できる小さなアプリを作成しました。ここまでは順調ですね;

ただし、中央に高さ/幅のブロックが可変のオーバーレイが必要です。このオーバーレイは、半透明のオーバーレイを使用して、下の画像を表示する必要があります（ドラッグ可能/サイズ変更はそのまま）。

オーバーレイがそのままの状態で、オーバーレイのサイズを変更/ドラッグできるようにしたい（このように、kineticjsを使用：http：//envyum.nl/pointer/）

そうする方法はありますか？重なっている長方形からブロックを切り出すことによって、おそらく？そして、マウスpointer-events: noneはcss3のようにオーバーレイを無視できますか？

前もって感謝します、

4

1 に答える 1

1

上記のコメントで私が話していたことのサンプルがあります：http：//jsfiddle.net/KwQBB/

これには新しいレイヤーは必要ありませんでしたが、そうすることをお勧めします。

特に「カットアウト」をシミュレートするために、ロジックを好きなように調整できます。

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 500
  });
  var layer = new Kinetic.Layer();

  var pentagon = new Kinetic.RegularPolygon({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    sides: 5,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true,
    dragOnTop: false
  });
  var rect1 = new Kinetic.Rect({  // overlay
    x: 0,
    y: 0, 
    width: stage.getWidth(),
    height: 100,
    fill: 'gray',
    opacity: 0.5,
    listening: false     // <------ Extremely important
  });
  var rect2 = new Kinetic.Rect({ // overlay
    x: 0,
    y: stage.getHeight()/2, 
    width: stage.getWidth(),
    height: 100,
    fill: 'gray',
    opacity: 0.5,
    listening: false     // <------ Extremely important
  });

  // add the shape to the layer
  layer.add(pentagon);
  layer.add(rect1);
  layer.add(rect2);   // add more rectangles to complete overlay

  // add the layer to the stage
  stage.add(layer);
于 2013-03-07T16:16:54.160 に答える