Fabric.js动态剪切单个对象 [英] Fabric.js clipping individual objects dynamically

问题描述

我动态添加一个rect元素到裁剪/剪辑（使用clipTo）一个选定的元素，
它在第一时间完美运行，但是当我将第二个元素添加到画布并开始裁剪第二个元素时第一个元素松散了作物/剪辑。下面是我的代码，有2个按钮1开始裁剪/剪辑（在裁剪元素上放置一个动态矩形），然后进行裁剪/剪裁。

<$ p $（'＃c'）。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 （宽度* el.scaleX），parseInt（el.scaleY *高度））;
}



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（）顶部。
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;



其他{
alert（请选择一个对象或图层）;
}

}）;

解决方案

您正在寻找什么？ http://jsfiddle.net/86bTc/4/

您将设置为lastActive.clipTo = null;

I am dynamically adding a rect element to crop/clip (using clipTo) a selected element, It works perfect at the first time but when i add a second element to the canvas and begin to crop the second element the first element looses the crop/clip. Below is my code, there are 2 buttons 1 to start crop/clip (places a dynamic rect over the element to be cropped) second to do the cropping/clipping.

$('#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");
        }

});

解决方案

Is this what you're looking for? http://jsfiddle.net/86bTc/4/

You set the lastActive.clipTo = null;

这篇关于Fabric.js动态剪切单个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！