如何只填充到带konva的给定点答案

【问题标题】：How to fill rect only up to a given point with Konva如何只填充到带konva的给定点
【发布时间】：2019-03-03 17:59:53
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html5-canvas visualization konvajs

【解决方案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

【讨论】：