search

leaferjs / ui

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

Canvas加上边框会造成自动布局,导致画布不断增大 #172

Closed AndersenWatson closed 1 month ago

AndersenWatson commented 1 month ago

创建固定宽高的应用绑定canvas且固定宽高,canvas如果加上边框，画布会一直增大，如果不加边框则没有问题。

可见:https://code.juejin.cn/pen/7394377636350263322

leaferjs commented 1 month ago

感谢反馈～，是有这个问题呢，后面看看能不能优化下，常见问题里收录了这个：

https://leaferjs.com/ui/guide/problem/#%E7%94%BB%E5%B8%83%E4%B8%8D%E6%96%AD%E8%87%AA%E5%8A%A8%E6%89%A9%E5%A4%A7%E5%AF%BC%E8%87%B4%E7%9A%84%E5%8D%A1%E9%A1%BF%E9%97%AE%E9%A2%98

AndersenWatson commented 1 month ago

刚上手发现有问题,不太明白在canvas已定义宽高的基础上在css加上边框,会导致canvas会变成自动布局,如果不加边框就不会变为自动布局,是这个原因吗?所以在使用时,应避免用canvas的css属性,比如想要边框应在canvas中进行绘画边框?

leaferjs commented 1 month ago

我发现原因了，需要在应用中指定宽高才算数（默认有自动布局的概念）

new Leafer({ view: 'id', // 支持 window 、div、canvas 标签对象， 可使用id字符串(不用加 # 号) width: 600, // 不能设置为 0， 否则会变成自动布局 height: 600 })

AndersenWatson commented 1 month ago

你看demo中已经设置指定宽高了呀,我也注意到了这个,demo就已经进行了固定宽高了还是自动变大,所以猜想加上边框,会导致canvas会变成自动布局

leaferjs commented 1 month ago

抱歉，刚没注意到，我看看原因，下个版本应该可以修复下，感谢反馈～

leaferjs commented 1 month ago

你看demo中已经设置指定宽高了呀,我也注意到了这个,demo就已经进行了固定宽高了还是自动变大,所以猜想加上边框,会导致canvas会变成自动布局

发现原因了，你的height少写了字母，导致高度没生效就变成自动布局了

image