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

【问题标题】：How to add border-radius to react-konva Image object?如何将边框半径添加到 react-konva Image 对象？
【发布时间】：2019-12-24 21:23:33
【问题描述】：

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

【问题讨论】：

标签： reactjs konvajs react-konva

【解决方案1】：

以this amazing comment 为参考，问题很容易解决：

  ...

  <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();
}

【讨论】：

【解决方案2】：

在舞台中剪辑您的图像：

  // image.width, image.height
  <Stage width={200} height={200} style={{borderRadius: '8px', overflow: 'hidden'}}>
    <Layer >
      <Image image={this.state.image} />
    </Layer>
  </Stage>

【讨论】：

谢谢，巴巴克！这在某些情况下可能会奏效。但是，我的 Stage 组件内还有其他几个图层，并且 Image 组件不适合整个 Stage。糟糕的是没有早点提及。