EaselJS：在AlphaMaskFilter中使用updateCache（）時拖動蒙版

Question

我使用一個導入的PNG與我設置爲一個蒙板，它顯示它分配給它的位圖的蒙版。蒙版對象是可拖動的（有點像手電筒）。我知道我應該使用AlphaMaskFilter作爲過濾器之一，我知道我應該使用.updateCache（）...我只是不確定我是否正確使用它們？

var stage; 
var assetQueue; 
var bg; 
var bgMask; 
var container; 
var amf; 

$(document).ready(function(){ 
    loadImages(); 

}); 

function loadImages() 
{ 

    // Set up preload queue 
    assetQueue = new createjs.LoadQueue(); 


    assetQueue.addEventListener("complete", preloadComplete); 
    assetQueue.loadManifest([{id:"img_bg",src:"images/Nintendo-logo-red.jpg"}, {id:"img_bg_mask",src:"images/background_mask.png"}]); 
} 

function preloadComplete() 
{ 
    assetQueue.removeEventListener("complete", preloadComplete); 

    init(); 
} 

function init() 
{ 
    stage = new createjs.Stage("stage_canvas"); 

    setBackgrounds(); 

    sizeStage(); 

    $(document).mousemove(function(evt){ 
     trackMouse(evt); 
    }); 
} 

function trackMouse(evt) 
{ 
    var mouseX = evt.pageX; 
    var mouseY = evt.pageY; 

    // Move the containing clip around 
    container.x = mouseX - (bgMask.image.width/2); 
    container.y = mouseY - (bgMask.image.height/2); 


    // Offset the position of the masked image. 
    bg.x = -container.x; 
    bg.y = -container.y; 

    container.updateCache(); 
    stage.update(); 
} 

function setBackgrounds() 
{ 
    bg = new createjs.Bitmap(assetQueue.getResult("img_bg")); 
    bgMask = new createjs.Bitmap(assetQueue.getResult("img_bg_mask")); 
    container = new createjs.Container(); 

    container.addChild(bg); 
    amf = new createjs.AlphaMaskFilter(bgMask.image) 
    container.filters = [amf]; 

    container.cache(0, 0, bg.image.width, bg.image.height); 

    stage.addChild(container); 

    stage.update(); 
} 

function sizeStage() 
{ 

    var windowW = 600; 
    var windowH = 600; 

    stage.canvas.width = windowW; 
    stage.canvas.height = windowH; 

    stage.update(); 
} 

Answer 1

已找到解決方案（對任何有興趣的人）。關鍵是要將要掩蓋的圖像添加到容器中。將容器移動到您想要的任何位置，然後在容器內偏移所包含的圖像。代碼已經更新以反映這一點。