如何仅在fabric.js中的画布区域内缩放所选对象

Question

我试图仅在画布区域内拖动和缩放对象。

现在拖动工作以及如何仅在画布区域内进行缩放。

意味着我只需要在画布区域范围内缩放它，然后它必须在超过画布的最小和最大长度和宽度后停止缩放。

请参阅此链接Demo

JS：

var canvas; 
    //window.newAnimation = function(){
       canvas = new fabric.Canvas('canvas');
    //}

    window.print = function(){
      console.log(canvas.getActiveObject()); 
      //console.log(canvas.getObjects()); 
    };

    window.addRect = function(){
        var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 20,
      height: 20,
    });
        canvas.add(rect);

    }

    window.addCircle = function(){
        var circle = new fabric.Circle({
      radius: 20, fill: 'green', left: 100, top: 100
    });
        canvas.add(circle);
    }

    window.deleteObject = function() {
            canvas.getActiveObject().remove();
    }  

    canvas.on('object:moving', function (e) {
        var obj = e.target;
        console.log("inside");
        console.log(obj.getBoundingRect());

         // if object is too big ignore
        if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
            return;
        }        
        obj.setCoords();        
        // top-left  corner
        if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
            obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
            obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
            //console.log("11111     "+obj.top+"   "+obj.left);
        }
        // bot-right corner
        if(obj.getBoundingRect().top+obj.getBoundingRect().height  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width  > obj.canvas.width){
            obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
            obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
            //console.log("22222b     "+obj.top+"   "+obj.left);
        }
});

canvas.on('object:scaling', function (e) {
        var obj = e.target;
        var obj = e.target;
    if(obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().width > obj.canvas.width){
        console.log("return");
        return;
    }        
    obj.setCoords();        
    // top-left  corner

    if(obj.getBoundingRect().top < 0){
        obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
        //obj.height=;
    }

    if(obj.getBoundingRect().left < 0){
        obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
        //obj.width=200;
        //return;
        obj.width=Math.max(obj.width,(obj.width-obj.getBoundingRect().width));;
    }

    if(obj.getBoundingRect().top+obj.getBoundingRect().height  > obj.canvas.height){
        obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
        //obj.height=;
    }

    if(obj.getBoundingRect().left+obj.getBoundingRect().width  > obj.canvas.width){
        obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
        //obj.width=;
    }
});