在Fabric.js中限制调整大小

我试图限制Fabric.js中的最大对象大小调整。我使用observe("object:scaling")与此代码：在Fabric.js中限制调整大小

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当我缩小DOWN时将此值设置为false？我怎样才能得到缩小比例的事件？

来源

2014-01-24 Mashabak

我一直可以停止在最大范围内对代码添加'lockScalingX：true和lockScalingY：true'的缩放对象的移动，但现在我又遇到了另一个问题。我如何禁用这个lockScaling当我缩小DOWN时将此值设置为false？我怎样才能得到缩小比例的事件？ – Mashabak

您可以使用回调onBeforeScaleRotate

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

来源

2014-03-28 02:57:48 Ventoh

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

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

来源

2015-02-03 08:19:08

辉煌。谢谢！ –

在Fabric.js中限制调整大小

回答

相关问题