Question

我想实现这样的目标：

首先想到的是在画布上绘制文本两次，并用形状覆盖第一个文本。但也许有更好的解决方案。

Answer 1

你的方法对于一个纯粹的android解决方案听起来不错，但是我会在这里做一点非传统的建议你将你的UI部分变成HTML组件的web-view并使用html-css解决方案这样渲染更容易做到。不确定这是否是纯粹主义者的想法解决方案，但它听起来确实很容易。检查这个工作示例，我尝试重新创建您的UI（只需点击运行代码段，或检查最后的jsfiddle链接）：

function barWidth() {
    var barWidth = $('.progress-bar').width();
    $('.progress-fill-text').css('width',barWidth);
}
barWidth();
window.onresize = function() {
    barWidth();
}

.progress-bar {
    background:#ccc;
    color: #7d7d7d;
    padding:10px 0;
    width:100%;
    text-align:center;
    position:relative;
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
}

.progress-fill {
    background:#0095dd;
    color:#fff;
    width:47%;
    padding:10px 0;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}

.progress-fill-text {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<div class="progress-bar">
    <div class="progress-fill">
        <div class="progress-fill-text">37 UNITS</div>
    </div>
    37 UNITS
</div>

http://jsfiddle.net/zkL29/56/

Answer 2

一种方法是使用PorterDuffXfermode合成文本上的蓝色矩形。您可以扩展TextView并覆盖onDraw()以在绘制文本后绘制矩形，并使用正确的模式（我相信XOR是您想要的那个）它应该达到所需的影响。像这样：

public class ProgressTextView extends TextView {

    private static final float MAX_PROGRESS = ...;

    private Paint mPaint;

    public ProgressTextView(Context context) {
        super(context);
        initPaint();
    }

    /* other constructor omitted, but do the same pattern in those */

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setColor(...);
        mPaint.setXfermode(new PorterDuffXfermode(Mode.XOR));
        // note: you may also need the following line if hardware accel is available
        setLayerType(LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawProgress(canvas);
    }

    private void drawProgress(Canvas canvas) {
        int w = getWidth() - getPaddingLeft() - getPaddingRight();
        int h = getHeight() - getPaddingTop() - getPaddingBottom();
        float progress = getProgress();
        float rectW = w * (progress / MAX_PROGRESS);

        int saveCount = canvas.save();
        canvas.translate(getPaddingLeft(), getPaddingTop());
        canvas.drawRect(0, 0, rectW, h, mPaint);
        canvas.restoreToCount(saveCount);
    }

    private float getProgress() {
        // TODO
    }
}

有关Porter / Duff合成的更多信息：http://ssp.impulsetrain.com/porterduff.html

为信件的一部分着色的最佳方法是什么？

2 个答案: