画线
画一条直线:
canvas.drawLine(0, 0, 100, 100, paint);
画多条线:
float []pts = {0,0,100,100,200,200,300,300};
canvas.drawLines(pts, paint);// 画虚线–也通过多条线的方式
画点
画一个点:
canvas.drawPoint(500, 500, paint);
画多个点:
float []pts = {0,0,100,100,200,200,300,300};
canvas.drawPoints(pts, paint);
画矩形
RectF r = new RectF(100, 100, 400, 500);
canvas.drawRect(r, paint);
canvas.drawRect(left, top, right, bottom, paint);
画圆角矩形
RectF r = new RectF(100, 100, 200, 200);
//x-radius ,y-radius圆角的半径
canvas.drawRoundRect(r, 10, 10, paint);
画圆
canvas.drawCircle(300, 300, 200, paint);
画椭圆
RectF r = new RectF(100, 100, 300, 200);
canvas.drawOval(r, paint);
画圆弧
canvas.drawArc(
rect,
startAngle, //其实角度,相对X轴正方向
sweepAngle, //画多少角度的弧度
useCenter, //boolean, false:只有一个纯弧线;true:闭合的边
paint);
RectF r = new RectF(100, 100, 400, 400);
canvas.drawArc(r, 0, 90, true, paint);//顺时针旋转90度
true:
false:
Path
rLineTo,rMoveTo 带r开头基于前一个点的相对位置
LineTo,MovoTo 不带r开头的,传的是我们的绝对位置
Path path = new Path();
//移动
path.moveTo(100, 300);//画笔落笔的位置
//连线(100, 300)—(200, 100)
path.lineTo(200, 100);
//连线(200, 100) — (200, 200)
path.lineTo(200, 200);
//拼接
path.cubicTo(250, 200, 350, 300, 450, 400);//连接(200, 200)
//首尾相接
path.close();
canvas.drawPath(path, paint);
圆角矩形路径
RectF r = new RectF(100, 100, 200, 200);
Path path = new Path();
float radii[] = {10,10,50,50,0,0,10,10};
path.addRoundRect(r, radii, Path.Direction.CW);
canvas.drawPath(path, paint);
RectF r = new RectF(100, 100, 200, 200);
Path path = new Path();
path.addArc(r, 0, 90);
canvas.drawPath(path, paint);
贝塞尔曲线
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(4);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLACK);
mStartX = 60;
mStartY = 350;
mEndX = 450;
mEndY = 350;
mPath = new Path();
mPath.reset();
mPath.moveTo(mStartX, mStartY);
mPath.quadTo(mContorlX, mContorlY, mEndX, mEndY);
//mPath.addCircle(); 里面有一个方向值 --顺时针和逆时针
// canvas.drawTextOnPath();---可以去看一下文字的绘制方向
canvas.drawPath(mPath, mPaint);
canvas.drawPoint(mContorlX,mContorlY,mPaint);
setFillType
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(2);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setAntiAlias(true);
Path.FillType.WINDING
WINDING 模式 — 取Path所有所在的区域 – 默认的模式
private void drawWindingType(Canvas canvas) {
mPath = new Path();
mPath.offset(100,100);
mPath.addCircle(200, 200, 100, Path.Direction.CW);
mPath.addCircle(300, 300, 100, Path.Direction.CW);
mPath.setFillType(Path.FillType.WINDING);
mPaint.setColor(Color.RED);
canvas.drawPath(mPath,mPaint);
}
Path.FillType.EVEN_ODD
EVEN_ODD 模式 — 取Path所在不相交的区域
private void drawEvenOddType(Canvas canvas) {
mPath = new Path();
mPath.offset(100,100);
mPath.addCircle(200, 200, 100, Path.Direction.CW);
mPath.addCircle(300, 300, 100, Path.Direction.CW);
mPath.setFillType(Path.FillType.EVEN_ODD);
mPaint.setColor(Color.RED);
canvas.drawPath(mPath,mPaint);
}
Path.FillType.INVERSE_WINDING
INVERSE_WINDING 模式 – 取path所有未占的区域
private void drawInverseWinding(Canvas canvas) {
mPath = new Path();
mPath.offset(100,100);
mPath.addCircle(200, 200, 100, Path.Direction.CW);
mPath.addCircle(300, 300, 100, Path.Direction.CW);
mPath.setFillType(Path.FillType.INVERSE_WINDING);
mPaint.setColor(Color.RED);
canvas.drawPath(mPath,mPaint);
}
Path.FillType.INVERSE_EVEN_ODD
INVERSE_EVEN_ODD 模式 — 取path所有未占和相交的区域
private void drawInverseEvenOdd(Canvas canvas) {
mPath = new Path();
mPath.offset(100,100);
mPath.addCircle(200, 200, 100, Path.Direction.CW);
mPath.addCircle(300, 300, 100, Path.Direction.CW);
mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);
mPaint.setColor(Color.RED);
canvas.drawPath(mPath,mPaint);
}
op(Path path, Op op)
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(8);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
Path.Op.DIFFERENCE
DIFFERENCE – 减去Path2后Path1区域剩下的部分
private void drawDifferenceOp(Canvas canvas) {
Path path1 = new Path();
path1.addCircle(150, 150, 100, Path.Direction.CW);
Path path2 = new Path();
path2.addCircle(200, 200, 100, Path.Direction.CW);
path1.op(path2, Path.Op.DIFFERENCE);
canvas.drawPath(path1, mPaint);
mPaint.setColor(Color.DKGRAY);
mPaint.setStrokeWidth(2);
canvas.drawCircle(150, 150, 100,mPaint);
canvas.drawCircle(200, 200, 100,mPaint);
}
Path.Op.INTERSECT
INTERSECT — 保留Path2 和 Path1 共同的部分
private void drawIntersectOp(Canvas canvas) {
Path path1 = new Path();
path1.addCircle(150, 150, 100, Path.Direction.CW);
Path path2 = new Path();
path2.addCircle(200, 200, 100, Path.Direction.CW);
path1.op(path2, Path.Op.INTERSECT);
canvas.drawPath(path1, mPaint);
mPaint.setColor(Color.DKGRAY);
mPaint.setStrokeWidth(2);
canvas.drawCircle(150, 150, 100,mPaint);
canvas.drawCircle(200, 200, 100,mPaint);
}
Path.Op.UNION
UNION – 保留Path1 和 Path 2
private void drawUnionOp(Canvas canvas) {
Path path1 = new Path();
path1.addCircle(150, 150, 100, Path.Direction.CW);
Path path2 = new Path();
path2.addCircle(200, 200, 100, Path.Direction.CW);
path1.op(path2, Path.Op.UNION);
canvas.drawPath(path1, mPaint);
mPaint.setColor(Color.DKGRAY);
mPaint.setStrokeWidth(2);
canvas.drawCircle(150, 150, 100,mPaint);
canvas.drawCircle(200, 200, 100,mPaint);
}
Path.Op.XOR
XOR — 保留Path1 和 Path2 还有共同的部分
private void drawXorOp(Canvas canvas) {
Path path1 = new Path();
path1.addCircle(150, 150, 100, Path.Direction.CW);
Path path2 = new Path();
path2.addCircle(200, 200, 100, Path.Direction.CW);
path1.op(path2, Path.Op.XOR);
canvas.drawPath(path1, mPaint);
mPaint.setColor(Color.DKGRAY);
mPaint.setStrokeWidth(2);
canvas.drawCircle(150, 150, 100,mPaint);
canvas.drawCircle(200, 200, 100,mPaint);
}
Path.Op.REVERSE_DIFFERENCE
REVERSE_DIFFERENCE — 减去Path1后Path2区域剩下的部分
private void drawReverseDifferenceOp(Canvas canvas) {
Path path1 = new Path();
path1.addCircle(150, 150, 100, Path.Direction.CW);
Path path2 = new Path();
path2.addCircle(200, 200, 100, Path.Direction.CW);
path1.op(path2, Path.Op.REVERSE_DIFFERENCE);
canvas.drawPath(path1, mPaint);
mPaint.setColor(Color.DKGRAY);
mPaint.setStrokeWidth(2);
canvas.drawCircle(150, 150, 100,mPaint);
canvas.drawCircle(200, 200, 100,mPaint);
}
Region
RectF r = new RectF(100, 100, 200, 300);
Path path = new Path();
path.addOval(r, Path.Direction.CCW);
//创建一块矩形的区域
Region region = new Region(100, 100, 200, 250);
Region region1 = new Region();
region1.setPath(path, region);//path的椭圆区域和矩形区域进行交集
//结合区域迭代器使用(得到图形里面的所有的矩形区域)
RegionIterator iterator = new RegionIterator(region1);
Rect rect = new Rect();
while (iterator.next(rect)) {
canvas.drawRect(rect, paint);
}
合并union:
//合并
Region region = new Region(50, 50, 100, 250);
Rect r = new Rect(30, 30, 200, 100);
// canvas.drawRect(r, paint);
// paint.setColor(Color.BLUE);
region.union(r);
// region.op(r, Region.Op.INTERSECT);//交集部分 region是调用者A,r是求交集的B
RegionIterator iterator = new RegionIterator(region);
Rect rect = new Rect();
while (iterator.next(rect)) {
canvas.drawRect(rect, paint);
}
求交集:
Region region = new Region(50, 50, 100, 250);
Rect r = new Rect(30, 30, 200, 100);
// canvas.drawRect(r, paint);
// paint.setColor(Color.BLUE);
// region.union(r);
region.op(r, Region.Op.INTERSECT);//交集部分 region是调用者A,r是求交集的B
RegionIterator iterator = new RegionIterator(region);
Rect rect = new Rect();
while (iterator.next(rect)) {
canvas.drawRect(rect, paint);
}
Canvas变换
平移
canvas.translate(150, 50);
// 绘制坐标系
// 第一次绘制坐标轴
paint.setColor(Color.GREEN);
canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴
paint.setColor(Color.BLUE);
canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴
//平移--即改变坐标原点
canvas.translate(150, 50);
// 第二次绘制坐标轴
paint.setColor(Color.GREEN);
canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴
paint.setColor(Color.BLUE);
canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴
缩放
//sx,sy:分别对x/y方向的一个缩放系数,画布的缩放会导致里面所有的绘制的东西都会有一个缩放效果
canvas.scale(1.5f, 0.5f);
RectF r = new RectF(0, 0, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
//sx,sy:分别对x/y方向的一个缩放系数,画布的缩放会导致里面所有的绘制的东西都会有一个缩放效果
canvas.scale(1.5f, 0.5f);
canvas.drawRect(r, paint);
旋转
canvas.rotate(30);
// 绘制坐标系
// 第一次绘制坐标轴
paint.setColor(Color.GREEN);
canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴
paint.setColor(Color.BLUE);
canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴
//旋转
canvas.rotate(30);
// 第二次绘制坐标轴
paint.setColor(Color.GREEN);
canvas.drawLine(0,0,canvas.getWidth(),0,paint);// X 轴
paint.setColor(Color.BLUE);
canvas.drawLine(0,0,0,canvas.getHeight(),paint);// Y 轴
斜拉
//sx,sy倾斜度:X轴方向上倾斜60度,tan60=根号3
canvas.skew(1.73f, 0);
RectF r = new RectF(100, 100, 200, 200);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
//sx,sy倾斜度:X轴方向上倾斜60度,tan60=根号3
canvas.skew(1.73f, 0);
canvas.drawRect(r, paint);
裁剪
canvas.clipRect(new Rect(250, 250, 300, 400));
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.drawBitmap(mBitmap, 250, 250, paint);
paint.setColor(Color.GREEN);
save和restore、restoreToCount
private void saveRestore(Canvas canvas, Paint paint) {
canvas.translate(50, 50);
RectF r = new RectF(0, 0, 200, 100);
paint.setColor(Color.GREEN);
canvas.drawRect(r, paint);
canvas.save();
//平移
canvas.translate(50, 50);
paint.setColor(Color.BLUE);
canvas.drawRect(r, paint);
canvas.restore();
//canvas.rotate(45);
paint.setColor(Color.YELLOW);
r = new RectF(0, 0, 100, 200);
canvas.drawRect(r, paint);
}
Paint paint = new Paint();
RectF r = new RectF(50, 50, 150, 150);
//当canvas执行saveLayer的时候就会新建一个新的透明画布图层
int layer = canvas.saveLayer(0,0,canvas.getWidth(),canvas.getHeight(),null,Canvas.ALL_SAVE_FLAG);
canvas.drawColor(Color.YELLOW);
canvas.translate(50, 50);
paint.setColor(Color.BLUE);
canvas.drawRect(r, paint);
canvas.restoreToCount(layer);
RectF rectF = new RectF(0,0,100,100);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);
paint.setColor(Color.GREEN);
canvas.drawRect(rectF, paint);
canvas.translate(50,50);
Paint paint = new Paint();
RectF rectF = new RectF(0,0,100,100);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);
paint.setColor(Color.GREEN);
canvas.drawRect(rectF, paint);
canvas.translate(50,50);
int layerid = canvas.saveLayer(0,0,canvas.getWidth(),canvas.getHeight(),null,Canvas.ALL_SAVE_FLAG);
//canvas.save();
canvas.drawColor(Color.BLUE);// 通过drawColor可以发现saveLayer是新建了一个图层,
// 同时结合Lsn5的16种Xfermode叠加形式Demo可以验证是新建的透明图层
paint.setColor(Color.YELLOW);
canvas.drawRect(rectF,paint);
// canvas.restore();
canvas.restoreToCount(layerid);
RectF rectF1 = new RectF(10,10,300,400);
paint.setColor(Color.RED);
canvas.drawRect(rectF1,paint);
//save restoreToCount
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
Paint mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(10);
canvas.save();//1
canvas.translate(200, 200);
mPaint.setColor(Color.RED);
RectF rectF = new RectF(0,0,200,200);
canvas.drawRect(rectF,mPaint);
canvas.save();//2
canvas.rotate(45);
mPaint.setColor(Color.BLUE);
canvas.drawRect(rectF,mPaint);
canvas.save();//3
canvas.rotate(45);
mPaint.setColor(Color.YELLOW);
canvas.drawRect(rectF,mPaint);
canvas.save();//4
canvas.restoreToCount(1);
canvas.translate(20, 100);
mPaint.setColor(Color.GREEN);
canvas.drawRect(rectF,mPaint);