本文简介

点赞 + 重视 + 保藏 = 学会了


运用 fabric.js 在某些情况下你可能需求固定元素边框的宽度，仔细看文档你会发现 fabric.js 已经为咱们提供了这个功用。本文简单介绍一下这个功用。


实现办法

先揭晓答案，将元素的 strokeUniform 特点设置为 true 后，元素在缩放后，边框会恢复成开始设置的大小。

Fabric.js 约束边框宽度缩放

<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 后对文本元素并不收效。

Fabric.js 约束边框宽度缩放

<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 橡皮擦的用法（包含恢复功用）》


点赞 + 重视 + 保藏 = 学会了