如何在 Android 中使用 Canvas.drawText 绘制跨度字符串

我想画一个SpannedString to a Canvas.

SpannableString spannableString = new SpannableString("Hello World!");
ForegroundColorSpan foregroundSpan = new ForegroundColorSpan(Color.RED);
BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(Color.YELLOW);
spannableString.setSpan(foregroundSpan, 1, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(backgroundSpan, 3, spannableString.length() - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);

上面的例子是使用TextView，这又使用Layout用跨度绘制文本。我知道using a Layout是推荐的方式 https://stackoverflow.com/a/41870464/3681880将文本绘制到画布上。但是，我正在从头开始制作自己的文本布局，因此我需要自己实现。

做这样的事情是行不通的

canvas.drawText(spannableString, 0, spannableString.length(), 0, 0, mTextPaint);

because drawText只从中获取文本spannableString，不是任何跨度。绘图颜色由单独处理TextPaint.

我该如何使用canvas.drawText (or drawTextRun）绘制跨度信息（特别是这里的前景色和背景色）？

Related

• 如何在 Android 中循环 SpannedString 或 SpannableString 中的跨度 https://stackoverflow.com/questions/43270575/how-to-loop-through-the-spans-in-a-spannedstring-or-spannablestring-in-android
• 是否可以通过调用 Canvas.drawText() 一次来显示多色文本？ https://stackoverflow.com/questions/10410515/is-it-possible-to-display-multi-color-text-with-one-call-to-canvas-drawtext

制定解决方案

我本来打算直接做自我回答，但事实证明这比我想象的要困难。所以我会先发布，然后在我能弄清楚的时候添加答案。 （我当然欢迎任何人先回答。）

以下是我迄今为止所拥有的作品：

• 将每个跨度范围绘制为单独的文本运行 https://stackoverflow.com/a/43270576/3681880
• Use drawTextRun https://developer.android.com/reference/android/graphics/Canvas.html#drawTextRun(java.lang.CharSequence,%20int,%20int,%20int,%20int,%20float,%20float,%20boolean,%20android.graphics.Paint)绘制文本 () (update：直到 API 23 才添加）
• Use getRunAdvance https://developer.android.com/reference/android/graphics/Paint.html#getRunAdvance(char%5B%5D,%20int,%20int,%20int,%20int,%20boolean,%20int)测量从哪里开始下一个文本运行（update：直到API 23才添加，使用measureText反而）
• 背景颜色可能需要单独绘制（使用drawRect或者可能drawPath? See here https://azzits.wordpress.com/tag/android-drawtext-with-background-color/, here https://stackoverflow.com/questions/8242439/how-to-draw-text-with-background-color-using-canvas, and here https://stackoverflow.com/questions/31877417/android-draw-text-with-solid-background-onto-canvas-to-be-used-as-a-bitmap.)
• 源代码为TextView https://github.com/android/platform_frameworks_base/blob/master/core/java/android/widget/TextView.java, StaticLayout https://github.com/android/platform_frameworks_base/blob/master/core/java/android/text/StaticLayout.java, and TextLine https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/text/TextLine.java

对于大多数提出这个问题的人来说，您可能应该使用StaticLayout绘制跨区文本。看这个答案 https://stackoverflow.com/a/10410843/3681880寻求帮助。

但是，如果您确实需要自己绘制跨区文本，那么您将需要循环遍历所有跨度范围 https://stackoverflow.com/a/43270576/3681880并分别绘制每一个。您还需要测量每个跨度中文本的长度，以便知道从哪里开始绘制下一个跨度。

下面的代码处理BackgroundColorSpan and ForegroundColorSpan.

// set up the spanned string
SpannableString spannableString = new SpannableString("Hello World!");
ForegroundColorSpan foregroundSpan = new ForegroundColorSpan(Color.RED);
BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(Color.YELLOW);
spannableString.setSpan(foregroundSpan, 1, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(backgroundSpan, 3, spannableString.length() - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

// draw each span one at a time
int next;
float xStart = 0;
float xEnd;
for (int i = 0; i < spannableString.length(); i = next) {

    // find the next span transition
    next = spannableString.nextSpanTransition(i, spannableString.length(), CharacterStyle.class);

    // measure the length of the span
    xEnd = xStart + mTextPaint.measureText(spannableString, i, next);

    // draw the highlight (background color) first
    BackgroundColorSpan[] bgSpans = spannableString.getSpans(i, next, BackgroundColorSpan.class);
    if (bgSpans.length > 0) {
        mHighlightPaint.setColor(bgSpans[0].getBackgroundColor());
        canvas.drawRect(xStart, mTextPaint.getFontMetrics().top, xEnd, mTextPaint.getFontMetrics().bottom, mHighlightPaint);
    }

    // draw the text with an optional foreground color
    ForegroundColorSpan[] fgSpans = spannableString.getSpans(i, next, ForegroundColorSpan.class);
    if (fgSpans.length > 0) {
        int saveColor = mTextPaint.getColor();
        mTextPaint.setColor(fgSpans[0].getForegroundColor());
        canvas.drawText(spannableString, i, next, xStart, 0, mTextPaint);
        mTextPaint.setColor(saveColor);
    } else {
        canvas.drawText(spannableString, i, next, xStart, 0, mTextPaint);
    }

    xStart = xEnd;
}

下图中最上面的字符串是用上面的代码绘制的。底部的绳子是用常规的TextView（它使用StaticLayout).