Как заполнить прямоугольник только до заданной точки с помощью Konva - PullRequest
Новая
       20

Как заполнить прямоугольник только до заданной точки с помощью Konva

0 голосов
/ 27 сентября 2018

Я использую React-Konva для визуализации.Это довольно просто, у меня есть Rect с закругленными краями (cornerRadius), и я хочу, чтобы только определенная часть его имела заливку, которая будет представлять% завершения моего проекта.Вот как это должно выглядеть.

enter image description here

У меня действительно что-то работает, но я могу добавить новый Rect, который имеет цветную заливку, и сделать его высоту представителем% завершения,Так что, если проект завершен на 100%, оба прямоугольника имеют одинаковую высоту, и он полностью синий, если завершена только половина, я делаю тот, который имеет цвет 1/2 размера основного.

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

1 Ответ

0 голосов
/ 28 сентября 2018

Ваш путь абсолютно правильный и ухоженный.Другое возможное решение - использовать fillLinearGradient: 

<Rect
  width={20}
  height={100}
  stroke="black"
  shadowBlur={5}
  cornerRadius={10}
  fillLinearGradientStartPoint={{ x: 10, y: 0 }}
  fillLinearGradientEndPoint={{ x: 10, y: 100 }}
  fillLinearGradientColorStops={[
    0,
    'white',
    0.45,
    'white',
    0.5,
    'red'
  ]}
/>

Демо: https://codesandbox.io/s/m38nvn03k8

...