Angularjs 如何在Konva中获得无限的舞台高度以及IE/Firefox的兼容性问题

对于我的项目，我需要生成一个包含很多节点的konva页面。用户必须能够添加新节点并将其删除。到目前为止，我们的生产数据大约有8000个节点。我和angularJS和Konva一起工作。这些页面必须在Chrome、IE和Firefox中工作。代码如下所示（因公司政策而修改）：

angular.module（'testModule'）.controller（'compabilityTestCtrl'[
函数（）{
var compabilityTestCtrl=this；
compabilityTestCtrl.stage=新Konva.stage({
容器：angular.element（“”）[0]，
宽度：800，
身高：0
});
var层=新的Konva.layer（{}）；
var rect=新Konva.rect({
x:50，
y:25，
宽度：100，
身高：50，
填充：“绿色”，
笔画：“黑色”，
冲程宽度：4
});
层。添加（rect）；
compabilityTestCtrl.stage.height（矩形属性y+50）；
对于（变量i=1；i<436；i++）{
var newRect=rect.clone({
y:矩形属性y+（i*75）
});
layer.add（newRect）；
compabilityTestCtrl.stage.height（newRect.attrs.y+75）；
如果（i==435）{
log（“阶段高度为：”+compabilityTestCtrl.Stage.getHeight（））；
}
}
compabilityTestCtrl.stage.add（层）；
元素（'#compabilityTestKonva'）.append（compabilityTestCtrl.stage.content）；
}]);

问题如下： 1.如您所见，它可以生成一个节点，直到舞台高度达到32725px。如果我再添加一个节点（对于437的循环），页面将消失（在Chrome中）。它只能生成436个节点。 2.在Firefox中，对于436个节点，页面不是完全生成的。它只显示了其中的3/4部分。如果我切换到安全模式，它会显示所有这些。超过436个节点，它也像Chrome一样消失了。 3.在IE中，它只显示了所有节点的1/4

问题: 为什么我不能在Firefox和IE中显示所有页面？ 在这种情况下，如果舞台越来越大（在所有浏览器中），为什么页面会消失。。超过32725像素？康娃的舞台高度有限吗

我很乐意听取你的建议

我只是写了一把小提琴，所以你知道我到底有什么问题。

---

在fiddle中，它最多可以生成430个节点（在Chrome中），比我只看到一个空白页面的节点还要多。在Firefox中，它在353个节点上结束，在IE中，它在108个节点上结束。

画布元素就像一幅图像

32725px的高度是超级大。它将使用大量资源

---

尽量使舞台尽可能小。最好不要超过屏幕大小。您可以在后台添加某种类型的滚动，以便用户可以看到所有对象。

您说得对。我注释了这行代码：stage.height（stage.getHeight（）+75），并让高度保持不变。现在它可以更快地生成，即使我提供了430多个节点。你有什么建议，如何使其可滚动？@blow.eye这取决于你的应用程序。有很多方法可以滚动。您可以将stage设置为可拖动，也可以在左侧绘制一个矩形并将其实现为滚动条，因此移动它将移动一个stage。你认为这是个好主意吗？为什么我的第二个舞台是空的？

angular.module('testModule').controller('compabilityTestCtrl', [
function () {
    var compabilityTestCtrl = this;
    compabilityTestCtrl.stage = new Konva.Stage({
        container: angular.element('<div>')[0],
        width: 800,
        height: 0
    });

    var layer = new Konva.Layer({});

    var rect = new Konva.Rect({
        x: 50,
        y: 25,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
    });

    layer.add(rect);
    compabilityTestCtrl.stage.height(rect.attrs.y + 50);

    for (var i = 1; i < 436; i++) {
        var newRect = rect.clone({
            y: rect.attrs.y + (i * 75)
        });

        layer.add(newRect);
        compabilityTestCtrl.stage.height(newRect.attrs.y + 75);

        if (i == 435) {
            console.log("Stage height is: " + compabilityTestCtrl.stage.getHeight());
        }
    }

    compabilityTestCtrl.stage.add(layer);
    angular.element('#compabilityTestKonva').append(compabilityTestCtrl.stage.content);
}]);