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

 看紅色位置處。最小比例fabric 是有api 的 最大沒有只能在縮放中 判斷比例,如果超出,就鎖住縮放,然後縮放到目標倍數,然後解鎖。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章