Paint, Canvas (2 ),

Paint, Canvas (2 ),
Preface

In the previous section, after learning the basic usage of Paint and Canvas, this section learns the advanced usage of Paint. Before reading the previous section, click here: Paint and Canvas (1) for learning Android_2D plotting ).

1. Draw text

During UI, text is often drawn, while Canvas is used to draw text, mainly considering the font width and height. The font width is better understood. Here we mainly consider the font height.
First look at a picture, search online:

This section describes the height of fonts in Android: top, ascent, baseLine, descent, and bottom. It is a bit similar to the exercise book we used when learning English. The font height is the distance from ascent to descent. After my tests, the background height in the built-in TextView is the distance from top to bottom. The starting coordinate point of the font is the leftmost vertex in baseLine by default. You can set the center or rightmost by calling the Paint. setTextAlign (Paint. Align align) method.
Let's first draw a correct text center effect:

Code:

Private Paint mPaint; private String mText = "Android Paint learning"; public PaintView (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle ); mPaint = new Paint (); mPaint. setColor (Color. BLACK); mPaint. setTextSize (TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_SP, 20, getResources (). getDisplayMetrics ();} public PaintView (Context context, AttributeSet attrs) {this (context, attrs, 0 ); // TODO Auto-generated constructor stub} public PaintView (Context context) {this (context, null ); // TODO Auto-generated constructor stub} @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {// get the text width int textWidth = (int) mPaint. measureText (mText); // get the text height int textHeight = (int) (mPaint. descent ()-mPaint. ascent (); // set the height and width of the View to the font height and width widthMeasureSpec = MeasureSpec. makeMeasureSpec (textWidth, MeasureSpec. EXACTLY); heightMeasureSpec = MeasureSpec. makeMeasureSpec (textHeight, MeasureSpec. EXACTLY); super. onMeasure (widthMeasureSpec, heightMeasureSpec);} @ Override protected void onDraw (Canvas canvas Canvas) {// here, a descent is subtracted from the descent, and the baseLine of the paint brush text is baseLine, canvas will be invisible at the bottom. drawText (mText, 0, getHeight ()-mPaint. descent (), mPaint );}

It is obvious that the TextView of the system is a little higher. Note that the values of top and ascent are both negative values. Therefore, when the height is obtained, the value is subtracted from ascent. To code a method with the same height as TextView:

FontMetrics fm = mPaint.getFontMetrics();int textHeight = (int) (fm.descent - fm.top+2);

Because painting does not have the top () method, we use the top attribute in FontMetrics.
Here I refer to a blog post: The study of Android font height is very detailed.

2. Paint. Cap

The Cap specifies the treatment for the beginning and ending of stroked lines and paths. The default is BUTT.

Cap is a hat that overwrites the image. In a paint brush, It is a style that specifies the edge point (the first point of the paint brush, and the last point of the paint brush.
There are three styles: BUTT, ROUND, and SQUARE.
I will draw an arc to describe the effect:

From left to right: SQUARE, ROUND, and BUTT.
Code:

        mPaint.setColor(Color.RED);        mPaint.setStrokeWidth(2);        canvas.drawLine(0, 50, getWidth(), 50, mPaint);        mPaint.setStrokeWidth(30);        mPaint.setStyle(Style.STROKE);        mPaint.setAntiAlias(true);        mPaint.setColor(Color.BLACK);        mPaint.setStrokeCap(Cap.BUTT);        canvas.drawArc(new RectF(-getWidth() + 150, -getHeight() + 150,                getWidth() - 50, getHeight() - 50), 0, 50, false, mPaint);        mPaint.setStrokeCap(Cap.ROUND);        canvas.drawArc(new RectF(-getWidth() + 100, -getHeight() + 150,                getWidth() - 100, getHeight() - 50), 0, 50, false, mPaint);        mPaint.setStrokeCap(Cap.SQUARE);        canvas.drawArc(new RectF(-getWidth() + 50, -getHeight() + 150,                getWidth() - 150, getHeight() - 50), 0, 50, false, mPaint);

3. Paint. join

The Join specifies the treatment where lines and curve segments join on a stroked path. The default is MITER.
This document is excerpted from the official document, that is, the path specifies its style when turning.
There are three styles: MITER, ROUND, and BEVEL.
Effect:

From left to right are: MITER, ROUND, BEVEL.
Code:

        mPaint.setStrokeWidth(40);        mPaint.setStyle(Style.STROKE);        mPaint.setStrokeJoin(Join.MITER);        Path path = new Path();        path.moveTo(0, 30);        path.lineTo(100, 30);        path.lineTo(100, 100);        canvas.drawPath(path, mPaint);        mPaint.setStrokeJoin(Join.ROUND);        Path path1 = new Path();        path1.moveTo(200, 30);        path1.lineTo(300, 30);        path1.lineTo(300, 100);        canvas.drawPath(path1, mPaint);        mPaint.setStrokeJoin(Join.BEVEL);        Path path2 = new Path();        path2.moveTo(400, 30);        path2.lineTo(500, 30);        path2.lineTo(500, 100);        canvas.drawPath(path2, mPaint);

4. Paint. FontMetrics

Call Paint. getFontMetrics () returns a FontMetrics object. Before calling, remember to set the font size. The object has five attributes: top, ascent, descent, bottom, and leading ). note that the first two values are negative.