Как иметь закругленные углы для сцены или слоев в React Konva

Question

Привет,

Я хочу, чтобы моя сцена выглядела как на картинке ниже, и пользователь будет рисовать на ней, мой вопрос: как я могу сделать это с React-Konva? Я видел только свойство cornerRadius в прямоугольнике. А также действия пользователей должны быть в стадии.

заранее спасибо

Answer 1

Решение CSS проще, но если вы хотите сделать это с Konva, есть функция отсечения, которую вы можете использовать.

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

Answer 2

вы можете предоставить cornerRadius ключевой атрибут для объекта Rect

Answer 3

Вы можете сделать это с помощью стилей CSS:

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

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