使用 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 contentc.cache(0,0,400,800);然后你不需要在你的舞台上使用 autoClear，其他一切都会正常绘制。您只需要在内容更改时更新缓存即可。使用source-overas 绘制模式会将当前内容添加到缓存中，而不是先清除它。c.updateCache("source-over");例如，这是一个小提琴，我在其中为透明框上的一些文本设置动画。加法效果看起来很棒，但它也使圆形做同样的事情：https ://jsfiddle.net/lannymcnie/yfqne2or/通过简单地将 bg 和文本放在一个容器中，然后缓存它，我可以控制哪些部分得到效果，而不影响舞台的其余部分。请注意，这确实会导致您的内容重复绘制，但实际上没有更好的方法可以使用一个画布来完成它。https://jsfiddle.net/lannymcnie/yfqne2or/2