leaferjs/leafer-ui

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

Closed this issue · 7 comments

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

收到,谢谢反馈~

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

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

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

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

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

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

哈哈哈,原来如此