如何在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对象提供sorted_team_items键属性