KonvaJS에서 globalcompositeOperation과 함께 이미지 마스크를 사용 하시겠습니까?

Question

나는 Konva.js 프레임 워크를 사용하고 다른 마스크 위에 이미지 마스크를 적용하려고합니다. 코드가 post에서 완전히 복사됩니다. 이 jsfiddle example에는 배경 (Rect)을 추가하기위한 약간의 수정이 있습니다.

배경이 올바르게 그려지지 않는 것이 문제입니다. 코드에서 실제 작동 상태를 보려면 주석 처리/주석 해제 (문제의 실제 상황을 파악하기 위해) 행이 있습니다. 누군가이 아이디어를 얻을 수 있습니까?

최저

문제는 당신에게 필요하다는

let stage = new Konva.Stage({ 
    container: 'container', 
    width: window.innerWidth, 
    height: window.innerHeight 
}); 

let layer = new Konva.Layer(); 
let rect = new Konva.Rect({ 
    x: 0, 
    y: 0, 
    width: 900, 
    height: 900, 
    draggable: true, 
    fill: '#ff8619', 
}); 

// ------------------------------------- 
// Line to comment or uncomment 
//layer.add(rect); 
// ------------------------------------- 

stage.add(layer); 

let mask = new Image(); 
mask.onload =() => { 
    let img = new Image(); 
    img.onload =() => { 
     let image = new Konva.Shape({ 
      sceneFunc: (ctx) => { 
       ctx.save(); 
       ctx.drawImage(mask, -image.x(), -image.y(), 200, 200); 
       ctx.globalCompositeOperation = 'source-in'; 
       ctx.drawImage(img, 0, 0, 200, 200); 
       ctx.globalCompositeOperation = 'source-over'; 
       ctx.restore(); 
      }, 
      // (!) important 
      // for this case you need to define custom hit function 
      hitFunc: (ctx) => { 
       ctx.rect(0, 0, 200, 200); 
       ctx.fillStrokeShape(image); 
      }, 
      draggable: true 
     }); 
     layer.add(image); 
     layer.draw(); 
    }; 
      img.src = "http://i.imgur.com/kKjW3U4.png"; 

}; 
     mask.src = "http://i.imgur.com/fQX2P8S.png"; 

Answer 1

: let layer2 = new Konva.Layer();
2. 올바른 순서로 무대에 추가 : stage.add(layer2, layer);

1. 새 레이어를 추가 업데이트 된 내용은 다음과 같습니다.
jsfiddle example