android path自动闭合,Android Path图形与逻辑运算

陈丰Element Chan

于 2021-05-25 14:55:21 发布

阅读量1.2k

点赞数

文章标签： android path自动闭合

涉及知识

Path类型API描述添加路径addArc, addCircle, addOval, addPath, addRect, addRoundRect, arcTo依次为添加圆弧、圆、椭圆、路径、矩形、圆角矩形、圆弧

移动起点moveTo移动起点位置，仅对之后路径产生影响

移动终点setLastPoint移动上一次的终点位置，对前后的路径都会产生影响

直线lineTo增加一条道指定点的直线

贝塞尔quadTo, cubicTo二阶、三阶贝塞尔曲线

闭合路径close路径终点连接到起点

逻辑运算opA\B(DIFFERENCE), A∩B(INTERSECT), B\A(REVERSE_DIFFERENCE), A∪B(UNION), A⊕B(XOR)

替换路径set用新的路径替换当前路径

重置reset, rewind清除path使它为空，清除path但保留内部的数据结构

计算边界computeBounds计算路径的矩形边界

闭合方向Direction顺时针方向闭合Path(CW),逆时针方向闭合Path(CCW)

本来这章应该是PieChart的实战，可是我在编写的时候发现了一个设置背景图片的bug。作为一个强迫症(ಥ_ಥ)，我只好引入了Path来解决这个bug，所以就有了这一篇内容。

一、什么是Path

官方描述:

Path class 封装了由直线、二次、三次贝塞尔曲线构成的多重曲线几何路径。它可以用canvas.drawPath(path,paint)方法绘图，填充和线都可以(根据paint的样式)，或者它可以用于在绘图路径上裁剪或者绘出文本。

我的理解:

Path由任意多条直线、二次贝塞尔或三次贝塞尔曲线组成,可以选择填充或者描边模式，可以使用它裁剪画布或者绘制文字。

二、添加路径

1、lineTo,moveTo

在之前的文章中，使用canvas的函数绘制过坐标系，这次使用path来绘制。

a、创建画笔

创建画笔并初始化

[代码]java代码：1

8//创建画笔

private Paint mPaint = new Paint();

private void initPaint(){

//初始化画笔

mPaint.setStyle(Paint.Style.FILL);//设置画笔类型

mPaint.setAntiAlias(true);//抗锯齿

}

b、绘制坐标轴

使用onSizeChanged方法，获取根据父布局等因素确认的View宽高

[代码]java代码：01

10//宽高

private int mWidth;

private int mHeight;

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

mWidth = w;

mHeight = h;

}

把原点从左上角移动到画布中心,绘制原点与四个端点

[代码]java代码：01

13private Path mPath = new Path();

canvas.translate(mWidth/2,mHeight/2);// 将画布坐标原点移动到中心位置

//绘制坐标原点

mPaint.setColor(Color.BLACK);//设置画笔颜色

mPaint.setStrokeWidth(10);//为了看得清楚,设置了较大的画笔宽度

canvas.drawPoint(0,0,mPaint);

//绘制坐标轴4个断点

canvas.drawPoints(new float[]{

mWidth/2*0.8f,0

,0,mHeight/2*0.8f

,-mWidth/2*0.8f,0

,0,-mHeight/2*0.8f},mPaint);

增加坐标轴与箭头的Path，在完成后使用canvas.drawPath一次进行绘制

[代码]java代码：01

17mPaint.setStrokeWidth(1);//恢复画笔默认宽度

//x轴

mPath.moveTo(-mWidth/2*0.8f,0);//移动path起点到(-mWidth/2*0.8f,0)

mPath.lineTo(mWidth/2*0.8f,0);//直线终点为(mWidth/2*0.8f,0)

//y轴

mPath.moveTo(0,-mHeight/2*0.8f);//移动path起点到(0,-mHeight/2*0.8f)

mPath.lineTo(0,mHeight/2*0.8f);//直线终点为(0,mHeight/2*0.8f)

//x箭头

mPath.moveTo(mWidth/2*0.8f*0.95f,-mWidth/2*0.8f*0.05f);

mPath.lineTo(mWidth/2*0.8f,0);

mPath.lineTo(mWidth/2*0.8f*0.95f,mWidth/2*0.8f*0.05f);

//y箭头

mPath.moveTo(mWidth/2*0.8f*0.05f,mHeight/2*0.8f-mWidth/2*0.8f*0.05f);

mPath.lineTo(0,mHeight/2*0.8f);

mPath.lineTo(-mWidth/2*0.8f*0.05f,mHeight/2*0.8f-mWidth/2*0.8f*0.05f);

//绘制Path

canvas.drawPath(mPath,mPaint);

可以看出moveTo方法，可以移动下一次增加path的起点，而lineTo中的参数，即为直线的终点。

2、addArc与arcTo方法区别addArc画一段圆弧

arcTo画一段圆弧，当上一次的终点与圆弧起点未连接时，可以设置是否连接这两点

addArc

[代码]java代码：1

8r = Math.min(mWidth,mHeight)*0.6f/2;

mRectF.left = 0;

mRectF.top = -r;

mRectF.right = r;

mRectF.bottom = 0;

mPath.addArc(mRectF,-60,180);

//绘制Path

canvas.drawPath(mPath,mPaint);

再来看看arcTo

[代码]java代码：1

5//arcTo

mPath.moveTo(0,0);

mPath.arcTo(mRectF,-60,180);

//绘制Path

canvas.drawPath(mPath,mPaint);

可以看到arcTo多了一条从原点到圆弧起点的直线，而如果设置为mPath.arcTo(mRectF,-60,180,false);效果将和addArc相同。

三、圆角图片以及更多形状图片

继承ImageView,重写父类的onSizeChanged方法，获取View尺寸，之后根据View大小对图片进行压缩。

[代码]java代码：1

8@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

mViewWidth = w;

mViewHeight = h;

size();//切割尺寸计算

scaleBitmap();//压缩图片尺寸函数

}

在onDraw方法中进行样式绘制，在其中使用clipPath的方法来实现圆角图片。

[代码]java代码：1

7@Override

protected void onDraw(Canvas canvas) {

canvas.translate(mViewWidth/2,mViewHeight/2);//将画布坐标原点移动到中心位置

canvas.clipPath(pathFigure(), Region.Op.INTERSECT);//切割

mPath.reset();

canvas.drawBitmap(b,rect,rect,mPaint);

}

在scaleBitmap方法中对图片的尺寸进行压缩

[代码]java代码：01

20private void scaleBitmap(){

Drawable drawable = getDrawable();//获取图片

if (drawable == null) {

return;

}

if (getWidth() == 0 || getHeight() == 0) {

return;

}

if (!(drawable instanceof BitmapDrawable)) {

return;

}

b = ((BitmapDrawable) drawable).getBitmap();//获取bitmap

if (null == b) {

return;

}

float scaleWidth = (float) length/b.getWidth();

float scaleHeight = (float) length/b.getHeight();

matrix.postScale(scaleWidth,scaleHeight);//缩放矩阵

b=Bitmap.createBitmap(b,0,0,b.getWidth(),b.getHeight(),matrix,true);//压缩图片

}

在size方法中设置canvas的切割尺寸

[代码]java代码：1

4protected void size(){

length = Math.min(mViewWidth,mViewHeight)/2;

rect = new Rect(-(int) length, -(int) length, (int) length, (int) length);//绘制图片矩阵

}

现在就是发挥想象力的时候啦(^∇^*)，来编写pathFigure()方法吧

a、先编写一个简单的圆形图片样式

[代码]java代码：1

8protected Path pathFigure(){

switch (modeFlag){

case CIRCLE:

mPath.addCircle(0,0,length, Path.Direction.CW);//增加圆的path，顺时针闭合圆

break;

}

return mPath;

}

b、增加一个圆角图片样式

[代码]java代码：1

9private RectF rectF = new RectF();

case ROUNDRECT:

rectF.left = -length;

rectF.top = -length;

rectF.right = length;

rectF.bottom = length;

mPath.addRoundRect(rectF,radius,radius, Path.Direction.CW);//圆角矩形，radius为圆角的半径，顺时针闭合圆角矩形

break;

c、再增加一个扇形样式

(PS:为了可以获得更多的图片面积，需要把圆心下移一个length的距离，半径扩大到之前的两倍)

[代码]java代码：1

8case SECTOR:

rectF.left = -length*2;

rectF.top = -length;

rectF.right = length*2;

rectF.bottom = length*3;

mPath.moveTo(0,length);

mPath.arcTo(rectF,angle,-angle*2-180);//绘制圆弧

break;

四、逻辑运算

两条Path可通过多种逻辑运算进行结合，形成新的Path。

API如下:

[代码]java代码：1

2op(Path path, Path.Op op)

op(Path path1, Path path2, Path.Op op)

逻辑运算具有五种类型:方法描述DIFFERENCEB在A中的相对补集，即A减去A与B的交集

REVERSE_DIFFERENCEA在B中的相对补集合，即B减去B与A的交集

INTERSECTA与B的交集

UNIONA与B的合集

XORA与B的合集减去A与B的交集

使用Path.op方法再给圆角图片类，增加一种环形样式:

[代码]java代码：01

16case RING:

rectF.left = -length*2;

rectF.top = -length;

rectF.right = length*2;

rectF.bottom = length*3;

mPath1.moveTo(0,length);

mPath1.arcTo(rectF,angle,-angle*2-180);//较大的圆弧

rectF.left = -length/2;

rectF.top = length/2;

rectF.right = length/2;

rectF.bottom = length*3/2;

mPath2.moveTo(0,length);

mPath2.arcTo(rectF,angle,-angle*2-180);//较小的圆弧

mPath.op(mPath1,mPath2, Path.Op.XOR);//异或获取环形

五、小结

本文介绍了Path的基本使用方法与逻辑运算，同时通过圆角图片的例子，进行了实战。使用Path方法，还可以增加更多有趣的图形，比如star，多边形，格子图等等。如果在阅读过程中，有任何疑问与问题，欢迎与我联系。

PS:示例中使用的方法，相对消耗内存，更合适的是设置反向填充来完成圆角图片的生成，FigureImageView为反向填充的方法，OldFigureImageView为示例中的方法