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

问题描述

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

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

位图位于容器中，该容器是 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时，位图会被重绘，一个在另一个之上（这很明显，因为我对位图有阴影效果并且阴影越来越暗）。如何阻止重绘位图元素？

标签： javascripteaseljs

解决方案

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

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

一种简单的方法是将您的自动绘制内容放入容器中，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/

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

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

问题描述

解决方案

推荐阅读