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 })