使用CreateJS将alpha补间应用于绘制的线条

Question

我正在尝试使用用户鼠标/触摸绘制的线条然后使用补间动画将alpha淡出结果。问题是当帽和关节样式设置为圆形时，关节点会在线的其余部分后面消失。设置为斜角或斜角时看起来很好。

我想要的是形状的光滑固体褪色。有什么想法吗？

小提琴：http://jsfiddle.net/mcfarljw/ZNGK2/

根据用户输入绘制线条的功能：

function handleMouseMove(event) {
var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);

drawingCanvas.graphics.setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;

oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;

stage.update();

}

在线完成后应用于形状的补间：

createjs.Tween.get(drawingCanvas).to({
    alpha: 0
}, 2000).call(function() {
    drawingCanvas.alpha = 1;
    drawingCanvas.graphics.clear();
});

Answer 1

在淡出之前你会想cache the whole shape。查看我对fiddle所做的更新。主要是看看handleMouseUp事件的第52行。

drawingCanvas.cache(0, 0, 800, 800);

然后，当你的淡入淡出完成。确保在再次显示对象之前取消缓存。否则你的graphics.clear（）将无效。

drawingCanvas.uncache();