有什么办法可以在 Konvajs 中制作圆形图像？

Question

我有一张 Konva 图片。如何设置半径或边界半径？

在文档中，图像 class 具有宽度和高度，但我想设置半径（边框半径）。有一个圆圈 class 可以有一个图像作为背景。但是，当我使用它时，您需要为每个图像指定尺寸，以使其放大并裁剪到正确的位置。

<v-image
  :config="{
  x: 50,
  y: 50,
  image: image,
  shadowBlur: 5
  }"
/>

在图像 class 中应该有一个属性半径。就像在圈子里一样class。他们是我缺少的替代方法吗？

Answer 1

如果你想要圆角，甚至是一个完整的圆，你需要使用应用于你的组或形状的剪裁功能。

参见 Konva docs example here

重要的部分是在创建组或形状时包含剪辑函数的定义。下面的示例创建了 2 个重叠的圆圈 - 请参阅 Konva 文档了解工作代码。

  var group = new Konva.Group({
    clipFunc: function(ctx) {
      ctx.arc(250, 120, 50, 0, Math.PI * 2, false);
      ctx.arc(150, 120, 60, 0, Math.PI * 2, false);
    }
  });

对于圆角，请参阅

的答案

有什么办法可以在 Konvajs 中制作圆形图像？

Any way to make an image round in Konvajs?

konvajs