reactjs - 如何将边框半径添加到 react-konva Image 对象？

Question

我有一个Image组件react-konva并想添加border-radius: 8px. 哪种方法最简单？

标签： reactjskonvajsreact-konva

Answer 1

有这个惊人的评论作为参考，这个问题可以很容易地解决：

  ...

  <Group
    clipFunc={ctx => calcClipFunc(ctx, x, y, width, height, radius)}
  >
    <Image
      image={image}
      width={width}
      height={height}
      x={x}
      y={y}
    />
  </Group>

以及上一条评论中的calcClipFunc()功能：

function calcClipFunc(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
}