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

已找到解决方案（对任何有兴趣的人）。关键是要将要掩盖的图像添加到容器中。将容器移动到您想要的任何位置，然后在容器内偏移所包含的图像。代码已经更新以反映这一点。