技術標籤：fabric.jsfabric

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