时间戳

首页 > 解决方案 > 有什么方法可以在 Konvajs 中制作图像吗？

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

问题描述

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

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

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

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

标签： konvajs

解决方案

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

在此处查看Konva 文档示例

如果在创建组或形状时包含剪辑函数的定义，那么重要的部分。下面的示例创建了 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);
    }
  });

对于圆角，请在此处使用工作代码片段查看类似问题的答案。

推荐阅读