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

Question

嗨，

我希望我的舞台看起来像下面的图像，用户可以在上面绘画，我的问题是如何使用React-Konva做到这一点？ 我只在rect中看到了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键属性