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

Question

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

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

我确信在 Konva 中有更好的方法，因此 React-Konva。有很多填充选项我可以通过 Rect 但似乎没有一个，似乎文档很差，因为我不确定这些选项应该如何起作用。如果我错过了一种更简单的方法，有什么想法吗？

标签： javascripthtml5-canvasvisualizationkonvajs

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