布料。如何插入带有圆角边框的图像？

Question

需要将图片插入到fabric js中并为其制作圆角边框。（不是整个 canvas）在这里阅读答案：

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 矩形并将图像剪裁到它： http://jsfiddle.net/ZxYCP/657/

我遇到了意外行为...

Answer 1

这是一个如何完成的示例：

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);
});

请参阅此处 fiddle：http://jsfiddle.net/ZxYCP/659/

布料。如何插入带有圆角边框的图像？

Fabricjs. How to insert image with rounded borders?

canvas

fabricjs