How to fill rect only up to a given point with Konva

Question

I am using React-Konva for a vizualization. Its pretty simple, I have a Rect with rounded edges (cornerRadius) and I want only a certain portion of it to have a fill, which will represent % completion of my project. Here is what it's supposed to look like.

I actually have something working, but my way is to add a new Rect that has the color fill and make it's height representative of the % completion. So if the project is 100% complete, both rectangles are the same height and its completely blue, if only half is complete, i make the one with the color 1/2 the size of the main one.

I am sure there is a better way to do it in Konva, and therefore React-Konva. There are many fill options I can pass the Rect but none seemed to do it, it seems the documentation is poor since I'm not sure how exactly those option are supposed to function. Any ideas if I'm missing a simpler way to do it ?

lavrton lavrton · Accepted Answer · 2018-09-28T06:33:24

Your way is totally correct and well maintained. Another possible solution is to use 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'
  ]}
/>

Demo: https://codesandbox.io/s/m38nvn03k8

How to fill rect only up to a given point with Konva

1 Answers