javascript - 使用多层时,KineticJS/Canvas 会使 ipad 上的 safari 崩溃吗?

标签 javascript ipad safari kineticjs

这让我发疯。如果我运行下面的简单 HTML,它可以在我的 iPad2 (A1396) 上运行,但不能在我的 iPad 3 (A1416) 上运行。每当我将 iPad 3 从纵向旋转为横向时,Safari 就会崩溃。我看起来添加的层数和(每层)的宽度/高度之间存在关系。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
    <script defer="defer">
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 580,
            height: 400
        });
        var NrOfAttribute = 50;
        for (var AttributeNo = 0, NrOfAttribute; AttributeNo < NrOfAttribute; AttributeNo++) {
            var layer = new Kinetic.Layer();

            var rect = new Kinetic.Rect({
                x: 20*AttributeNo,
                y: 20*AttributeNo,
                width: 50,
                height: 10,
                fill: 'green',
                stroke: 'black',
                strokeWidth: 4
            });

            // add the shape to the layer
            layer.add(rect);

            // add the layer to the stage
            stage.add(layer);
        }
    </script>
  </body>
</html>

这是 iPad 上的错误还是内存问题?任何帮助将不胜感激,因为我真的需要这个工作。

谢谢!

编辑:我刚刚测试过对“常规” Canvas 执行相同的操作,如果我增加层数,它也会崩溃(所以它似乎不是动力学特定的)。如果层数增加得足够多,它在 Ipad2 上也会崩溃。

最佳答案

这可能不适合您,但是您是否需要为每个矩形创建一个单独的图层,或者您可以将它们全部放在同一图层中吗?我怀疑这将有助于减少内存使用,因为您最终不会得到 50 个 Canvas 元素。您可以给每个 Rect 一个唯一的 name然后仍然可以使用 rect = layer.find('.{name}'); # do something with rect 之类的内容单独操作它们

关于javascript - 使用多层时,KineticJS/Canvas 会使 ipad 上的 safari 崩溃吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22796518/

相关文章:

jquery - HTML5 Canvas 触摸事件在 iPad 或移动 safari 浏览器上偏移

ios - 从 iOS 中的部分图像创建 mask

javascript - 圆弧未在 Safari 中的 2D 上下文中呈现

html - 与 Chrome 相比,Flexbox 在 Safari 上的工作方式不同

javascript - 如果屏幕宽度小于 800(移动设备),则完全删除 div

javascript - 节点列表 - 'undefined: not bound to any nodes'

javascript - 计算两个日期之间的差异

javascript - 在knockoutjs中,对象是克隆还是它们引用相同的东西?

ios - 如何为 Retina 设置 Xcode 项目?

safari - 如何使用 workbox-webpack-plugin 在 Safari 中缓存 .mp4 文件?