如何在 React Konva 中为舞台或图层设置圆角

Question

嗨，

我希望我的舞台看起来像下图一样，用户会在上面画画，我的问题是如何使用 React-Konva 做到这一点？我只在矩形中看到了 cornerRadius 属性。用户的操作也应该在舞台上。

提前致谢

Answer 1

您可以使用 CSS 样式来做到这一点：

  <Stage width={window.innerWidth} height={window.innerHeight} style={{
    backgroundColor: 'grey',
    borderRadius: '15px',
    overflow: 'hidden'
  }}>

https://codesandbox.io/s/98on17x8xr

Answer 2

CSS 解决方案更简单，但如果您想使用 Konva 来实现，可以使用裁剪功能。

https://konvajs.github.io/docs/clipping/Clipping_Function.html

Answer 3

您可以为 Rect 对象提供 cornerRadius 键属性

如何在 React Konva 中为舞台或图层设置圆角

How to have rounded corners for stage or layers in React Konva

reactjs

konvajs