有什么方法可以在 Konvajs 中制作图像吗？答案

【问题标题】：Any way to make an image round in Konvajs?有什么方法可以在 Konvajs 中制作图像吗？
【发布时间】：2019-10-01 19:22:21
【问题描述】：

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

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

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

在 Image 类中应该有一个属性 Radius。就像在圆圈课上一样。他们是我想念的另一种方法吗？

【问题讨论】：

标签： konvajs

【解决方案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);
    }
  });

对于圆角，请参阅similar question with a working code snippet here. 的答案

【讨论】：

我看到你在使用 Vue。我链接到的上一个问题中的链接和 sn-ps 是纯 JavaScript，因此您需要将答案解释为 Vue。您需要将 clipfunc 添加到您的图像形状对象中，如果您的画布很简单，您也许可以摆脱它。如果您需要形状对象的组合，那么您需要研究组对象并添加形状。将剪辑函数放在组上。