Fabricjs调整大小不改变边框宽度

项目需求:组件拖动放大时,边框宽度大小不变

本人在进行项目开发时,需要开发一个打印组件,组件使用的是矩形框来当文本框,但是发现在调整矩形框的时候,发现矩形框的边框也跟着变大,查了很久才发现答案

首先我们创建一个矩形

  const rect2 = new fabric.Rect({
      //矩形
      width: 100,
      height: 100,
      fill: '#ffffff',
      left: event.clientX - left,
      top: event.clientY - top,
      stroke: '#000', //边框颜色 黑色
      strokeWidth:1.5, //边框宽度1.5
    });
    canvas?.add(rect2);

通常情况下,我们在拖动时,会发现边框也跟着一起放大了

在查看代码时发现 ,边框宽度并没有变化

//当对象被修改(移动、缩放、旋转等)时触发。
      init.on('object:modified', function (options: any) {
       console.log('options',options)
      });
//打印值
1.  scaleX: 4.134963635719159
1.  stroke: "#000"
1.  strokeUniform: true
1.  strokeWidth: 1.5 //边框宽度
1.  top: 175
1.  typeName: "CanvasRect"
1.  type_name: "画布矩形"
1.  width: 100
1.  zoomX: 4.134963635719159
1.  zoomY: 1

最后查阅文档和百度,终于找到了对应的配置

    **strokeUniform:true,//配置边框是否加粗**

这个默认是false,可以控制边框是否随大小放大加粗

    const rect2 = new fabric.Rect({
      //矩形
      width: 100,
      height: 100,
      fill: '#ffffff',
      left: event.clientX - left,
      top: event.clientY - top,
      stroke: '#000',
      strokeWidth:1.5,
      strokeUniform:true,//配置边框是否加粗
    });
    canvas?.add(rect2);

总结: fabricjs的功能还是很强大的,但是文档是真的难看懂,所以记录一下,毕竟花了很长时间.

文片结束