使用 EaselJS，如何在不重绘现有位图元素的情况下为绘画设置帧速率？

Question

我是 EaselJS 的新手，我有一个带有位图的舞台，我需要添加绘画功能，以便可以在位图上绘制形状。

paint 函数需要 stage.autoClear = false 来创建形状。此代码强制重绘舞台上的所有元素（包括位图）。但是舞台上已有的位图不应该重绘。

位图位于 container 中，它是 stage 的子级。这就是我所拥有的（大部分来自https://github.com/CreateJS/EaselJS/blob/master/examples/CurveTo.html）：

函数初始化（）{ canvas = document.getElementById("theCanvas"); 阶段 = 新的 createjs.Stage（画布）； createjs.Touch.enable(stage); stage.enableMouseOver(10); stage.mouseMoveOutside = true; stage.addChild(容器); }; 函数 initPaint() { var oldPt; var oldMidPt; 变量颜色； 变量中风； stage.autoClear = false; stage.enableDOMEvents(true); createjs.Ticker.framerate = 24; stage.addEventListener("stagemousedown", handleMouseDown); stage.addEventListener("stagemouseup", handleMouseUp); stage.addChild(drawingCanvas); 阶段.更新（）； }; 函数句柄MouseDown（事件）{ if(!event.primary) {return; } stage.autoClear = false; 颜色=“#000000”； 行程 = 20； oldPt = new createjs.Point(stage.mouseX, stage.mouseY); oldMidPt = oldPt.clone(); stage.addEventListener("stagemousemove", handleMouseMove); } 函数句柄鼠标移动（事件）{ 如果（！event.primary）{返回； } var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1); drawingCanvas.graphics.clear().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; 阶段.更新（）； } 函数句柄MouseUp（事件）{ 如果（！event.primary）{返回； } stage.removeEventListener("stagemousemove", handleMouseMove); }

位图元素已添加到舞台。当使用 stage.autoclear = false 调用 initPaint 时，位图会被重绘，一个在另一个之上（这很明显，因为我对位图有阴影效果，并且阴影越来越暗）。如何阻止位图元素被重绘？

Answer 1

您不能有条件地选择要重绘到舞台的内容。

您拥有的最佳选择是拥有一个单独的画布/缓存，您可以连续绘制到该画布/缓存，然后将其添加为主舞台上的位图源。缓存基本上为您完成了这项工作。

一个简单的方法是将你的自动绘制内容放入一个容器中，然后cache()它：

var c = new createjs.Container();
c.addChild(bg, txt); // Add your content
c.cache(0,0,400,800);

那么你就不需要在你的舞台上使用 autoClear 了，其他一切都照常绘制。您只需要在内容更改时更新缓存。使用source-over作为绘制模式会将当前内容添加到缓存中，而不是先清除它。

c.updateCache("source-over");

例如，这是一个小提琴，我在透明框上为一些文本设置动画。加法效果看起来很棒，但它也让圆形做同样的事情：https://jsfiddle.net/lannymcnie/yfqne2or/

通过简单地将背景和文本放入一个容器中并对其进行缓存，我可以控制哪些部分获得效果，而舞台的其余部分不受影响。请注意，这确实会导致您的内容重复绘制，但实际上没有更好的方法可以使用一个画布来完成它。 https://jsfiddle.net/lannymcnie/yfqne2or/2