CreateJS掩蓋背後的圖像

Question

所以我有一個畫布內有多個元素。我想將圖像蒙版應用於圖像，以便僅顯示圖像的一部分。我的問題是，我需要做的是將相對於舞臺的面具放置，但只顯示該面具背後的圖像部分。我需要這樣做的原因是我將要操縱圖像（旋轉，縮放，傾斜等）。這很難解釋，所以如果你需要更多的細節，請讓我知道。我在下面給出了一些圖片來幫助解釋。

所以你可以從下面的圖片看到我需要面具留在同一個地方，但只顯示在圈子裏。所以當我移動和操縱圖像時，我需要將蒙版留在相同的位置，但要顯示圖像背後的部分。

Answer 1

你應該能夠做出集裝箱，其中有：

1. 位圖的第一個孩子，它具有圖像
2. 作爲第二個孩子的黑色覆蓋物形狀
3. 第二位圖具有相同的圖像
4. 的掩模的形狀，其被施加到形狀

掩模形狀能相對移動的位圖/形狀，然後將集裝箱可以轉化作爲一個整體。

下面的代碼顯示了基本的方法 - 但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); 

乾杯。