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

【问题标题】：Using CreateJS to apply an alpha tween to a drawn line使用 CreateJS 将 alpha 补间应用于绘制的线条
【发布时间】：2013-12-18 23:00:49
【问题描述】：

我正在尝试使用用户鼠标/触摸绘制线，然后使用补间使其 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();
});

【问题讨论】：

标签： html5-canvas easeljs createjs

【解决方案1】：

在将其淡出之前，您需要cache the whole shape。查看我对fiddle 所做的更新。主要看一下handleMouseUp事件的第52行。

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

然后，当你的淡入淡出完成时。确保在再次显示对象之前取消缓存。否则您的 graphics.clear() 将无法工作。

drawingCanvas.uncache();

【讨论】：

太好了，正是我想要的，谢谢！没有考虑先缓存它。