8.3.1 Detailed Explanation of Three Drawing Tool Classes
Category Android Basic Tutorial
Introduction to This Section:
>
In the previous two sections, we studied Drawable and Bitmap, which are both about loading images, and in this section, we are going to learn about some drawing-related APIs, namely Canvas, Paint, and Path. This section is very important and also the foundation for our custom Views. Alright, without further ado, let's start the content of this section.
Official API documentation: Canvas; Paint; Path;
1. Detailed Explanation of Related Methods
1) Paint (Brush):
>
It is a brush used to set the drawing style, such as line width (stroke thickness), color, transparency, and fill style, etc. You can create an instance of Paint directly with a no-argument constructor: Paint paint = new Paint( );
We can set the relevant attributes of Paint (brush) through the following methods, in addition, there are two types of attributes, related to graphic drawing and text drawing:
setARGB (int a, int r, int g, int b): Sets the color for drawing, a represents transparency, r, g, b represent color values.
setAlpha (int a): Sets the transparency of the drawing.
setColor (int color): Sets the color for drawing, represented by a color value, which includes transparency and RGB colors.
setAntiAlias (boolean aa): Sets whether to use anti-aliasing, which consumes more resources and slows down the drawing speed.
setDither (boolean dither): Sets whether to use image dithering, which makes the colors of the drawn picture smoother and fuller, and the image clearer.
setFilterBitmap (boolean filter): If this item is set to true, the optimization operation of the Bitmap image will be filtered during the animation, and the display speed will be increased. This setting depends on the dither and xfermode settings.
setMaskFilter (MaskFilter maskfilter): Sets the MaskFilter, which can achieve filter effects such as blurring and three-dimensional effects with different MaskFilters.
setColorFilter (ColorFilter colorfilter): Sets the color filter, which can achieve different color transformation effects when drawing colors.
setPathEffect (PathEffect effect): Sets the effect of the drawing path, such as dotted lines, etc.
setShader (Shader shader): Sets the image effect, and various gradient effects can be drawn using Shader.
setShadowLayer (float radius, float dx, float dy, int color): Sets a shadow layer below the graphic to create a shadow effect, radius is the angle of the shadow, dx and dy are the distances of the shadow on the x-axis and y-axis, and color is the color of the shadow.
setStyle (Paint.Style style): Sets the style of the brush, which can be FILL, FILL_OR_STROKE, or STROKE.
setStrokeCap (Paint.Cap cap): When the brush style is STROKE or FILL_OR_STROKE, sets the shape style of the brush, such as round Cap.ROUND or square style Cap.SQUARE.
setStrokeJoin (Paint.Join join): Sets the way in which the shapes are joined during drawing, such as smooth effects.
setStrokeWidth (float width): When the brush style is STROKE or FILL_OR_STROKE, sets the thickness of the brush.
setXfermode (Xfermode xfermode): Sets the way in which graphics are processed when they overlap, such as merging, taking intersections or unions, often used to create eraser effects.
setFakeBoldText (boolean fakeBoldText): Simulates bold text, which will look very poor when set on small fonts.
setSubpixelText (boolean subpixelText): Setting this to true will help with the display effect of text on LCD screens.
setTextAlign (Paint.Align align): Sets the alignment direction for drawing text.
setTextScaleX (float scaleX): Sets the scaling ratio of the x-axis when drawing text, which can achieve the effect of stretching text.
setTextSize (float textSize): Sets the font size for drawing text.
setTextSkewX (float skewX): Sets italic text, skewX is the tilt
addRect (RectF rect, Path.Direction dir): Adds a rectangular area
addRoundRect (RectF rect, float[] radii, Path.Direction dir): Adds a rounded rectangular area
isEmpty (): Checks if the path is empty
transform (Matrix matrix): Applies a matrix transformation
transform (Matrix matrix, Path dst): Applies a matrix transformation and puts the result into a new path, i.e., the second parameter.
For more advanced effects, you can use the PathEffect class!
Several To:
moveTo (float x, float y): Does not draw, only used to move the pen
lineTo (float x, float y): Used for straight line drawing, starts drawing by default from (0, 0), use moveTo to move! For example: mPath.lineTo(300, 300); canvas.drawPath(mPath, mPaint);
quadTo (float x1, float y1, float x2, float y2): Used for drawing smooth curves, that is, quadratic Bezier curves, which can also be used in combination with moveTo!
rCubicTo (float x1, float y1, float x2, float y2, float x3, float y3) Also used to implement Bezier curves. (x1,y1) are control points, (x2,y2) are control points, and (x3,y3) is the endpoint. Same as cubicTo, but the coordinates are considered relative to the current point on this contour. It's just an extra control point~ Draw the above curve: mPath.moveTo(100, 500); mPath.cubicTo(100, 500, 300, 100, 600, 500); If you don't add the above moveTo: then draw a Bezier curve starting from (0,0) with (100,500) and (300,100) as control points
arcTo (RectF oval, float startAngle, float sweepAngle): Draws an arc (actually a part of a circle or ellipse) ovalRectF is the rectangle of the ellipse, startAngle is the starting angle, sweepAngle is the ending angle.
2. Try it yourself:
>
There are so many properties, we definitely need to try them out to deepen our impression, right~ Hehe, drawing can either be done on a View or a SurfaceView, let's draw on a View here, We define a View class, and then complete the drawing work in onDraw().
/**
* Created by Jay on 2015/10/15 0015.
*/
public class MyView extends View{
private Paint mPaint;
public MyView(Context context) {
super(context);
init();
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
mPaint = new Paint();
mPaint.setAntiAlias(true); //Anti-aliasing
mPaint.setColor(getResources().getColor(R.color.puple));//Brush color
mPaint.setStyle(Paint.Style.FILL); //Brush style
mPaint.setTextSize(36); //Text size for drawing, unit px
mPaint.setStrokeWidth(5); //Brush thickness
}
//Override this method to draw here
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
Then set this View in the layout, the following code is all written in onDrawable~
1) Set canvas color:
canvas.drawColor(getResources().getColor(R.color.yellow)); //Set canvas background color
2) Draw a circle:
canvas.drawCircle(200, 200, 100, mPaint); //Draw a solid circle
3) Draw a rectangle:
canvas.drawRect(0, 0, 200, 100, mPaint); //Draw a rectangle
4) Draw a Bitmap:
canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher), 0, 0, mPaint);
5) Draw an arc area:
canvas.drawArc(new RectF(0, 0, 100, 100),0,90,true,mPaint); //Draw an arc area
If true is changed to false:
6) Draw a rounded rectangle
``` canvas.drawRoundRect(new RectF
1.8 Project-Related Analysis (Various Files, Resource Access)
[2.6.2 Menu]
6.3.1 Data Storage and Access - An Introduction to SQLite Database
6.3.2 Data Storage and Access - Another Look at SQLite Database
7.1.1 What to Learn in Android Network Programming and Study of Http Protocol
8.3.1 Detailed Explanation of Three Drawing Tool Classes
8.3.4 Paint API - Xfermode and PorterDuff Detailed Explanation (I)
8.3.5 Paint API - Xfermode and PorterDuff Detailed Explanation (II)
8.3.6 Paint API - Xfermode and PorterDuff Detailed Explanation (III)
8.3.7 Paint API - Xfermode and PorterDuff Detailed Explanation (IV)
8.3.8 Paint API - Xfermode and PorterDuff Detailed Explanation (V)
[8.3.14 Several Enum/Constant Values of