如何使用Konva仅将矩形填充到给定点

Question

我正在使用React-Konva进行虚拟化。它非常简单，我有一个带有圆角边缘的Rect（cornerRadius），我只希望其中的某个部分具有填充，这将表示我的项目完成的百分比。这就是它的外观。

我实际上有一些工作，但是我的方法是添加一个具有颜色填充的新Rect，并使其高度代表完成百分比。因此，如果项目100％完成，则两个矩形都具有相同的高度，并且全部为蓝色，如果只有一半完成，则我将其颜色设置为主要矩形大小的1/2。

我确信在Konva中有更好的方法，因此在React-Konva中也可以。我可以通过Rect有很多填充选项，但似乎都没有通过，似乎文档很差，因为我不确定这些选项的功能究竟如何。任何想法，如果我错过了一种更简单的方法呢？

Answer 1

您的方法是完全正确的，并且维护得很好。另一种可能的解决方案是使用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