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

Question

我是 EaselJS 的新手，我有一个带位图的舞台，我需要添加绘画功能，以便可以在位图之上绘制形状。paint 函数需要stage.autoClear = false来创建形状。此代码强制重绘舞台上的所有元素（包括位图）。但不应重绘舞台上现有的位图。位图位于container中，它是stage的子级。这就是我所拥有的（大部分来自https://github.com/CreateJS/EaselJS/blob/master/examples/CurveTo.html）：   function init() {            canvas = document.getElementById("theCanvas");        stage = new createjs.Stage(canvas);        createjs.Touch.enable(stage);        stage.enableMouseOver(10);        stage.mouseMoveOutside = true;        stage.addChild(container);    };        function initPaint() {            var oldPt;        var oldMidPt;        var color;        var stroke;                stage.autoClear = false;        stage.enableDOMEvents(true);        createjs.Ticker.framerate = 24;                stage.addEventListener("stagemousedown", handleMouseDown);        stage.addEventListener("stagemouseup", handleMouseUp);            stage.addChild(drawingCanvas);        stage.update();        };        function handleMouseDown(event) {        if(!event.primary) {return; }        stage.autoClear = false;            color = "#000000";        stroke = 20;        oldPt = new createjs.Point(stage.mouseX, stage.mouseY);        oldMidPt = oldPt.clone();        stage.addEventListener("stagemousemove", handleMouseMove);    }        function handleMouseMove(event) {        if (!event.primary) { return; }        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;            stage.update();    }    位图元素已添加到舞台中。当使用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-overas 绘制模式会将当前内容添加到缓存中，而不是先清除它。

c.updateCache("source-over");

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

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