html5 – Fabric.js动态剪辑单个对象

我动态添加一个rect元素来裁剪/剪辑(使用clipTo)一个选定的元素,
它在第一次工作时很完美,但是当我向画布添加第二个元素并开始裁剪第二个元素时,第一个元素会丢失裁剪/剪辑.下面是我的代码,有2个按钮1来开始裁剪/剪辑(在要裁剪的元素上放置一个动态矩形)第二个来进行裁剪/裁剪.

$('#crop').on('click',function (event) {


    var left = el.left - object.left;
    var top = el.top - object.top;

    left *= 1;
    top *= 1;

    var width = el.width * 1;
    var height = el.height * 1;

  object.clipTo = function (ctx) 
  {
        ctx.rect(-(el.width/2)+left,-(el.height/2)+top,parseInt(width*el.scaleX),parseInt(el.scaleY*height));
  }



    for(var i=0; i<$("#layers li").size();i++)
        {
            canvas.item(i).selectable= true;
        }
    disabled = true;

    canvas.remove(canvas.getActiveObject());
    lastActive = object;
    canvas.renderAll();



});

$('#startCrop').on('click',function(){

    canvas.remove(el);
    if(canvas.getActiveObject())
    {

    object=canvas.getActiveObject();    
    if (lastActive && lastActive !== object) {
        lastActive.clipTo = null;
    }



        el = new fabric.Rect
        ({
            fill: 'rgba(0,0.3)',originX: 'left',originY: 'top',stroke: '#ccc',strokeDashArray: [2,2],opacity: 1,width: 1,height: 1,borderColor: '#36fd00',cornerColor: 'green',hasRotatingPoint:false
        });

        el.left=canvas.getActiveObject().left;
        selection_object_left=canvas.getActiveObject().left;
        selection_object_top=canvas.getActiveObject().top;
        el.top=canvas.getActiveObject().top;
        el.width=canvas.getActiveObject().width*canvas.getActiveObject().scaleX;
        el.height=canvas.getActiveObject().height*canvas.getActiveObject().scaleY;


        canvas.add(el);
        canvas.setActiveObject(el);
        for(var i=0; i<$("#layers li").size();i++)
            {
                canvas.item(i).selectable= false;
            }
    }

    else{
            alert("Please select an object or layer");
        }

});