Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Draw text related: Paint related Settings, Canvas related Settings.

1.Paint text related

Correlation function

mPaint.setStrokeWidth(10); // Set the brush width mPaint. SetColor (color.blue); // Set the Paint color mPaint. SetStyle (paint.style.stroke); // Set the brush style mPaint. SetTextSize (); // Font size mPaint. SetTextAlign (); MPaint. SetShadowLayer (); / / shadow mPaint setUnderlineText (); // Whether to display the underscore mPaint. SetFakeBoldText (); //true indicates bold, false indicates normal mPaint. SetTextSkewX (); //float, set the horizontal skew of the text, negative for right, positive for left mPaint. SetTextScaleX (); // Set the scaling factor, which defaults to 1, to horizontal stretching when greater than 1, and horizontal compression when less than 1. This method is often used in the display of special fonts. mPaint.setStrikeThruText(); // Set the text delete line mPaint. SetLetterSpacing (); // Set the line spacing, default is 0. MPaint. SetTypeface (); ** mPaint. SetLinearText (); // Set whether to turn on the linear text identifier mPaint. SetHinting (); / / set the brush hidden mode mPaint. SetFontFeatureSettings (); // Set the font style, which is similar to CSS style mPaint. SetStrokeMiter (float miter); // Set the stroke gradientCopy the code

1.1 setStrokeWidth, setColor

The wider the brush, the wider the font. The color of the brush determines the color of the text.

textPaint.setStrokeWidth(7); textPaint.setColor(Color.BLUE); textPaint.setStyle(Paint.Style.STROKE); textPaint.setTextSize(100); textPaint2.setStrokeWidth(3); textPaint2.setColor(Color.BLUE); textPaint2.setStyle(Paint.Style.STROKE); textPaint2.setTextSize(100); Canvas. DrawText ("MatumbaMan's blog ", 100, 100, textPaint); Canvas. DrawText ("MatumbaMan's blog ", 100, 300, textPaint2);Copy the code

1.2 setStyle Sets the brush style

Set the brush styles: Set the Paint Style to FILL, FILL_AND_STROKE, and STROKE font effects respectively

textPaint.setStrokeWidth(3); textPaint.setColor(Color.BLUE); textPaint.setStyle(Paint.Style.STROKE); textPaint.setTextSize(100); textPaint2.setStrokeWidth(3); textPaint2.setColor(Color.BLUE); textPaint2.setStyle(Paint.Style.FILL); textPaint2.setTextSize(100); textPaint3.setStrokeWidth(3); textPaint3.setColor(Color.BLUE); textPaint3.setStyle(Paint.Style.FILL_AND_STROKE); textPaint3.setTextSize(100); Canvas. DrawText ("MatumbaMan's blog ", 100, 100, textPaint); Canvas. DrawText ("MatumbaMan's blog ", 100, 300, textPaint2); Canvas. DrawText ("MatumbaMan's blog ", 100, 500, textPaint3);Copy the code

1.3 setTextSize Sets the font size

Set different font sizes in px, convert if dp is used.

textPaint.setStrokeWidth(3); textPaint.setColor(Color.BLUE); textPaint.setStyle(Paint.Style.FILL); textPaint.setTextSize(50); textPaint2.setStrokeWidth(3); textPaint2.setColor(Color.BLUE); textPaint2.setStyle(Paint.Style.FILL); textPaint2.setTextSize(100); textPaint3.setStrokeWidth(3); textPaint3.setColor(Color.BLUE); textPaint3.setStyle(Paint.Style.FILL); textPaint3.setTextSize(200); Canvas. DrawText ("MatumbaMan's blog ", 100, 100, textPaint); Canvas. DrawText ("MatumbaMan's blog ", 100, 300, textPaint2); Canvas. DrawText ("MatumbaMan's blog ", 100, 500, textPaint3);Copy the code

1.4 setTextAlign

Set text alignment. The value can be align.CENTER, align.LEFT, or align

The alignment is based on the point at which you start drawing.

mTextPaint.setTextAlign(Paint.Align.LEFT); Canvas. DrawText ("MatumbaMan's blog ",200, 200, mTextPaint); mTextPaint.setTextAlign(Paint.Align.RIGHT); Canvas. DrawText ("MatumbaMan's blog ",200, 300, mTextPaint); mTextPaint.setTextAlign(Paint.Align.CENTER); Canvas. DrawText ("MatumbaMan's blog ",200, 400, mTextPaint);Copy the code

1.6 setShadowLayer Sets the shadow

SetShadowLayer (float RADIUS, float dx, float dy, int shadowColor) sets the shadow

Radius set Angle, dx, dy control font up, down, left and right, there are positive and negative points, dx plus or minus represents right and left, dy plus or minus represents down and up.

