javascript - 创建一个蒙版覆盖层，其下方可拖动/可调整大小

Question

我正在尝试下载kineticjs并开发了一个小应用程序，它可以使我的图像可拖动和调整大小。到目前为止一切顺利；

但是:我想要一个在中心具有可变高度/宽度 block 的覆盖层，该覆盖层应该显示下面的图像(可拖动/可调整大小不变)和半透明覆盖层。

我希望能够在覆盖层仍然完好无损的情况下仍然调整大小/拖动覆盖层后面(像这样，但使用kineticjs: http://envyum.nl/pointer/ )

有办法吗？也许可以从重叠的矩形中切出一个 block ？鼠标可以忽略覆盖层，例如 css3 中的 pointer-events: none 吗？

提前致谢，

Answer 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);