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时的移动，但现在我有另一个问题。当我缩放DOWN时，如何禁用此lockScaling将此值设置为false？我怎么能得到规模下降事件？

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

在Fabric.js中限制调整大小

2 个答案: