var rect = new fabrics.Rect({ v: true, top: 216, left: 384, 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);
看红色位置处。最小比例fabric 是有api 的 最大没有只能在缩放中 判断比例,如果超出,就锁住缩放,然后缩放到目标倍数,然后解锁。