创建一个可拖动/可调整大小下面的蒙版覆盖

Question

我试图让kineticjs下来，并制定了一个小应用程序，这使得我的图像可拖动和可调整大小。到现在为止还挺好;

但是，我想要一个中心可变高度/宽度块的叠加层，它应该在半透明叠加层下面显示下面的图像（可拖动/可调整大小）。

我希望能仍调整叠加的背后/阻力而交叠依然完好（与此类似，但kineticjs：http://envyum.nl/pointer/）

有没有办法这样做呢？通过从一个重叠的矩形切出一个块或许？并且可以在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);