Fabricjs。圆角和笔画的图像

Question

是否有一种简单的方法来剪切圆角和内部笔划的图像？

https://jsfiddle.net/4tursk3y/

$('#clip').click(function() {
    canvas._objects[1].set({
        'clipTo': function(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);
        }
    });
    canvas.renderAll();
});

Answer 1

您可以使用带有图案填充的矩形来获得圆角图像角，而不会剪切笔划。

var rect = new fabric.Rect({
  left: 10,
  top: 10,
  width: 140,
  height: 215,
  stroke: 'red',
  strokeWidth: 3,
  rx:10,
  ry:10
});
canvas.add(rect);

fabric.util.loadImage('http://fabricjs.com/assets/pug.jpg', function (img) {
  rect.setPatternFill({
    source: img,
    repeat: 'no-repeat',
    patternTransform: [0.2, 0, 0, 0.2, 0, 0]
  });
  canvas.renderAll();
});

https://jsfiddle.net/melchiar/78nt10ua/