当前位置: 代码迷 >> 综合 >> fabric.js 限制缩放的最大最小比例
  详细解决方案

fabric.js 限制缩放的最大最小比例

热度:42   发布时间:2023-12-27 15:21:58.0
fabric.js 限制缩放的最大最小比例
var rect = new fabrics.Rect({v: true,top: 216,left: 384,width: 160,height: 90,fill: 'transparent',borderColor: '#05ca7e', //描边颜色borderDashArray: [0], //水印框虚线边hasRotatingPoint: false, //旋转点cornerColor: '#05ca7e', //边角颜色transparentCorners: false, //边角是否透明cornerStyle: 'rect', //边角形状cornerSize: 8, //边角大小cornerStrokeColor: '#05ca7e', //边角描边颜色cornerFillColor: '#05ca7e', //边角描边颜色lockScalingFlip: true, //控制缩放翻转lockUniScaling: true, //控制四个正方向缩放minScaleLimit: 0.5 // 最小限制
})
// 移动中限制区域
rect.on('moving', e => {this.posHandle(e.target);
});
// 移动结束修改位置
rect.on('moved', e => {this.videoHandle();
});
// 缩放中限制区域
rect.on('scaling', e => {// 最大限制if (e.target.scaleX > 2.5) {e.target.lockScalingX = true;e.target.scale(2.5);e.target.lockScalingX = false;};this.posHandle(e.target);
});
// 缩放结束修改位置
rect.on('scaled', e => {this.videoHandle();
});
this.canvas.add(rect);