网页canvas位置居中_随笔

<head>

.container{ margin:0 auto width:800px }

#scene{ border:1px solid black }

</style>

</head>

设置margin

您好！很高兴为您答疑！

多行内容居中，且容器高度可变，给出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{

padding-top: 24px

padding-bottom: 24px

}

您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

最近绘制自定义view时，用到画笔绘制文本，针对drawText的绘制做一些总结。

Canvas.drawText的方法定义如下：

其中，x坐标比较好理解，是文本起始绘制位置的x坐标。但是y是指文本绘制的baseline的y坐标。

要理解上图中的绘制效果，让我们再认识下FontMetrics类，该类是Paint的内部类。

在设置好字体尺寸后，通过Paint.getFontMetricsInt()方法来获得一个FontMetrics对象。FontMetrics定义了几个绘制时要用到的关键坐标位置，各位置含义和图示如下。注意，这四个字段的值是相对于baseline的相对值。

即已知Top值，则baseline = top - fontMetrics.top.

1、已知a段（bottom和baseline之间距离）高度：a = fontMetrics.bottom

2、计算b段（bottom和中线的距离）高度：b = (fontMetrics.bottom - fontMetrics.top)/2

3、计算c段（baseline和中线的距离）高度：c=b-a

4、计算baseline = centerY + c = centerY + b -a = centerY - (fontMetrics.bottom + fontMetrics.top) /2

实际计算时，也可以用decent和asent，即baseline = centerY - (fontMetrics.ascent + fontMetrics.descent) /2

原理和场景2一致，此时centerY=（rect.bottom+rect.top）/2。

最终baseLine = （rect.bottom+rect.top）/2 - (fontMetrics.top + fontMetrics.bottom) /2

参考文档：

Android 图解Canvas drawText文字居中的那些事

drawText方法的baseline计算

Android Canvas drawText实现中文垂直居中

欢迎分享，转载请注明来源：内存溢出

网页canvas位置居中