Fabric.js 动态裁剪单个对象答案

【问题标题】：Fabric.js clipping individual objects dynamicallyFabric.js 动态裁剪单个对象
【发布时间】：2014-04-11 04:51:12
【问题描述】：

我正在动态添加一个矩形元素来裁剪/剪辑（使用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,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");
        }

});

【问题讨论】：

是否可以在 jsfiddle 上弹出一个测试示例？
给你，小提琴jsfiddle.net/86bTc
@melwynpawar，此脚本适用于 1.4、0.9 版，但不适用于 1.2 版。有什么建议吗？

标签： html html5-canvas fabricjs

【解决方案1】：

这就是你要找的吗？ http://jsfiddle.net/86bTc/4/

你设置了lastActive.clipTo = null;

【讨论】：

【解决方案2】：

试试这个代码

function crop() 
{

if (!fabric.Canvas.supports('toDataURL')) {
    alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {


    var obj = canvas.getActiveObject();




    fabric.Image.fromURL(canvas.toDataURL({
        format: 'png',
        left: obj.left + 1,
        top: obj.top + 1,
        width: obj.width * obj.scaleX,
        height: obj.height * obj.scaleY,
    }), function (img) {
        canvas.remove(obj);
        canvas.remove(ao);
        canvas.add(img);

        canvas.renderAll();
    })
}

}
;


function Select() {

ao = canvas.getActiveObject();
if (!ao)
    return;

canvas.bringToFront(ao);


ao.selectable = false;
canvas.add(new fabric.Rect({
    left: 200,
    top: 200,
    width: 200,
    height: 200,
    fill: 'transparent',
    stroke: '#000000',
    hasRotatingPoint: false,
    strokeDashArray: [5, 5],
    cornerSize: 8,
}));

}

【讨论】：