fabric学习—裁剪篇

基础使用

1.新建一个要裁剪的fabric对象（target）

2.在fabric源对象中添加clipPath属性，赋值为target

var canvas = new fabric.Canvas('ex1');  
var clipPath = new fabric.Circle({  
    radius: 40,  
    top: -40,  
    left: -40  
});  
var rect = new fabric.Rect({  
    width: 200,  
    height: 100,  
    fill: 'red'  
});  
rect.clipPath = clipPath;  
canvas.add(rect);

我们新建的clipPath其实是一个黑色的像素区域，在源对象中，与 clipPath 的黑色像素重叠的对象的像素将可见，而其他像素将不可见。

组合裁剪

var canvas = new fabric.Canvas('ex2');  
var clipPath = new fabric.Circle({  
    radius: 100,  
    top: -100,  
    left: -100  
});  
var group = new fabric.Group([  
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })  
]);  
group.clipPath = clipPath;  
canvas.add(group);  

我们的源对象是一个由四个长方形组成的组group，组group可以使用clipPath属性进行一个整体的裁剪。如下图：

裁剪源对象可以是一个组， 我们的裁剪对象target也可以是一个组

var canvas = new fabric.Canvas('ex3');  
var clipPath = new fabric.Group([  
    new fabric.Circle({ radius: 70, top: -70, left: -70 }),  
    new fabric.Circle({ radius: 40, left: -95, top: -95 }),  
    new fabric.Circle({ radius: 40, left: 15, top: 15 }),  
], { left: -95, top: -95 });  
var group = new fabric.Group([  
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })  
]);  
group.clipPath = clipPath;  
canvas.add(group);

不规则裁剪

fabric对象一次不能有多个 clipPath，怎么办呢？但是请记住，我们的裁剪对象也是fabric的对象，也是可以拥有自己的clipPath属性。

var canvas = new fabric.Canvas('ex4');  
var clipPath = new fabric.Circle({ radius: 70, top: -50, left: -50 });  
var innerClipPath = new fabric.Circle({ radius: 70, top: -90, left: -90 });  
clipPath.clipPath = innerClipPath;  
var group = new fabric.Group([  
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),  
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })  
]);  
group.clipPath = clipPath;  
canvas.add(group);

多个裁剪属性叠加，可以看成是多个裁剪对象的相交，显示重叠部分

除了可以对裁剪对象target进行裁剪，也可以对源对象进行裁剪后在添加clipPath属性

(function () {
    var canvas = new fabric.Canvas('ex5');
    var clipPath = new fabric.Circle({ radius: 100, top: -100, left: -100 });
    var small = new fabric.Circle({ radius: 50, top: -50, left: -50 });
    var group = new fabric.Group([
        new fabric.Rect({ width: 100, height: 100, fill: 'red', clipPath: small }),
        new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
        new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
        new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
    ]);
    group.clipPath = clipPath;
    canvas.add(group);
})()

裁剪文本

裁剪除了可以裁剪出各种图形外，还可以以以文字的形式进行裁剪。

(function () {
    var canvas = new fabric.Canvas('ex6');
    var clipPath = new fabric.Text(
        'Hi I\'m the \nnew ClipPath!\nI hope we\'ll\nbe friends',
        { top: -100, left: -100 });
    var group = new fabric.Group([
        new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
        new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
        new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
        new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
    ]);
    group.clipPath = clipPath;
    canvas.add(group);
})()