Question

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

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

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

在Image类中，应该有一个Radius属性。就像在圈子课上一样。他们是我所缺少的替代方法吗？

Answer 1

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

请参见Konva docs example here

重要的部分，如果要在创建组或形状时包括剪辑功能的定义。下面的示例创建了两个重叠的圆圈-有关工作代码，请参见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);
    }
  });

有关圆角，请参见similar question with a working code snippet here.的答案

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

1 个答案: