bask 뒤에 이미지를 마스크하는 CreateJS

Question

그래서 여러 요소가 포함 된 캔버스가 있습니다. 이미지에 이미지 마스크를 적용하여 해당 이미지의 일부만 보여주기를 원합니다. 내 문제는 내가해야 할 일은 무대에 상대적으로 마스크를 배치하는 것이지만 그 마스크 뒤에있는 이미지의 부분 만 보여주는 것입니다. 내가 이것을 할 필요가있는 이유는 내가 이미지 (회전, 크기 조절, 비뚤어 짐, 등등 ...)를 다뤄야한다는 것입니다. 설명하기가 어렵습니다. 자세한 내용이 필요하면 알려주세요. 설명을 돕기 위해 아래에 몇 가지 이미지를 제공했습니다.

아래 이미지에서 볼 수 있듯이 같은 위치에 머물러 있지만 마스크가 원 안에 있는지 만 표시해야합니다. 그래서 내가 움직이고 이미지를 조작 할 때 나는 같은 장소에 머무르기 위해 가면이 필요하지만 이미지의 어떤 부분이 그 뒤에 있는지 보여줄 필요가있다.

Answer 1

당신은이 컨테이너, 할 수 있어야한다 :

1. 비트 맵 이미지를 가지고 첫 번째 자식으로를
2. 검은 색 오버레이 모양 두 번째 자식으로
3. 전체 마스크 형상 비트 맵/형상에 대하여 움직일 수

형상에 적용하고 콘테이너가 변화 될 수있는 동일한 화상

마스크 형상 갖는 제 2 비트 맵 .

아래의 코드는 기본 접근 방식을 보여줍니다. 그러나 example here은 무엇이 일어나고 있는지 보여주는 몇 가지 설명과 함께 사용자가 원하는대로보고 할 수있는 약간의 재능을 가지고 있습니다.

var c = new createjs.Container().set(); 
var b = new createjs.Bitmap(image); 
var o = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,imageWidth,imageHeight)); 
var b2 = new createjs.Bitmap(image); 
var m = new createjs.Shape(new createjs.Graphics().dc(0,0,50)); 
b2.mask = m; 

c.addChild(b, o, b2); 
stage.addChild(c); 

건배.