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

时间:2018-05-04 05:18:12

标签: reactjs konvajs

enter image description here

嗨,

我希望我的舞台看起来像下面的图像,用户会在上面画画,我的问题是如何用React-Konva做到这一点? 我只在rect中看到了cornerRadius属性。 并且用户的行动也应该在舞台上。

提前致谢

3 个答案:

答案 0 :(得分:4)

您可以使用CSS样式执行此操作:

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

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

答案 1 :(得分:1)

CSS解决方案更简单,但如果你想用Konva做,你可以使用剪切功能。

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

答案 2 :(得分:0)

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