相关疑难解决方法(0)

我有一个带有10138个零件的SVG图纸,因此它运行缓慢.
我想让它更像http://workshop.chromeexperiments.com/globe

以下是我正在考虑的解决方案/问题

• 有没有办法让SVG部件以较少处理器密集的方式呈现？
• 我可以将SVG转换为WebGL或画布吗？
• 我可以将它作为SVG运行但是通过WebGL或画布渲染吗？

我只是想让它更快......想法？

这是一个截图

想象一下,为拥有3000间客房的大型楼宇平面图构建Google地图.

我需要显示多达3000个矩形(最好的也是能够渲染随机多边形,但此时,这不是最大的问题).它们中的每一个都应该附加事件,例如鼠标悬停和单击,这将对页面上的其他dom元素产生一些影响.我还需要能够放大和缩小.

我知道我可以用SVG(Raphael.js),普通div渲染或画布来做.

我想知道是否有人有具体的建议来为我想要建立的东西.它需要在最慢的浏览器上足够快地渲染(大约1秒左右).(IE8,Firefox 3.6,希望IE7,即使我没有做太多梦想......)

谢谢你的帮助,尼古拉斯.

PS:到目前为止,我经历过使用Raphael.js在IE8上渲染3000个矩形需要长达7秒,这相当慢.它似乎也比在IE8上渲染普通div快6倍.

我需要制作一个具有约30k对象的应用程序，用户可以平移，缩放或“单击时选择”任何这些对象。正在使用Fabric.js画布

我已经使用SVG和svg-pan-zoom插件（没有Canvas元素）进行了相同的操作，效果更好

问题：缩放，平移或单击对象时出现严重滞后

1. 删除Fabric.js会提高性能吗？
2. 切换到WebGL会改善性能吗？

尝试了特定于面料的选项

fabric.Object.prototype.objectCaching = false;
fabric.Object.prototype.statefullCache = false;
fabric.Object.prototype.noScaleCache = true;
fabric.Object.prototype.needsItsOwnCache = false;

更新 这里更新的小提琴

以供参考 ：

1. canvas-vs-svg-vs-div Stackoverflow

2. 堆栈溢出

看一下这个例子：

  var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");

    // First rectangle created    
    ctx.fillRect(20,20,150,100);

    // Second rectangle created    
    ctx.fillRect(20,150,150,100);

    // Third rectangle created    
    ctx.fillRect(20,300,150,100);

我在这里创建了三个矩形。创建第三个矩形后，我想旋转第一个矩形。我现在如何获取第一个矩形的参考？