根据背景反转油漆颜色

问题描述

我正在编写一个自定义进度栏.我想创建类似于

I am writing a custom progress bar. I would like to create an effect similar to

，其中"50％"文本颜色会动态更改为白色，而黑条向右移动.使用简单"的解决方案有可能吗?我查了一下PorterDuff，ColorFilters，xFermodes，似乎什么也没用.有任何想法吗?ATM我的代码看起来像这样:

where the "50%" text color changes dynamically to white while the black bar progresses right. Is that possible using "simple" solutions? I looked up PorterDuff, ColorFilters, xFermodes, nothing seems to work. Any ideas? ATM my code looks sth like this:

    Rect r = new Rect(1, 1, m_width-1, m_height-1);
    canvas.drawRect(r, pWhiteFill);
    r = new Rect(1, 1, progressWidth, m_height-1);
    canvas.drawRect(r, pBlackFill);
    canvas.drawText(String.valueOf(progress)+"%", m_width/2, m_height/2, pBlackTxtM);

有没有一种方法可以修改 pBlackTxtM 绘画以根据在画布上"下方绘制的内容来更改颜色?

Is there a way to modify pBlackTxtM paint to change color based on whats drawn below it 'on the canvas'?

推荐答案

即使问题已经很老了，我也希望分享解决方案.

Even if the question is quite old I'd like to share the solution to this.

您不能使用反转"的 Paint 来做到这一点，但是您可以使用裁剪来实现.

You can't do this using an "inverting" Paint, but you can achieve it using clipping.

想法是绘制文本两次，一次是黑色，一次是白色，同时设置剪切区域以匹配条形的各个部分.

The idea is to draw the text twice, once in black and once in white color, while setting the clipping region to match respective part of the bar.

这里有一些代码概述了这个想法:

Here is some code to outline the idea:

// store the state of the canvas, so we can restore any previous clipping
canvas.save();

// note that it's a bad idea to create the Rect during the drawing operation, better do that only once in advance
// also note that it might be sufficient and faster to draw only the white part of the bar
Rect r = new Rect(1, 1, m_width-1, m_height-1);
canvas.drawRect(r, pWhiteFill);

// this Rect should be created when the progress is set, not on every drawing operation
Rect r_black = new Rect(1, 1, progressWidth, m_height-1);
canvas.drawRect(r_black, pBlackFill);

// set the clipping region to the black part of the bar and draw the text using white ink
String text = String.valueOf(progress)+"%";
canvas.cliprect(r_black);
canvas.drawText(text, m_width/2, m_height/2, pWhiteTxtM);

// draw the same text again using black ink, setting the clipping region to the complementary part of the bar
canvas.clipRect(r, Region.Op.XOR);
canvas.drawText(text, m_width/2, m_height/2, pBlackTxtM);

canvas.restore();

这篇关于根据背景反转油漆颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！