Android高级UI开发（四十五）Canvas Path
【摘要】 1. Path概念
用Path定义一个图形，然后用canvas.drawPath(...)函数来绘制这个图形。例如绘制一个圆。Path可以绘制各种图形，如二次，三次贝塞尔曲线，圆形、多边形，三角形，五角星等几何形状。
public class PathOpView extends View { private Paint mPaint; public PathOpVi...
1. Path概念
用Path定义一个图形，然后用canvas.drawPath(...)函数来绘制这个图形。例如绘制一个圆。Path可以绘制各种图形，如二次，三次贝塞尔曲线，圆形、多边形，三角形，五角星等几何形状。
-
public class PathOpView extends View {
-
-
private Paint mPaint;
-
-
public PathOpView(Context context) {
-
super(context);
-
mPaint = new Paint();
-
mPaint.setColor(Color.RED);
-
mPaint.setStrokeWidth(8);
-
mPaint.setStyle(Paint.Style.STROKE);
-
mPaint.setAntiAlias(true);
-
}
-
-
@Override
-
protected void onDraw(Canvas canvas) {
-
super.onDraw(canvas);
-
drawCircle(canvas)
-
-
}
-
-
private void drawCircle(Canvas canvas) {
-
Path path = new Path();
-
path.addCircle(150, 150, 100, Path.Direction.CW);
-
canvas.drawPath(path,mPaint);
-
}
-
}
在上述代码中的drawCircle函数里，new一个Path，调用Path.addCircle定义一个圆形路径区域，最后调用canvas.drawPath绘制出这个圆形区域。
2. 两个path之间的合并
现在有以下几种合并方式：
Path.Op.DIFFERENCE Path1调用合并函数：减去Path2后Path1区域剩下的部分
Path.Op.INTERSECT 保留Path2 和 Path1 共同的部分
Path.Op.UNION 保留Path1 和 Path 2
Path.Op.XOR 保留Path1 和 Path2 + 共同的部分
Path.Op.REVERSE_DIFFERENCE 与 Path.Op.DIFFERENCE相反，减去Path1后Path2区域剩下的部分
2.1 Path.Op.DIFFERENCE
绘制两个圆，使用Path.Op.DIFFERENCE模式，最终的结果是 Path1圆减去path2圆后剩下的部分
最终效果图如下：其灰色表示最初的2个圆path，红色表示经过Path.Op.DIFFERENCE模式合并后，剩下的path1部分。
源码如下：
-
package com.xiaowei.path_basic;
-
-
import android.content.Context;
-
import android.graphics.Canvas;
-
import android.graphics.Color;
-
import android.graphics.Paint;
-
import android.graphics.Path;
-
import android.view.View;
-
-
/**
-
* Created by Xiaowei
-
*/
-
-
public class PathOpView extends View {
-
-
private Paint mPaint;
-
-
public PathOpView(Context context) {
-
super(context);
-
mPaint = new Paint();
-
mPaint.setColor(Color.RED);
-
mPaint.setStrokeWidth(8);
-
mPaint.setStyle(Paint.Style.STROKE);
-
mPaint.setAntiAlias(true);
-
}
-
-
@Override
-
protected void onDraw(Canvas canvas) {
-
super.onDraw(canvas);
-
-
// DIFFERENCE -- 减去Path2后Path1区域剩下的部分
-
drawDifferenceOp(canvas);
-
-
}
-
-
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);
-
}
-
}
其中drawDifferenceOp函数里，定义了2个路径path1与path2两个圆形路径, path1.op(path2, Path.Op.DIFFERENCE); 将2个路径合并，合并方法为：path1减去path2后，剩下的部分。后面的2个canvas.drawCircle(......)是绘制出没有合并的2个圆，用于对比合并后的图形。
2.2 Path.Op.INTERSECT 模式
保留两个圆相交的区域
效果图如下：
核心代码如下：
-
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);
-
}
上述drawIntersectOp函数也是在onDraw里调用，下文中的核心函数也是同样。
2.3 Path.Op.UNION
合并path1和path2
效果图：
核心代码：
-
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);
-
}
2.4 Path.Op.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);
-
}
2.5 Path.Op.REVERSE_DIFFERENCE
与DIFFERENCE相反，保留的是path2 - 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);
-
}
demo源码：https://download.csdn.net/download/gaoxiaoweiandy/12435514
文章来源: blog.csdn.net，作者：冉航--小虾米，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/gaoxiaoweiandy/article/details/106194583
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）