在EaselJS中将矢量绘制到位图

时间:2011-05-05 19:56:45

标签: javascript html5 canvas easeljs

我正在开发一个不断吸引数千个载体的EaselJS程序。毋庸置疑,经过短时间后,性能下降。要在Flash中解决这个问题,我会在向量后面创建一个位图,并定期将向量绘制到该位图并从显示列表中删除它们。

我在EaselJS中遇到这个问题很困难,尽管好像所有部分都已到位。如何创建一个空的Bitmap()并将Container()的内容绘制到它?

2 个答案:

答案 0 :(得分:4)

我认为您可以将所有内容放入容器中并缓存它。

var vectorContainer=new Container;
for (var i = 0;i<numVectors;i++){
  var vector=new Shape();
  //draw whatever vector you want to vector.graphics
  vectorContainer.addChild(vector);
}
vectorContainer.cache(someX,someY,someW,someH);

然而,获取最新的未标记版本,因为当前版本存在错误,并且无法正确缓存容器。

答案 1 :(得分:1)

我也一直在向矢量添加'snapToPixel = true',因为我读过它应该对某些浏览器有帮助。因此,在上面的示例代码中,我将在您执行缓存的最后一行之前添加以下行。

vectorContainer.snapToPixel = true;

查看此demo of cache and snap to pixel settings以查看实时示例。

在我的特定浏览器设置中,对齐像素实际上并没有改变性能,但在我阅读文档时似乎应该如此。