使用 EaselJS StageGL 高效绘制网格

Question

我想使用 EaselJS 在 canvas 上绘制网格。我正在使用新的 WebGL 舞台 StageGL。

一个格子基本上就是N倍水平线和M倍垂直线

我看到多个选项：

绘制 N+M 条线作为所有不同的形状（我说的是 EaselJS "Shape" 实例），缓存它们（因为 WebGL 需要光栅）并将它们添加到舞台上。
绘制 1 条水平线和 1 条垂直线，缓存它们（因为 WebGL 需要光栅）并以某种方式在舞台上绘制相同的图像
绘制一个由 N+M 条路径组成的形状，将其缓存并添加到舞台。

选项 #1 对我来说似乎很天真。都是同一张图，为什么要画到缓存N+M次？

选项 #2 可以解决选项 #1 中的问题，但我不知道该怎么做。

选项 #3 生成非常大的图像。对于 N=50、M=50 和 gridSpacing=50px，它会产生 2500x2500 像素的图像。我不知道这是否理想。

哪种方法最好？

还有其他方法吗？我不认为我是第一个画网格的人:)

Answer 1

您可以非常轻松地缓存形状，并将生成的缓存 (canvas) 用作位图的源。

var shape = new createjs.Shape();
shape.graphics.drawStuff();

// Since shapes have no bounds, you will have to know the bounds based on what you draw:
shape.cache(x, y, w, h);

var bmp = new createjs.Bitmap(shape.cacheCanvas);

您可以绘制尽可能多的这些位图而无需任何额外费用，因为它们的来源相同 canvas/image。 EaselJS StageGL（最新的 NEXT，希望很快发布）在 WebGL 中渲染没有问题。

查看 GitHub 中的 SpriteSheetBuilder 演示和文档，将内容绘制到 SpriteSheet/Sprite 而不是位图。

干杯。

使用 EaselJS StageGL 高效绘制网格

Drawing a grid efficiently with EaselJS StageGL

grid

line

createjs

easeljs