Fabric.js Rect 限制边框宽度缩放,禁止按比例缩放

作者:Kinglong    发表时间:2023-10-12 06:11   

关键词:strokeUniform  lockUniScaling  

将元素的 strokeUniform 属性设置为 true 后,元素在缩放后,边框不会跟着缩放。

将元素的 lockUniScaling属性设置为 true 后,元素在缩放时,不会限制比例。

this.rect = new fabric.Rect({
    left: bbox.x0, // 距离容器左侧
    top: bbox.y0, // 距离容器顶部
    width: bbox.x1 - bbox.x0, //     height: bbox.y1 - bbox.y0, //     fill: 'transparent', // 填充颜色
    cornerColor: color,
    cornerSize: 8,
    borderScaleFactor: 1, // 辅助边粗细
    borderOpacityWhenMoving: 1, // 移动时的控制角和辅助边的透明度设置。1:不透明,0:全透明。
    // transparentCorners:false,
    strokeWidth: strokeWidth,
    stroke: color,
    strokeUniform: true, // 限制边框宽度缩放
    selection: true,
    selectable: true, // 是否允许选中
    // evented:false,
    // 禁止拖动设置
    lockMovementX: false,
    lockMovementY: false,
    // 禁止按比例缩放,设置为true时,实现不按比例缩放。
    lockUniScaling: true,
    // 是否禁止通过缩放翻转,一般设置为true,否则拖动左侧边超过右边界限会产生翻转。
    lockScalingFlip: true,
    // 是否禁止x方向缩放操作
    lockScalingX: false,
    // 是否禁止y方向缩放操作
    lockScalingY: false
})