用两种不同颜色的文本填充形状

Question

我试图实现这一点，但我只能实现填充对象（形状）。我的要求是更改文本颜色以及形状填充。

形状可以用百分比填充，比如 till
10% 到 50% = 绿色
51% 到 80% = 黄色
81% 到 100% = 红色

当黄色填充“:”形状的背景时，它会改变颜色为“白色”，之前是“黄色”。这个形状的大小也是动态的。

我的努力和收获是什么？

我可以用百分比填充形状，但是当它到达文本边缘时无法改变颜色。

Answer 1

我写了一个自定义视图。您可以使用 Path APIs 获得这种双色效果。但是为了 Android 1+ 兼容性，你应该使用 Region API 和更高版本的 Kitkat (19+) 你可以只使用 Path API.

让我们逐步了解如何实现此效果的概念：

我们需要绘制三种形状 - 轮廓圆角描边 + 橙色进度条 + 文本本身
我们照原样画笔画
但是对于Progress bar，我们需要去掉与其相交的文字，基本上让文字相交处透明。（差异）
同样对于进度条，我们必须只显示与外部圆形笔画路径相交的矩形部分。（交叉点）
同样，对于文本，我们在左侧基本上砍掉了与进度条相交的部分。我们只显示橙色文本的右侧。（再次出现差异）

如果您使用的是 API 19+，关键代码片段如下所示：

croppedProgressPath.op(progressPath, textPath, Path.Op.DIFFERENCE);
croppedProgressPath.op(progressStrokePath, Path.Op.INTERSECT);
————————————
croppedTextPath.op(textPath, progressPath, Path.Op.DIFFERENCE);

行here and here.

我在 Github 上为这个名为 Diffre 的项目编写了概念证明。如果您想先测试一下，所有代码都在 this repo.

中

用两种不同颜色的文本填充形状

Fill shape with text with two different color

android

background

shape

textcolor