使用Canvas Android在一个填充的矩形内绘制文本。

6 浏览
0 Comments

使用Canvas Android在一个填充的矩形内绘制文本。

如何使用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);

但文本不在矩形内部。有没有人可以告诉我如何绘制一个围绕指定文本的矩形,并考虑文本大小?

0
0 Comments

在Android开发中,有时候需要在一个填充了颜色的矩形中绘制文本。然而,如果不采取特殊的措施,文本可能无法居中显示在矩形中。

解决方法是使用Canvas类的drawText()方法和Rect类的centerX()和centerY()方法来实现文本的居中显示。具体实现步骤如下:

1. 首先,创建一个Paint对象mpaint,并设置其颜色为红色,样式为填充。

2. 创建另一个Paint对象paint2,并设置其颜色为绿色,字体大小为50。

3. 使用paint2.measureText()方法获取文本的宽度,并除以2得到文本宽度的一半,赋值给变量w。

4. 使用paint2.getTextSize()方法获取文本的字体大小,赋值给变量textSize。

5. 在onDraw()方法中,设置paint2的文本对齐方式为居中。

6. 创建一个Rect对象rect,并设置其左上角的坐标为(300-w, 300-textSize),右下角的坐标为(300+w, 300)。

7. 使用Canvas的drawRect()方法绘制填充了颜色的矩形,颜色由mpaint指定。

8. 使用Canvas的drawText()方法绘制文本,文本内容为变量s,位置为rect的中心点,字体样式由paint2指定。

通过以上步骤,就可以在一个填充了颜色的矩形中居中显示文本了。

以下是完整的代码示例:

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();
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
}

以上就是在Android中在一个填充了颜色的矩形中居中显示文本的方法。

0
0 Comments

问题的原因是Canvas在CustomView中无法直接获取文本的高度,同时使用canvas.drawText()方法无法绘制多行文本。解决方法是使用StaticLayout类来获取文本的高度,并通过绘制矩形来实现文本的背景填充。

具体的解决方法如下:

1. 在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);

2. 确保在draw()方法之外声明所有的对象和变量。

通过以上步骤,可以实现在填充的矩形内绘制文本,并支持多行文本。如果需要填充矩形的背景,可以使用highlightedRectPaint对象并调用setStyle(Paint.Style.FILL)方法进行设置。

希望这对您有所帮助。

0
0 Comments

问题:如何在Android的Canvas中绘制一个填充的矩形内的文本?

在给出的代码中,作者使用Canvas和Paint类来绘制一个填充的矩形,并在矩形内部绘制了文本。但是,绘制出来的矩形存在一些问题,包括:

1. 文本在矩形中的位置不正确。作者在代码中硬编码了文本的位置,导致文本不居中显示。

2. 矩形中存在空白区域。这是因为drawText方法默认使用一些顶部内边距,导致矩形的高度大于文本的高度。

3. measureText方法在onDraw方法中被调用了两次,这会影响性能。

4. 如果文本的大小大于300,文本会从左边被裁剪。

为了解决这些问题,可以采取以下方法:

1. 不要在onDraw方法中调用measureText方法,可以在onCreate或其他地方提前计算好文本的宽度,然后在onDraw方法中使用。

2. 使用getTextBounds方法来测量文本的高度和宽度,然后根据测量结果来绘制矩形。

3. 调整矩形的位置和大小,使其与文本完全覆盖。可以根据文本的大小和长度来计算矩形的位置和大小。

4. 避免在onDraw方法中进行内存分配,以提高性能。

参考链接:https://www.youtube.com/watch?v=HAK5acHQ53E

在这个链接中有一个关于性能的视频,解释了为什么要避免在onDraw方法中进行内存分配。

最终的效果如下图所示:

enter image description here

通过对给出代码进行分析,我们发现了绘制填充矩形内的文本的问题,并提出了解决方案。通过优化代码,我们可以得到正确的效果,并提高性能。

0