Javascript 如何用Konva填充rect直到给定点

我正在使用React Konva进行可视化。它非常简单，我有一个圆角矩形（cornerRadius），我只希望它的某一部分有一个填充，这将代表我的项目完成%。这是它应该看起来的样子

我确实有办法，但我的方法是添加一个新的矩形，它有颜色填充，并使其高度代表完成百分比。因此，如果项目是100%完成的，两个矩形都是相同的高度，它是完全蓝色的，如果只有一半是完整的，我会制作一个颜色为主矩形大小1/2的矩形

---

我相信在Konva有更好的方法来做到这一点，并因此对Konva作出反应。有许多填充选项我可以通过Rect，但似乎没有一个这样做，似乎文档很差，因为我不确定这些选项到底应该如何工作。如果我错过了一个更简单的方法，你有什么想法吗？

你的方法完全正确，而且维护得很好。另一种可能的解决方案是使用

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'
  ]}
/>

演示：