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

Question

我想画一个SpannedString到一个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 绘制的，而 TextView 又使用 Layout 绘制具有跨度的文本。我知道 using a Layout is the recommended way 绘制文本到 canvas。但是，我正在从头开始制作自己的文本布局，所以我需要自己实现它。

这样做是行不通的

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

因为 drawText 只从 spannableString 获取文本，而不是任何跨度。绘图颜色由 TextPaint.

单独处理

如何使用canvas.drawText（或drawTextRun）来绘制跨度信息（这里特别是前景色和背景色）？

相关

Is it possible to display multi-color text with one call to Canvas.drawText()?

计划解决方案

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

以下是我目前的作品：

使用drawTextRun to draw the text (examples) (更新: API 23之前没有添加)
使用getRunAdvance测量从哪里开始下一段文字运行（更新：直到API23才添加，使用measureText代替）
背景颜色可能需要单独绘制（使用 drawRect 或 drawPath？参见 here, here, and 。）
TextView, StaticLayout, and TextLine

Answer 1

对于大多数遇到这个问题的人来说，您可能应该使用 StaticLayout 来绘制跨文本。有关这方面的帮助，请参阅 this answer。

但是，如果您确实需要自己绘制跨文本，则需要并分别绘制每一个。您还需要测量每个跨度中文本的长度，以便您知道从哪里开始绘制下一个跨度。

下面的代码处理 BackgroundColorSpan 和 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）。

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

How to draw a Spanned String with Canvas.drawText in Android

android

canvas

paint

drawtext

spannable