自定义View——Path图形与逻辑运算

转载 2016年05月31日 22:15:10

自定义View——Path图形与逻辑运算

原文链接:http://www.idtkm.com/customview/customview4/?utm_source=tuicool&utm_medium=referral

涉及知识

Path

类型 API 描述
添加路径 addArc, addCircle, addOval, addPath, addRect, addRoundRect, arcTo 依次为添加圆弧、圆、椭圆、路径、矩形、圆角矩形、圆弧
移动起点 moveTo 移动起点位置,仅对之后路径产生影响
移动终点 setLastPoint 移动上一次的终点位置,对前后的路径都会产生影响
直线 lineTo 增加一条道指定点的直线
贝塞尔 quadTo, cubicTo 二阶、三阶贝塞尔曲线
闭合路径 close 路径终点连接到起点
逻辑运算 op A\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、创建画笔

创建画笔并初始化

//创建画笔
private Paint mPaint = new Paint();

private void initPaint(){
    //初始化画笔
    mPaint.setStyle(Paint.Style.FILL);//设置画笔类型
    mPaint.setAntiAlias(true);//抗锯齿
}

b、绘制坐标轴

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

//宽高
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;
}

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

private 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一次进行绘制

mPaint.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

r = 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);

addArc

再来看看arcTo

//arcTo
mPath.moveTo(0,0);
mPath.arcTo(mRectF,-60,180);
//绘制Path
canvas.drawPath(mPath,mPaint);

arcTo

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

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

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

@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的方法来实现圆角图片。

@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方法中对图片的尺寸进行压缩

private 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的切割尺寸

protected void size(){
    length = Math.min(mViewWidth,mViewHeight)/2;
    rect = new Rect(-(int) length, -(int) length, (int) length, (int) length);//绘制图片矩阵
}

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

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

protected Path pathFigure(){
    switch (modeFlag){
        case CIRCLE:
            mPath.addCircle(0,0,length, Path.Direction.CW);//增加圆的path,顺时针闭合圆
            break;
    }
    return mPath;
}

圆形

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


private 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的距离,半径扩大到之前的两倍)

case 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如下:

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

逻辑运算具有五种类型:

方法 描述 示意图
DIFFERENCE B在A中的相对补集,即A减去A与B的交集 补集1
REVERSE_DIFFERENCE A在B中的相对补集合,即B减去B与A的交集 补集2
INTERSECT A与B的交集 交集
UNION A与B的合集 合集
XOR A与B的合集减去A与B的交集 异或

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

case 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,多边形,格子图等等。如果在阅读过程中,有任何疑问与问题,欢迎与我联系。
GitHub:https://github.com/Idtk
博客:http://www.idtkm.com
邮箱:Idtkma@gmail.com

圆角图片FigureImageView源码

Android 自定义View 图片按Path运动和旋转

View: /** * author : stone * email : aa86799@163.com * time : 16/5/29 15 29 */ public class ...
  • jjwwmlp456
  • jjwwmlp456
  • 2016年07月27日 16:31
  • 1357

自定义View之绘图篇(一):基础图形的绘制

生活是一面镜子,你对它笑,它就对你笑;你对它哭,它也对你哭。——萨克雷在正文开始之前,我先抛一个脑洞大开的题目给大家:商人以45元一双进购了2双鞋子,然后亏本30一双出售。某个顾客给了他100买了2双...
  • u012551350
  • u012551350
  • 2016年05月06日 00:29
  • 9046

Android自定义动画框架让View实现Path动画

这篇博客主要是从canvas.drawPath()的效果来让View去实现moveTo,LineTo,CubicTo,Quato的Path动画 1:首先看一下Path的moveTo,LineTo,Cu...
  • szqsdq
  • szqsdq
  • 2016年12月23日 16:47
  • 1879

安卓自定义View进阶-Path基本操作

在上一篇 Canvas 之图片文字中我们了解了如何使用 Canvas 中绘制图片文字,结合前几篇文章,Canvas 的基本操作已经差不多完结了,然而 Canvas 不仅仅具有这些基本的操作,还可以更加...
  • u013831257
  • u013831257
  • 2016年03月02日 23:48
  • 9945

android自定义View绘制几何图形

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) 1、首先说一下canvas类: Class Overview The Canvas cla...
  • qq_34308476
  • qq_34308476
  • 2016年06月12日 14:19
  • 2620

android自定义View绘制几何图形

1、MainActivity.class类 包
  • wljun739
  • wljun739
  • 2014年07月11日 10:03
  • 4372

Android 判断一个点是否在封闭的Path内或不规则的图形内

最近在写画板程序,要判断一个点在一个闭合的path内或者是一个不规则的图形内,这个可不好解决网上查了一堆有算法云云的,直到看到一个大神的帖子 其实可以相当的简单几句话的是 核心代码: //-----...
  • NN955
  • NN955
  • 2015年11月11日 17:47
  • 5524

Android的绘图机制学习---自定义View

一、自定义View的使用: 通常我们为界面做UI设计时使用xml中的布局文件,这些布局文件及方法是androidAPI中所提供的。如果我们要实现一些复杂的布局或者一些特别的效果这样就会用到自定义V...
  • u011521890
  • u011521890
  • 2015年11月28日 18:39
  • 808

自定义View 之 Path应用

因为项目需要需要做几个自定义View,用到了Path,所以在结束后,总结分享下。 先看看效果吧。大概就是一个防太阳运转的一个自定义view,还有一个是不规则曲线的进度条。 补充(2017-4-27)最...
  • xiao_sier
  • xiao_sier
  • 2017年04月24日 11:53
  • 258

自定义View之 Path

1、moveTo moveTo 不会进行绘制,只用于移动移动画笔。 2、lineTo lineTo 用于进行直线绘制。 mPath.lineTo(300, 300); canvas.dra...
  • u013749540
  • u013749540
  • 2018年01月17日 11:09
  • 13
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义View——Path图形与逻辑运算
举报原因:
原因补充:

(最多只允许输入30个字)