Question

我正在使用KineticJS，我想使用许多小图层来获得强化绘图的性能，但我发现（使用firebug）设置单个图层大小不会调整它们各自的画布大小：所有创建的画布有舞台维度！

对于一个小阶段（至少没有太多的层）这不是问题，但是有一个巨大的阶段并且接近一百层不会出现性能问题吗？

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

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

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>

Answer 1

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

是的，你将获得数百层（=数百幅全尺寸画布）的巨大性能。

即使您设置较小的宽度/高度，图层也总是与其舞台大小相同。宽度/高度属性继承自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个形状。这大大提高了性能，因为当从一个层中移除一个圆而不是所有10,000个形状时，只需要绘制1,000个形状。请记住，拥有太多图层也会降低性能。我发现使用10层（每层由1,000个形状组成）比20层（500个形状）或5个层（2,000个形状）要好。

无法使用KineticJS控制图层的画布大小

1 个答案: