leaferjs / ui

一款好用的 Canvas 渲染引擎,革新的体验。高效绘图 、UI 交互(小游戏、互动应用、组态)、图形编辑。
https://www.leaferjs.com
MIT License
2.32k stars 81 forks source link

Text 设置宽度后,即使改变字号 boxBounds.width 得到的仍然是设定值 #184

Open ZhuFaRuHuan opened 1 month ago

ZhuFaRuHuan commented 1 month ago
    如题,如果文字设置成自动宽度就无法换行,但设置了宽度在改变字号后实际文字大小已经超出了设定的宽度,这时想通过获取实际宽度来调整字号,发现 boxBounds.width 一直得到的是设定值而不是实际宽度。
    而且目前发现文字的 boxBounds 性能在中低端手机中下降的非常明显,和Konva的Text.width()的差距非常大。
    建议为文字提供独立的Text.width() Text.height() 方法来获取实际大小并做性能优化。
leaferjs commented 1 month ago

收到,谢谢反馈~

ZhuFaRuHuan commented 1 month ago

目前发现文字 boxBounds 性能问题是因为被错误的执行了N遍导致的,实际代码中只调用了一次。 WX20240812-184053@2x

ZhuFaRuHuan commented 1 month ago

上述问题在 Playground 项目中无法复现,不知道是不是因为是在 Promise 里循环添加导致的。 实际在循环 addRect 方法中只调用了一次 const boxBounds = text.getBounds('content', 'local') ,但在火焰图中看每次addRect中都被调用了20多次,导致直接卡主了。

leaferjs commented 1 month ago

文本宽高和boxBounds的获取,最近会优化一下,目前频繁获取是会造成页面布局的可能,类似浏览器的getClientBounds()

可以了解一下锁定布局的功能,防止多次重复布局的浪费: https://www.leaferjs.com/ui/reference/display/Leafer.html#%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95

ZhuFaRuHuan commented 1 month ago

感谢回复,但是用了锁定布局功能后所有的boxBounds返回的都是0,是否有强制单次刷新的功能? WX20240812-193556@2x

ZhuFaRuHuan commented 1 month ago

@leaferjs 作者您好,性能问题是我自己的原因造成的,在阅读了N遍文档之后在一个角落里发现了一句咒语。。。 WX20240813-153212@2x

leaferjs commented 1 month ago

哈哈哈,原来如此