createJS学习之AlphaMaskFilter 类

[fredshare]

createJS之EaselJS教程之2--AlphaMaskFilter 类

此类适用于目标对象的图片蒙板的透明度编辑，分离出蒙板的透明管道，复制颜色管道。比如，这能用在更改一个目标的透明蒙板，也能够通过一个压缩过的rgb图片和一个png32的透明蒙板合成一个jpg图片，相比一个单纯的包含argb值的png32格式图片，这能明显的减少图片大小。

重要提示：这个过滤器类暂时还不能正确的支持targetCtx，targetX/Y 参数。

举例

这个例子创建了一个渐变的容器，然后将它用cacheCanvas缓存透明蒙板为一个100*100的图片。

function init() {  
    window.img = new Image();
    img.src = "http://imgtest-lx.meilishuo.net/pic/r/72/31/ee3a366cf629d2ee840831352a29_600_600.jpeg";             
    img.onload = function(){
        drawBitmap();
    }
}
function drawBitmap(){
    var stage = new createjs.Stage("demoCanvas");   
    var box = new createjs.Shape();
    box.graphics.beginLinearGradientFill(["#000000", "rgba(0, 0, 0, 0)"], [0, 1], 0, 0, 200, 200);
    box.graphics.drawRect(0, 0, 200, 200);
    box.cache(0, 0, 200, 200);

    var bitmap = new createjs.Bitmap(img);
    bitmap.filters = [
        new createjs.AlphaMaskFilter(box.cacheCanvas)
    ];
    bitmap.cache(0, 0, 200, 200);
    stage.addChild(bitmap);
    bitmap.x = 0;
    bitmap.y = 0;            
    stage.update();

    bitmap.onClick = function(event) {
        bitmap.rotation = 35;
        bitmap.alpha = 0.5;
        stage.update(); 
    }
}