如何在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鍵屬性