draggable/resizable 밑에 마스크 된 오버레이 만들기

Question

나는 kineticjs를 내려 내려고 노력 중이며 내 이미지를 드래그하고 크기를 조정할 수있는 작은 응용 프로그램을 만들었습니다. 여태까지는 그런대로 잘됐다;

그러나 : 반투명 오버레이로 이미지 아래에 이미지를 표시해야하는 가변 높이/너비 블록이있는 오버레이가 필요합니다 (드래그 가능/크기 조정 그대로). 오버레이가 그대로있는 동안

나는 여전히 오버레이 뒤에/드래그 크기를 조정할 수 있도록하려면 (이처럼,하지만 kineticjs로 : http://envyum.nl/pointer/)

그렇게 할 수있는 방법이 있나요? 아마도 오버레이 사각형에서 블록을 잘라내는 것일까? 그리고 마우스는 css3에서 pointer-events: none과 같은 오버레이를 무시할 수 있습니까? http://jsfiddle.net/KwQBB/

이것은 새 레이어를 필요로하지 않았지만, 그렇게하는 것이 좋습니다 수 있습니다 : 사전에

덕분에,

Answer 1

나는 위의 의견에 대해 말하고 있었는지의 샘플을 가지고있다.

당신은 논리는 특히 '컷 아웃'을 시뮬레이션하기 위해, 원하는로 조정할 수 있습니다

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