fabric.js：如何制作带有描边阴影等的椭圆形图像？答案

【问题标题】：fabric.js : How to make an image in the shape of a oval with strokes shadow etc?fabric.js：如何制作带有描边阴影等的椭圆形图像？
【发布时间】：2021-05-01 02:27:34
【问题描述】：

我一直试图将图像显示为椭圆形，但没有成功。

下面是我的代码 sn-p，它适用于圆形，但是当我们将图像从矩形转换为椭圆时会有间隙

如何在 html 画布中同时添加 rx、ry？这就是当前代码将我的矩形图像转换为椭圆的方式，高度和宽度存在差距，它们不准确。

示例输出图像：

fabric.util.loadImage(imageURL, function (img) {
      var oImg = new fabric.Image(img);


      if (slot.image_shape == "ellipse") {
        let shadow = (options && options.shadow) || {
          affectStroke: true,
        };
        const radius =
          oImg.width < oImg.height ? oImg.width / 2 : oImg.height / 2;
        oImg.set({
          clipTo: function (ctx) {
            return ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
          },
        });
      }

【问题讨论】：

我不熟悉fabric.js，但是如果你想从图像创建一个椭圆形，为什么不使用css呢？（边框半径，框阴影）stackoverflow.com/questions/26961221/how-to-make-an-oval-in-css

标签： javascript image canvas html5-canvas fabricjs

【解决方案1】：

不幸的是，我不知道您实际使用的是什么 fabric.js 版本，但从 2.4.0 开始，您可以使用 clipPath 属性。结合 Ellipse 类，您可以直接使用椭圆形作为遮罩 - 让您可以直接输入 rx 和 ry 的值，而不仅仅是半径。

这是一个例子：

var canvas = window._canvas = new fabric.Canvas('canvas');

fabric.Image.fromURL('https://picsum.photos/200/200', function(img) {
  img.set({
    hasControls: false,
    hasBorders: false,
    left: 0,
    top: 0,
    clipPath: new fabric.Ellipse({
      rx: 100,
      ry: 50,
      originX: 'center',
      originY: 'center',
    }),
  });
  canvas.add(img);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>

【讨论】：