如何在 angular 中使用 fabric js 设置 canvas 圆形边界

Question

我怎样才能让我的 canvas 圆形，这样我的 object/logo 就不会超出圆形衬衫颜色，请看附件默认情况下 canvas 是正方形，我想要的是 canvas 的循环行为。我尝试使用 css，但 canvas 的行为没有改变，它保持不变。

var canvas = this.canvas = new fabric.Canvas('canvas');
var pugImg = new Image();
pugImg.onload = function (img) {
  var pug = new fabric.Image(pugImg, {
    scaleX: .25,
    scaleY: .25
  })
  canvas.add(pug).renderAll();

};
pugImg.src = event.target.src;

Answer 1

剪辑 canvas，将阻止对象超出它。根据需要修改圈子。

var clipPath = new fabric.Circle({
   left: 100,
   top: 0,
   radius: 20,
   inverted: true
});
canvas.clipPath = clipPath;

有关 clipPaths 的更多信息，请参阅此处 http://fabricjs.com/clippath-part4

如何在 angular 中使用 fabric js 设置 canvas 圆形边界

how to set canvas boundary circlular using fabric js in angular

canvas

fabricjs

angular