Question

如何绘制带有指定边界的填充矩形，并使用Canvas Android绘制该矩形文本？我试过了

mPaint.setColor(Color.GREEN);
canvas.drawText(mText, x, y, mPaint);
mPaint.setColor(Color.BLACK);
canvas.drawRect(x, y, x + w, y + h, mPaint);

但文字不在该矩形内。任何好友都可以告诉我如何在考虑文本大小的情况下绘制一个围绕指定文本的矩形吗？

Answer 1

这里我有硬编码的x和y值。你可以改变它们

        mpaint= new Paint();
        mpaint.setColor(Color.RED);
        mpaint.setStyle(Style.FILL);
        paint2= new Paint();
        paint2.setColor(Color.GREEN);
        paint2.setTextSize(50);  //set text size
        float w = paint2.measureText(s)/2;
        float textSize = paint2.getTextSize();


        @Override
        protected void onDraw(Canvas canvas) {
            paint2.setTextAlign(Paint.Align.CENTER);
            canvas.drawRect(300-w, 300 - textsize, 300 + w, 300, mpaint);
            canvas.drawText(s, 300, 300 ,paint2); //x=300,y=300    
        }

编辑：

在measureText中调用onDraw是个不错的主意。您可以在onDraw之外执行此操作。

还有关于效果的视频以及为什么要避免onDraw中的分配。 https://www.youtube.com/watch?v=HAK5acHQ53E

产生快照

enter image description here

Answer 2

对于该特定查询，这可能很晚了，但我认为许多人会发现此答案有用。因此，任何CustomView的Canvas的问题在于，您可以获取特定文本的宽度，但是获取文本的高度并不是那么容易。同样，如果您将canvas.drawText(....)与简单的 Paint 对象一起使用，则不能绘制多行文本。因此，请在您的onDraw()方法中使用以下代码。

String displayText = "Hello World";
int mainTextPositionX = getWidth() / 2 ;
int mainTextPositionY = getHeight() / 2;

StaticLayout textStaticLayout;
TextPaint textPaint;
textPaint = new TextPaint();
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setColor(Color.BLUE);
textPaint.setAntiAlias(true);
textPaint.setTextSize(convertDpToPixel(30, context));
textPaint.setTextAlign(Paint.Align.CENTER);
highlightedRectPaint = new Paint();

highlightedRectPaint.setStrokeWidth(12);
highlightedRectPaint.setStyle(Paint.Style.STROKE);
highlightedRectPaint.setColor(Color.RED);
highlightedRectPaint.setAntiAlias(true);

if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.M) {
        textStaticLayout = StaticLayout
                .Builder
                .obtain(displayText, 0, displayText.length(), textPaint, (int) textPaint.measureText(displayText))
                .build();
    }else{
        textStaticLayout = new StaticLayout(
                displayText, textPaint, (int)textPaint.measureText(displayText), Layout.Alignment.ALIGN_CENTER, 1.0f, 0.0f, false);
    }

    Rect highlightedTextBorderRect = new Rect();
    highlightedTextBorderRect.top = mainTextPositionY-20;
    highlightedTextBorderRect.left = mainTextPositionX- 
    ((int)textPaint.measureText(displayText)/2)-20;
    highlightedTextBorderRect.right = mainTextPositionX+ 
    ((int)textPaint.measureText(displayText)/2) + 20;
    highlightedTextBorderRect.bottom = mainTextPositionY+ 
    (int)textStaticLayout.getHeight()+20;

    canvas.save();
    canvas.translate(mainTextPositionX, mainTextPositionY);
    textStaticLayout.draw(canvas);
    canvas.restore();

    canvas.drawRect(highlightedTextBorderRect,highlightedRectPaint);

只需确保在draw()方法之外声明了所有对象和变量。这将在多行支持下围绕文本绘制一个矩形轮廓。如果您希望矩形具有填充，则只需使用 highlightedRectPaint 并更改setStyle(Paint.Style.FILL)。希望有帮助。

Answer 3

如果必须在文本内部居中放置文本，则可以使用此代码

    mpaint= new Paint();
    mpaint.setColor(Color.RED);
    mpaint.setStyle(Style.FILL);
    paint2= new Paint();
    paint2.setColor(Color.GREEN);
    paint2.setTextSize(50);  //set text size
    float w = paint2.measureText(s)/2;
    float textSize = paint2.getTextSize();


    @Override
    protected void onDraw(Canvas canvas) {
        paint2.setTextAlign(Paint.Align.CENTER);
        Rect rect = new Rect(300-w, 300 - textsize, 300 + w, 300);
        canvas.drawRect(rect, mpaint);
        canvas.drawText(s, rect.centerX(), rect.centerY() ,paint2); // center text inside rect
    }

使用Canvas Android在填充矩形内绘制文本

3 个答案: