相关疑难解决方法(0)

什么是动态创建元素并能够移动它们的最佳方法？例如,假设我想创建一个矩形,圆形和多边形,然后选择这些对象并移动它们.

我知道HTML5提供了三个可以实现这一目标的元素:svg,canvas和div.对于我想要做的事情,哪一个元素将提供最佳性能？

为了比较这些方法,我考虑创建三个视觉上相同的网页,每个网页都有页眉,页脚,小部件和文本内容.第一页中的小部件将完全使用canvas元素创建,第二个完全使用svg元素创建,第三个使用plain div元素HTML和CSS创建.

我需要制作一个具有约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. 堆栈溢出