需要将图像插入到织物js并为其制作圆形边框。 (不是整个画布) 在这里阅读答案:
Fabric.js Clip Canvas (or object group) To Polygon
但我不能像那个人那样重现剪辑。
var clip = canvas.item(0);
var obj = canvas.item(1);
canvas.remove(clip);
obj.clipTo = function(ctx) {
clip.render(ctx);
};
尝试制作svg rectange并将图片剪辑到它: http://jsfiddle.net/ZxYCP/657/
我得到了意想不到的行为......
答案 0 :(得分:3)
以下是一个如何完成的示例:
var canvas = new fabric.Canvas('c');
function roundedCorners(ctx) {
var rect = new fabric.Rect({
left:0,
top:0,
rx:20 / this.scaleX,
ry:20 / this.scaleY,
width:this.width,
height:this.height,
fill:'#000000'
});
rect._render(ctx, false);
}
fabric.Image.fromURL('http://fabricjs.com/lib/pug.jpg', function(img) {
img.set({
angle: 45,
width: 500,
height: 500,
left: 140,
top: 100,
scaleX: 0.3,
scaleY: 0.3,
clipTo: roundedCorners.bind(img)
});
canvas.add(img).setActiveObject(img);
});
请参阅此处的小提琴:http://jsfiddle.net/ZxYCP/659/