我动态添加一个rect元素来裁剪/剪辑(使用clipTo)一个选定的元素,
它在第一次工作时很完美,但是当我向画布添加第二个元素并开始裁剪第二个元素时,第一个元素会丢失裁剪/剪辑.下面是我的代码,有2个按钮1来开始裁剪/剪辑(在要裁剪的元素上放置一个动态矩形)第二个来进行裁剪/裁剪.
它在第一次工作时很完美,但是当我向画布添加第二个元素并开始裁剪第二个元素时,第一个元素会丢失裁剪/剪辑.下面是我的代码,有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");
}
});
解决方法
这是你在找什么？
http://jsfiddle.net/86bTc/4/
你设置lastActive.clipTo = null;