mTextPaint.setTextAlign(Paint.Align.LEFT); mTextPaint.setShadowLayer(10, -20, 40, Color.GRAY); Canvas. DrawText ("MatumbaMan's blog ",200, 200, mTextPaint); mTextPaint.setTextAlign(Paint.Align.RIGHT); Canvas. DrawText ("MatumbaMan's blog ",200, 300, mTextPaint); mTextPaint.setTextAlign(Paint.Align.CENTER); Canvas. DrawText ("MatumbaMan's blog ",200, 400, mTextPaint);Copy the code

1.7 Underline, bold, delete line

textPaint.setStrokeWidth(3); textPaint.setColor(Color.BLUE); textPaint.setStyle(Paint.Style.FILL); textPaint.setTextSize(50); textPaint.setUnderlineText(true); textPaint2.setStrokeWidth(3); textPaint2.setColor(Color.BLUE); textPaint2.setStyle(Paint.Style.FILL); textPaint2.setTextSize(100); textPaint2.setFakeBoldText(true); textPaint3.setStrokeWidth(3); textPaint3.setColor(Color.BLUE); textPaint3.setStyle(Paint.Style.FILL); textPaint3.setTextSize(200); textPaint3.setStrikeThruText(true); Canvas. DrawText ("MatumbaMan's blog ", 100, 100, textPaint); Canvas. DrawText ("MatumbaMan's blog ", 100, 300, textPaint2); Canvas. DrawText ("MatumbaMan's blog ", 100, 500, textPaint3);Copy the code

1.8 setTextSkewX ()

Parameter type float. Sets the horizontal slant of the text. Negative numbers are right-slant and positive numbers are left-slant. The default is 0

textPaint.setStrokeWidth(3);
textPaint.setColor(Color.BLUE);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setTextSize(50);
textPaint.setUnderlineText(true);
textPaint.setTextSkewX(-1);

textPaint2.setStrokeWidth(3);
textPaint2.setColor(Color.BLUE);
textPaint2.setStyle(Paint.Style.FILL);
textPaint2.setTextSize(50);
textPaint2.setFakeBoldText(true);
textPaint2.setTextSkewX(1);

textPaint3.setStrokeWidth(3);
textPaint3.setColor(Color.BLUE);
textPaint3.setStyle(Paint.Style.FILL);
textPaint3.setTextSize(50);
textPaint3.setStrikeThruText(true);
Copy the code

1.9 setTextScaleX ()

Set the scaling factor. Default is 1. A scaling factor greater than 1 indicates horizontal stretching and a scaling factor less than 1 indicates horizontal compression.

textPaint.setStrokeWidth(3); textPaint.setColor(Color.BLUE); textPaint.setStyle(Paint.Style.FILL); textPaint.setTextSize(50); textPaint.setTextScaleX(2); textPaint2.setStrokeWidth(3); textPaint2.setColor(Color.BLUE); textPaint2.setStyle(Paint.Style.FILL); textPaint2.setTextSize(50); textPaint2.setTextScaleX(1); textPaint3.setStrokeWidth(3); textPaint3.setColor(Color.BLUE); textPaint3.setStyle(Paint.Style.FILL); textPaint3.setTextSize(50); textPaint3.setTextScaleX(-2); DrawText ("MatumbaMan's blog ", 100, 100, textPaint); Canvas. DrawText ("MatumbaMan's blog ", 100, 300, textPaint2); Canvas. DrawText ("MatumbaMan's blog ", 100, 500, textPaint3);Copy the code

1.10 setLetterSpacing Sets the default spacing to 0, requiring minimum API21 support.

textPaint.setStrokeWidth(3); textPaint.setColor(Color.BLUE); textPaint.setStyle(Paint.Style.FILL); textPaint.setTextSize(50); TextPaint. SetLetterSpacing (0.05 f); textPaint2.setStrokeWidth(3); textPaint2.setColor(Color.BLUE); textPaint2.setStyle(Paint.Style.FILL); textPaint2.setTextSize(50); TextPaint2. SetLetterSpacing (0.5 f); textPaint3.setStrokeWidth(3); textPaint3.setColor(Color.BLUE); textPaint3.setStyle(Paint.Style.FILL); textPaint3.setTextSize(50); Canvas. DrawText ("MatumbaMan's blog ", 100, 100, textPaint); Canvas. DrawText ("MatumbaMan's blog ", 100, 300, textPaint2); Canvas. DrawText ("MatumbaMan's blog ", 100, 500, textPaint3);Copy the code

1.11setTypeface Sets text font styles

You can set existing font styles in the system or read fonts from files.

How to create TypeFace:

Create a Typeface based on the provided font name and style. If the font information obtained from the name is null, the default font is used. The style contains four styles: NORMAL, BOLD, ITALIC, and BOLD_ITALIC

Public static Typeface create(String familyName, @style int Style); Public static TypeFace create(TypeFace family, @style int Style); public static @NonNull Typeface create(@Nullable Typeface family, @IntRange(from = 1, to = 1000) int weight, boolean italic); Public static Typeface defaultFromStyle(@style int Style) {return sDefaults[Style]; }Copy the code

