0

我正在使用 KineticJS，我想使用许多小图层来获得密集绘图的性能，但我发现（使用萤火虫）设置单个图层大小只是不调整它们各自的画布大小：所有创建的画布都有舞台方面！

小舞台（至少没有太多层）这不是问题，但是如果舞台很大，接近一百层，不会有性能问题吗？

换句话说，这是一个想要的功能还是一个错误？

这是一个简单的测试代码：

var stage = new Kinetic.Stage({
    container: 'main',
    width: 400,
    height: 400,
});
for (var i=0; i<5; i++) {
    var layer = new Kinetic.Layer({
        x:i*30+10,
        y:i*30+10,
        width:20,
        height:20,
    });
    layer.add( new Kinetic.Rect({
        width: 20,
        height: 20,
        fill: 'red',
    }));
    stage.add(layer);

    // trying to force layer dimensions
    layer.setWidth(20);
    layer.setHeight(20);
}
stage.draw();

在这里，我在查看 DOM 时看到的内容：

<div id="main">
    <div style="position: relative; display: inline-block; width: 400px; height: 400px;" class="kineticjs-content">
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
    </div>
</div>
4

1 回答 1

2

是的，您无法控制图层画布的大小

是的，您将获得数百层（=数百个全尺寸画布）的巨大性能冲击。

图层的大小始终与其舞台相同——即使您设置了较小的宽度/高度。宽度/高度属性继承自 Kinetic.Node 并且似乎无效。

此外，具有固定宽度的图层将允许形状从该图层“溢出”（该形状不会被剪辑到该图层中）。

所以……适度创建的图层非常适合：

  • 分层需要类似重绘计划的对象，
  • z 索引，
  • 重绘性能优势。

KineticJS 的创建者 Eric Rowell 做了这个压力测试：http ://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

他说：

创建 10 个图层，每个图层包含 1000 个形状以创建 10,000 个形状。这极大地提高了性能，因为从图层中移除圆时，一次只需要绘制 1,000 个形状，而不是全部 10,000 个形状。请记住，层数过多也会降低性能。我发现使用 10 层，每层由 1,000 个形状组成，其性能优于 20 层和 500 个形状或 5 层和 2,000 个形状。

于 2013-03-10T17:20:54.280 回答