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

Posted 2023-03-24

【中文标题】fabric.js：如何制作带有描边阴影等的椭圆形图像？

【英文标题】：fabric.js : How to make an image in the shape of a oval with strokes shadow etc?

【发布时间】：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呢？ （边框半径，框阴影）***.com/questions/26961221/how-to-make-an-oval-in-css

【参考方案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"   class="canvas"></canvas>