Read the font file and generate TypeFace

Public static TypeFace createFromAsset(AssetManager MGR, String Path); Public static Typeface createFromFile(@nullable file file);Copy the code

Typeface typeface1 = typeface.create (" boldface ", typeface.normal); Typeface typeface2 = Typeface. Create ("宋体", Typeface.ITALIC); Typeface typeface3 = Typeface.createFromAsset(getContext().getAssets(), "f.ttf"); textPaint.setStrokeWidth(3); textPaint.setColor(Color.BLUE); textPaint.setStyle(Paint.Style.FILL); textPaint.setTextSize(50); TextPaint. SetLetterSpacing (0.05 f); textPaint.setTypeface(typeface1); textPaint2.setStrokeWidth(3); textPaint2.setColor(Color.BLUE); textPaint2.setStyle(Paint.Style.FILL); textPaint2.setTextSize(50); TextPaint2. SetLetterSpacing (0.5 f); textPaint2.setTypeface(typeface2); textPaint3.setStrokeWidth(3); textPaint3.setColor(Color.BLUE); textPaint3.setStyle(Paint.Style.FILL); textPaint3.setTextSize(50); textPaint3.setTypeface(typeface3); Canvas. DrawText ("MatumbaMan's blog ", 100, 100, textPaint); Canvas. DrawText ("MatumbaMan's blog ", 100, 300, textPaint2); Canvas. DrawText ("MatumbaMan's blog ", 100, 500, textPaint3);Copy the code

2. The Canvas

2.1 Simple Functions

Public void drawText(@nonnull char[] text, int index, int count, float x, float y, @nonnull Paint Paint); Public void drawText(@nonnull String text, float x, float y, @nonnull Paint Paint); Public void drawText(@nonnull String text, int start, int end, float x, float y, @nonnull Paint Paint); Public void drawText(@nonnull CharSequence text, int start, int end, float x, float y, @nonnull Paint Paint) public void drawText(@nonnull CharSequence text, int start, int end, float x, float y, @nonnull Paint Paint);Copy the code

The easiest way to draw a text function is when you have four functions. drawText(@NonNull char[] text, int index, int count, float x, float y, @NonNull Paint paint) drawText(@NonNull String text, float x, float y,@NonNull Paint paint)

Index,count: Represents the number of count characters in the text array, starting with index. X,y: draws text at the coordinates of (x,y), where x and y are not the coordinates of the upper-left corner of the drawn text. Note: the (x,y) coordinates here are not the top-left coordinates when the text is drawn; y is the baseline

2.2 drawTextOnPath

public void drawTextOnPath(@NonNull char[] text, int index, int count, @NonNull Path path,
        float hOffset, float vOffset, @NonNull Paint paint) {
    super.drawTextOnPath(text, index, count, path, hOffset, vOffset, paint);
}

public void drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,
        float vOffset, @NonNull Paint paint) {
    super.drawTextOnPath(text, path, hOffset, vOffset, paint);
}
Copy the code

Float hOffset: indicates the horizontal offset from the path start point. Float vOffset: indicates the vertical offset from the path center

Path path = new Path(); path.addCircle(300, 300, 200, Path.Direction.CW); Path path2 = new Path(); path2.addCircle(300, 800, 200, Path.Direction.CW); Path path3 = new Path(); path3.addCircle(300, 1300, 200, Path.Direction.CW); Canvas. DrawTextOnPath ("MatumbaMan blog ", path, 0, 0, mTextPaint); Canvas. DrawTextOnPath ("MatumbaMan's blog ", path2, 50, 30, mTextPaint); Canvas. DrawTextOnPath ("MatumbaMan's blog ", path3, -50, -30, mTextPaint); canvas.drawCircle(300, 300, 200, mPaint2); canvas.drawCircle(300, 800, 200, mPaint2); canvas.drawCircle(300, 1300, 200, mPaint2);Copy the code

2.3 drawTextRun

public void drawTextRun(@NonNull char[] text, int index, int count, int contextIndex,
        int contextCount, float x, float y, boolean isRtl, @NonNull Paint paint) {
    super.drawTextRun(text, index, count, contextIndex, contextCount, x, y, isRtl, paint);
}

public void drawTextRun(@NonNull CharSequence text, int start, int end, int contextStart,
        int contextEnd, float x, float y, boolean isRtl, @NonNull Paint paint) {
    super.drawTextRun(text, start, end, contextStart, contextEnd, x, y, isRtl, paint);
}
Copy the code

Parameters: text: the text to draw start: from which word to draw end: to which word to draw end contextStart: the starting position of the context. ContextStart must be less than or equal to start contextEnd: the end position of the context. ContextEnd must be greater than or equal To end x: the coordinate To the Left of the text y: the baseline coordinate of the text isRtl: whether the text isRtl (right-to-left, right-to-left)