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

Posted 2022-03-30 maopixin

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

 看红色位置处。最小比例fabric 是有api 的 最大没有只能在缩放中 判断比例，如果超出，就锁住缩放，然后缩放到目标倍数，然后解锁。