創建一個可拖動/可調整大小下面的蒙版覆蓋

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