1.Canvas is basically drawn
1.1drawLine Draw a line
public class MyView extends View {
public MyView(Context context) {
super(context);
}
public MyView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
/** *Paint is best drawn in the structure * create */ here
//Paint paint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Draw a line
/** * Paint is best drawn in a structure * to avoid duplicate drawing in onDraw */
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL);
paint.setStrokeWidth(5);
canvas.drawLine(0.0.300.300, paint); }}Copy the code
1.2drawLines Draw a dotted line
**
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL);
paint.setStrokeWidth(5);
//canvas.drawLine(0, 0, 300, 300, paint);
float[] pts = {0.0.100.100.200.200.300.300};
canvas.drawLines(pts,paint);
Copy the code1.3 drawPoints plot points
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL);
paint.setStrokeWidth(10);
//canvas.drawLine(0, 0, 300, 300, paint);
float[] pts = {0.0.100.100.200.200.300.300};
//canvas.drawLines(pts,paint);
canvas.drawPoints(pts,paint);
Copy the code
1.4drawRect Draws a rectangle
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL);
paint.setStrokeWidth(10);
RectF rectF = new RectF(100.100.400.500);
canvas.drawRect(rectF,paint);
Copy the code
1.5drawRoundRect Draws rounded rectangles
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL);
paint.setStrokeWidth(10);
RectF rectF = new RectF(100.100.400.500);
/** * x-radius, y-radius Radius of the corner * Radius 30 */
canvas.drawRoundRect(rectF,30.30,paint);
Copy the code
1.6drawCircle Draws a circle
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL);
paint.setStrokeWidth(10);
/ * * *@paramCx center x star@paramThe y coordinate of the center of cy star@paramRadius Radius of the dot *@param paint The paint used to draw the circle
*/
canvas.drawCircle(200.200.100,paint);
Copy the code
1.7drawOval draws ellipses
Paint paint = new Paint();
paint.setColor(Color.RED);
/** * set the hollow circle */
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
RectF rectF = new RectF(100.100.400.500);
canvas.drawRect(rectF,paint);
paint.setColor(Color.GREEN);
/**
* 默认内切圆
*/
canvas.drawOval(rectF,paint);
Copy the code
1.8drawArc draws arcs
Paint paint = new Paint();
paint.setColor(Color.RED);
/** * set the hollow circle */
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
RectF rectF = new RectF(100.100.400.500);
canvas.drawRect(rectF, paint);
paint.setColor(Color.GREEN);
/ * * *@param oval The bounds of oval used to define the shape and size of the arc
* @paramStartAngle specifies the startAngle relative to the X axis *@paramSweepAngle How many radians to draw *@paramUseCenter Boolean, false: Only one pure curve true: closed edge *@param paint The paint used to draw the arc
*/
canvas.drawArc(rectF,0.90.true,paint);
Copy the code
1.9drawPath Indicates the path to be drawn
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
Path path = new Path();
path.moveTo(100.100);// Where the brush ends
/ / move
path.lineTo(200.100);
path.lineTo(200.200);
canvas.drawPath(path, paint);
// Rounded rectangle path
Path path2 = new Path();
path2.moveTo(300.100);// Where the brush ends
/ / move
path2.lineTo(400.100);
path2.lineTo(400.200);
// Automatically close
path2.close();
canvas.drawPath(path2, paint);
Copy the code
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
Path path = new Path();
RectF rectF = new RectF(100.100.400.500);
// Rounded rectangle path
float radius[] ={10.10.10.10.10.10.90.90};
path.addRoundRect(rectF,radius,Direction.CCW);
canvas.drawPath(path,paint);
Copy the code
1.10 Use of RegionIterator
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
RectF rectF = new RectF(100.100.400.500);
Region region = new Region(100.100.200.200);
Path path = new Path();
path.addOval(rectF,Direction.CCW);
Region region1 = new Region();
// The result of the intersection of the rectangle and ellipse of path
region1.setPath(path,region);
// Create a rectangular area
// Combine with the use of field iterators
RegionIterator iterator = new RegionIterator(region1);
Rect rect = new Rect();
while (iterator.next(rect)) {
canvas.drawRect(rect, paint);
}
Copy the code
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(1);
RectF rectF = new RectF(100.100.400.500);
Region region = new Region(100.100.400.500);
Path path = new Path();
path.addOval(rectF,Direction.CCW);
Region region1 = new Region();
// The result of the intersection of the rectangle and ellipse of path
region1.setPath(path,region);
// Create a rectangular area
// Combine with the use of field iterators
RegionIterator iterator = new RegionIterator(region1);
Rect rect = new Rect();
while (iterator.next(rect)) {
canvas.drawRect(rect, paint);
}
Copy the code
Note: Gray is the reason for the screenshot
2.Canvas transformation skills
2.1 translate translation
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
RectF rectF = new RectF(100.100.400.500);
canvas.drawRect(rectF, paint);
paint.setColor(Color.BLUE);
// Pan the canvas
canvas.translate(50.50);
// When canvas drawXXX is executed, a new canvas is created, but the pan is still used. Irreversible. (Save and restore)
canvas.drawRect(rectF, paint);
Copy the code
2.2 scale zooming
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
RectF r = new RectF(0.0.400.500);
canvas.drawRect(r,paint);
paint.setColor(Color.BLUE);
/** ** sx,sy: a scaling factor for x/y directions * if the canvas is scaled, all the objects drawn inside will have a scaling effect */
canvas.scale(1.5 f.0.5 f);
canvas.drawRect(r,paint);
Copy the code
2.3 rotate rotating
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
RectF rectF = new RectF(200.200.400.500);
canvas.drawRect(rectF, paint);
paint.setColor(Color.BLUE);
/ * * * canvas. Rotate (45200, 200); * Rotation at (200,200) */
canvas.rotate(45.200.200);
canvas.drawRect(rectF, paint);
Copy the code
2.4 Skew Canvas
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
RectF r = new RectF(100.100.400.500);
canvas.drawRect(r,paint);
paint.setColor(Color.BLUE);
//sx,sy inclination: 60 degrees in X direction, tan60= square root of 3
canvas.skew(1.73 f.0);
canvas.drawRect(r,paint);
Copy the code
2.5 clipRect cutting
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(15);
RectF r = new RectF(200.200.400.500);
canvas.drawRect(r,paint);
paint.setColor(Color.BLUE);
canvas.clipRect(new Rect(250.250.300.400));
canvas.drawColor(Color.GREEN);
Copy the code