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

введите описание изображения здесь

Hi ,

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

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


reactjs konvajs
person Roshan Fernando    schedule 04.05.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

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

person lavrton    schedule 04.05.2018
comment
Большое спасибо, мне нужно еще кое-что. Мне также нужно, чтобы пользователи не пересекали границу .. Я пропустил эту часть вопроса, я обновлю ее - person Roshan Fernando; 04.05.2018

arrow_upward
1
arrow_downward

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

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

person Timothy Ryan    schedule 01.06.2018

arrow_upward
1
arrow_downward

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

person Elias Debs    schedule 07.05.2019