Html5 canvas EaselJS:拖动掩码时将updateCache()与AlphaMaskFilter一起使用
我使用的是一个导入的png,带有一个alpha渐变,我将其设置为一个遮罩,以显示指定给它的位图。遮罩对象是可拖动的(有点像手电筒)。我知道我应该使用AlphaMaskFilter作为其中一个过滤器,并且我知道我应该使用.updateCache()。。。我只是不确定我是否正确使用了它们Html5 canvas EaselJS:拖动掩码时将updateCache()与AlphaMaskFilter一起使用,html5-canvas,masking,createjs,Html5 Canvas,Masking,Createjs,我使用的是一个导入的png,带有一个alpha渐变,我将其设置为一个遮罩,以显示指定给它的位图。遮罩对象是可拖动的(有点像手电筒)。我知道我应该使用AlphaMaskFilter作为其中一个过滤器,并且我知道我应该使用.updateCache()。。。我只是不确定我是否正确使用了它们 var stage; var assetQueue; var bg; var bgMask; var container; var amf; $(document).ready(function(){ l
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();
}
找到解决方案(针对感兴趣的任何人)。关键是将要遮罩的图像添加到容器中。将容器移动到所需的任何位置,然后偏移容器中包含的图像。代码已更新以反映这一点