甘肃企业网站建设,莆田企业网站建设,网站建设有几种,wordpress 自定义鼠标必要解释#xff1a;最好看完。。省流版的话#xff0c;toDataURL 的 multiplier参数不要设置超过500#xff1b;
情景#xff1a;在做某些功能的时候涉及到图形的预览#xff0c;预览的时候是导出为40*40 像素的图片#xff0c;当碰到某些图形非常小的时候#xff0c;…必要解释最好看完。。省流版的话toDataURL 的 multiplier参数不要设置超过500
情景在做某些功能的时候涉及到图形的预览预览的时候是导出为40*40 像素的图片当碰到某些图形非常小的时候例如该图形是0.01宽/0.01高那么如果想要得到该图形40*40大小的图片则需要放大非常大的倍数 multiplier从而导致 toDataURL 一个函数就需要执行1秒(根据放大倍数而定)且放大的倍数 multiplier 有一个临界值当multiplier的值超过xxx时multiplier每提高一段倍数所需的时间更长。例如multiplier800是1秒multiplier1200是2秒 当时情况已经忘了所以只是打个比方感兴趣的自己测下就知道了。。 吐槽当时解决大量图形的性能瓶颈解决完虚拟化列表后自测时还是发现某些情况下某些素材加载时、操作时有性能问题当时找了半天最后才发现是 toDataURL 导致的性能问题 解决方案
宽||高超过40的就是缩小了不存在性能问题 0.01*0.01的图形放大至40的时候40/0.01就会得到4000的倍率而且这么这么小的图形即使放大也看不清故而采取措施为将该图形不进行图片提取反正拿到图片你也看不见这图形不如不拿就完事了。。
本文其实就是讲解思路和问题点所在代码案例写不写无所谓没啥复杂的但也分享下自己案例的相关片段 val.clone(async (newShape: fabric.Object) {const options {strokeWidth: 1,} as any;if (newShape.stroke) {options.stroke newShape.processMode ProcessMode.cut? newShape.originStrokeForCut: newShape.originStroke;}const w newShape.width 30 / (newShape.width * (newShape.scaleX as number));const h newShape.height 30 / (newShape.height * (newShape.scaleY as number));const multiplier Math.min((w || h) as number, (h || w) as number);e.base64 ;if (multiplier 500) {multiplier 1 (options.strokeWidth (1 / multiplier) * 1.5);newShape.set(options);e.base64 newShape.toDataURL({multiplier,});}});
