在 Fabric.js 中限制调整大小

Question

我正在尝试限制 Fabric.js 中的最大对象调整大小。我正在使用 observe("object:scaling") 和这段代码：

canvasLI.observe("object:scaling", function(e) {
var shape = e.target;
var scaleX = shape.scaleX;
var scaleY = shape.scaleY;
var posX = shape.left;
var posY = shape.top;

if(!isNaN(scaleX) && scaleX > 2)
    {
    shape.set({
        scaleX: 2,          
        });
    }
if(!isNaN(scaleY) && scaleY > 2)
    {
    shape.set({
        scaleY: 2,
        });
    }
shape.set({
    left: posX,
    top: posY,
    });
console.log("X:" + ( shape.scaleX) + " Y:" + (shape.scaleY));
});

它工作正常，并且限制了最大尺寸，但是当一个对象有比例限制时并尝试再次调整大小，它会跟随鼠标光标移动顶部和左下角控件（不在右下角控件中）。

另外，我尝试在对象中捕获 left 和 top 值以将其移动到这些值，但不起作用。

谢谢。

PS：也试过改shape.width和shape.height而不是scaleX和scaleY，问题是一样的。

编辑：

我可以停止缩放对象的移动，将lockScalingX:true and lockScalingY:true 添加到最大缩放的代码中，但现在我遇到了另一个问题。当我缩小时，如何禁用此 lockScaling 将此值设置为 false？如何获得 scale DOWN 事件？

Answer 1

你可以使用回调onBeforeScaleRotate

canvas.onBeforeScaleRotate = function lock(object) { 
    object.set({ lockScalingX:false, lockScalingY: false  });
};

Answer 2

以下将停止对象在画布大小上调整大小并在反面调整大小。

 canvas.on('object:scaling', function(event){ 
        var el = event.target;
          if (el && (el.height*el.scaleX) > 10 && (el.left + (el.width*el.scaleX)) < canvas.width && (el.top + (el.height*el.scaleY)) < canvas.height){
            previous_scaleY=el.scaleY;           
            previous_scaleX=el.scaleX;
            previous_left=el.left;
            previous_top=el.top;
         }
        if(el && (el.height*el.scaleX) <10) {
             el.left=previous_left;
             el.top=previous_top;
             el.scaleX=previous_scaleX;
             el.scaleY=previous_scaleY;
             el.lockScalingX=true;
             el.lockScalingY= true;
             canvas.renderAll();
        }
       if (el && (el.left + (el.width*el.scaleX)) > canvas.width || (el.top + (el.height*el.scaleY)) > canvas.height){
            console.log('mOVINGGGGGGGGGGGGG');
            el.left=previous_left;
            el.top=previous_top;
            console.log('Scale X:'+el.scaleX);
            console.log('Scale Y:'+el.scaleY);
            console.log('width:'+el.width);
            console.log('Height:'+el.height);

            console.log('Previous Y: '+previous_scaleY);  // PREVIOUS SCALE X & Y WILL COME FROM MOUSE DOWN EVENT
            el.scaleX=previous_scaleX;
            el.scaleY=previous_scaleY;
            canvas.renderAll();

            }

      });

 canvas.observe('mouse:up', function (e) {
          var activeObject = e.target;
          activeObject.lockScalingX=false;  // this will connect with object scalling event
           activeObject.lockScalingY= false;
});