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

Question

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

绘画函数需要 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();
    }
    
    function handleMouseUp(event) {
    
        if (!event.primary) { return; }
        stage.removeEventListener("stagemousemove", handleMouseMove);
    }

位图元素已经添加到舞台上。当使用 stage.autoclear = false 调用 initPaint 时，位图会重绘，一个在另一个之上（这是显而易见的，因为我对位图产生阴影效果并且阴影不断变暗）。如何阻止重绘位图元素？

Answer 1

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

您最好的选择是拥有一个单独的 canvas/cache 供您连续绘制，然后将其添加为主舞台上位图的来源。缓存基本上会为你做这件事。

一种简单的方法是将您的 auto-draw 内容放入容器中，然后 cache() 它：

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

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

c.updateCache("source-over");

例如，这里有一个 fiddle，我在其中对透明框上的一些文本进行动画处理。加法效果看起来很棒，但它也使圆形做同样的事情：https://jsfiddle.net/lannymcnie/yfqne2or/

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

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

Using EaselJS, how can I set a framerate for painting while not redrawing the existing bitmap elements?

javascript

easeljs