使用EaselJS StageGL高效地绘制网格

Question

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

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

我看到多个选项：

1. 抽奖N + M系为各种不同的形状（我说的是EaselJS“形状”的实例），缓存它们（如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中呈现这个没有问题。

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

干杯。