当前位置: 首页 > 面试题库 >

如何垂直对齐文本?

微生俊名
2023-03-14
问题内容

目标:纯Canvas上的Android> = 1.6。

假设我想编写一个函数,该函数将绘制一个(宽度,高度)大的红色矩形,然后在其中绘制一个黑色的 Hello World
文本。我希望文本在视觉上位于矩形的中心。因此,让我们尝试:

void drawHelloRectangle(Canvas c, int topLeftX, 
        int topLeftY, int width, int height) {
    Paint mPaint = new Paint();
    // height of 'Hello World'; height*0.7 looks good
    int fontHeight = (int)(height*0.7);

    mPaint.setColor(COLOR_RED);
    mPaint.setStyle(Style.FILL);
    c.drawRect( topLeftX, topLeftY, topLeftX+width, topLeftY+height, mPaint);

    mPaint.setTextSize(fontHeight);
    mPaint.setColor(COLOR_BLACK);
    mPaint.setTextAlign(Align.CENTER);
    c.drawText( "Hello World", topLeftX+width/2, ????, mPaint);
}

现在,我不知道要在drawText的参数中加上标记的内容????,即我不知道如何垂直对齐文本。

就像是

???? = topLeftY + height / 2 + fontHeight / 2-fontHeight / 8;

看起来或多或少都可以,但是必须有更好的方法


问题答案:
private final Rect textBounds = new Rect(); //don't new this up in a draw method

public void drawTextCentred(Canvas canvas, Paint paint, String text, float cx, float cy){
  paint.getTextBounds(text, 0, text.length(), textBounds);
  canvas.drawText(text, cx - textBounds.exactCenterX(), cy - textBounds.exactCenterY(), paint);
}

为什么不height()/2f一样?

exactCentre()= (top + bottom) / 2f

height()/2f = (bottom - top) / 2f

top是时,这些只会产生相同的结果0。对于所有尺寸的某些字体或某些尺寸的其他字体,可能会是这种情况,但对于所有尺寸的所有字体却并非如此。



 类似资料:
  • 垂直对齐 1. grid-template-areas 属性值保持换行,并使用空格保持每列垂直对齐。 例如: .foo { grid-template-areas: "header header" "nav main" "footer ...."; } 2. grid、grid-template

  • 问题内容: 我试图找到最有效的方法来使div对齐文本。我尝试了几件事,但似乎都没有用。 问题答案: 对于CSS 2浏览器,可以使用/ 来使内容居中。 jSFiddle提供了一个示例: 可以将旧浏览器(Internet Explorer 6/7)的hack合并为样式,并用于从较新的浏览器中隐藏样式:

  • 我想使用flexbox来垂直对齐 中的一些内容,但没有取得很大的成功。 我在网上查了一下,很多教程实际上都使用了包装器div,它从父级的flex设置中获得,但我想知道是否可以去掉这个附加元素? 我选择在此实例中使用flexbox,因为列表项高度将是动态的。 null null

  • 问题内容: 我在浮动div中有一个img,但我不知道如何垂直居中。 垂直对齐:当然中间不起作用。 问题答案: 要在父元素中垂直对齐文本,并谨记的是一个内联元素等行为 类似 文本,你可以简单地设置到父元素: 。

  • 在CSS中,行框的高度总是足以容纳它包含的所有行内级框,当一个行内级框 B 的高度小于包含它的行框高度时,则由 vertical-align属性 来决定B在行框中垂直对齐的位置。因此,vertical-align属性只对行内级元素有效,对块级元素无效。并且,该属性不能被子元素继承。 在垂直对齐时,行内非替换元素的行内级框是由 line-height 的高度定义的框,即在内容区的上下各添加半行距后的

  • 问题内容: 下面的代码(也可以在JSFiddle上作为演示使用没有将文本放在中间,正如我理想中的那样。即使使用属性,我也找不到任何方法可以使文本垂直居中。我怎样才能做到这一点? 问题答案: 创建一个用于文本内容的容器,也许是。 JSFiddle