使用EaselJS StageGL高效绘制网格

Question

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

网格基本上是水平线的N倍，是垂直线的M倍。

我看到了多个选项：

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

选项＃1对我来说似乎很幼稚。它们都是相同的图像，为什么要将它们绘制到缓存N + M次？

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

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

哪一个是最好的方法？

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

Answer 1

您可以非常轻松地缓存形状，并使用生成的缓存（画布）作为位图的源。

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);

您可以绘制尽可能多的这些位图而无需任何额外费用，因为它的源画布/图像相同。 EaselJS StageGL（最近发布的NEXT，很快就会发布）在WebGL中呈现这一点没问题。

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

干杯。