javascript - 绘制多条任意线是过于昂贵的 EaselJS

Question

我正在使用 EaselJS 编写一个 HTML5 2D“游戏”，它看起来像一个行星/重力模拟器，我决定用一条在每个行星移动时跟随它的线来追踪行星的运动/轨道。这是一个快速的 gif 演示:

问题是:如果我在每个刻度处创建一条线， Canvas 就会变得非常慢(因为它在每个刻度处绘制很多行，这是昂贵的)，所以我将昂贵的代码移到了 setInterval 循环之间有 250 毫秒的间隔，问题仍然存在，因为当有很多形状时，它会在每个循环中创建很多行。此外，如果我只是在每个循环之间添加更多时间，结果将开始看起来...... Minecraft-ish。

我不知道如何解决这个问题，因为我能想到的一切都包括在每个循环中创建很多行。我试过使用缓存，但缓存这些微小的细节线只会导致它们在最终缓存的图像中消失，而且由于问题不在于更新线，而是创建新线，我认为缓存对我没有任何作用。

相关代码如下:

setInterval(function() {
    allObjs.forEach(function(obj1) {
        if (typeof obj1.xpast !== "undefined" || typeof obj1.ypast !== "undefined") {
            var trail = new createjs.Shape();
            trail.graphics.s("#fff").ss(1, "round").moveTo(obj1.xpast + .5, obj1.ypast + .5).lineTo(obj1.x + .5, obj1.y + .5);
            trail.alpha = 0.25;
            stage.addChild(trail);
            setTimeout(function() {
                createjs.Tween.get(trail).to({
                    alpha: 0
                }, 1000).call(function() {
                    stage.removeChild(trail);
                });
            }, 10000);
        }
        obj1.xpast = obj1.x;
        obj1.ypast = obj1.y;
    });
}, 750);

很遗憾，目前我无法将我的代码放入 JSFiddle。

Answer 1

当每帧重新绘制 Canvas (并清除它以反射(reflect)不断变化的内容)时，矢量线会很快加起来。这是因为每帧都会重新绘制图形指令。 Canvas 上的矢量没有硬件加速，因此使用这种方法会非常慢，因为您会处理很多行。

最好的方法是缓存向量，然后只绘制新的向量。当您缓存它时，会在幕后创建一个新的 Canvas 元素，并用于代替实际图形。这意味着您可以根据需要将其复杂化，而不会影响性能。

• 以您需要的大小缓存形状(也许是 Canvas 大小？)
• 为该框架绘制新图形
• 更新缓存(将 Graphics 的内容绘制到现有缓存中)
• 清除图形以供下次使用

GitHub 上有这样的例子:

• http://createjs.com/Demos/EaselJS/Cache_update.html (显示正在运行的 updateCache)
• http://createjs.com/Demos/EaselJS/CurveTo.html (显示了使用非清算阶段的类似方法)

希望这对您有所帮助!