Ограничить размер в 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 и проблема такая же.

EDIT:

Я был мог остановить движение объекта на масштабирование добавление lockScalingX:true and lockScalingY:true в код на максимальном масштабе, но теперь у меня есть еще одна проблема. Как я могу отключить этот lockScaling, поставив это значение в false, когда я масштабирую DOWN? Как я могу получить событие масштаба 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; 
});