Grid 使用EaselJS StageGL高效地绘制网格

我想用EaselJS在画布上画一个网格。我正在使用新的WebGL阶段StageGL

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

我看到了多种选择：

绘制N+M条线作为所有不同的形状（我说的是EaselJS“Shape”实例），缓存它们（因为WebGL需要光栅），然后将它们添加到舞台上

绘制一条水平线和一条垂直线，缓存它们（因为WebGL需要光栅），然后在后台以某种方式绘制相同的图像

绘制一个由N+M个路径组成的形状，缓存它并将其添加到舞台

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

选项2可以解决选项1中的问题，但我不知道如何解决

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

哪一个是最好的方法

---

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

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

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

您可以在不增加任何成本的情况下绘制尽可能多的位图，因为它是相同的源画布/图像。easeljsstagegl（下一个最新版本，有望很快发布）在WebGL中实现了这一点

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

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

---

干杯。

这很有帮助，非常感谢。使用

newcreatejs.Bitmap（shape.cacheCanvas）是关键