本文简介
点赞 + 关注 + 珍藏 = 学会了
应用 fabric.js 在某些状况下你可能须要固定元素边框的宽度，认真看文档你会发现 fabric.js 曾经为咱们提供了这个性能。本文简略介绍一下这个性能。
实现办法
先揭晓答案，将元素的 strokeUniform 属性设置为 true 后，元素在缩放后，边框会复原成最后设置的大小。
<canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas><script> let rect = new fabric.Rect({ left: 260, top: 110, width: 80, height: 60, fill: 'hotpink', stroke: '#333', strokeWidth: 10, strokeUniform: true // 限度边框宽度缩放 }) // 省略局部元素 canvas.add(rect)</script>在本例中，我将几何元素的边框宽度设置成10，在用鼠标拖放几何元素后，元素的边框宽度也会复原成10。
strokeUniform 的默认值是 false，如果不将 strokeUniform 设置为 true，边框就会随着几何元素的缩放而缩放。
fill、stroke、strokeWidth 等属性如果忘了的话能够查看 《Fabric.js从入门到 _ _》 温习一下。
遗憾的是
遗憾的是，将 strokeUniform 设置为 true 后对文本元素并不失效。
<canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas><script> let text = new fabric.Text('雷猴啊', { top: 30, left: 30, fill: 'orange', stroke: '#333', strokeWidth: 2, strokeUniform: true // 在 Text 里不失效！！！ }) // 省略局部元素 canvas.add(text)</script>代码仓库
⭐ strokeUniform限度边框宽度缩放
举荐浏览
《Fabric.js 喷雾笔刷 从入门到放肆》
《Fabric.js 监听元素相交(重叠)》
《Fabric.js 设置容器类名要留神这几点》
《Fabric.js 元素被遮挡的局部也能够操作》
《Fabric.js 动静设置字号大小》
《Fabric.js 橡皮擦的用法（蕴含复原性能）》
点赞 + 关注 + 珍藏 = 学会了
代码仓库