Android Canvas之Path操作

最新推荐文章于 2022-09-21 15:35:24 发布
最新推荐文章于 2022-09-21 15:35:24 发布
阅读量3.1k 收藏 4
点赞数 2
分类专栏： 自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34476727/article/details/69525768
版权

接上篇，Android自定义View工具：Paint&Canvas(二)

上一篇中介绍的Canvas绘制图形只能画一些常规图形（圆，椭圆，矩形等），如果想绘制更复杂的图形，Path神器来了！

Path是什么？
Path类将多种复合路径（多个轮廓，如直线段、二次曲线、立方曲线）封装在其内部的几何路径。

如何绘制Path：
通过设置Paint的Style（FILL、STROKE、FILL_AND_STROKE），然后调用canvas.drawPath(path, paint)；Path还可以用于剪切或者在路径上绘制文本（canvas.drawTextOnPath()）。

Path有两个构造函数：

Path() // 空的构造函数
Path(Path src) //创建一个新的路径，并且从src路径里赋值内容

Path常用方法一览表：

Path常用方法 备注
线操作  
lineTo、rLineTo 绘制线
点操作  
moveTo、rMoveTo 改变后面操作的起始点位置
setLastPoint 改变前面操作中最后点的位置
添加常规图形  
addRect 绘制矩形
addRoundRect 绘制圆角矩形
addCircle 绘制圆
addOval 绘制椭圆
addArc、arcTo 绘制圆弧
闭合path  
close 如果连接Path起点和终点能形成一个闭合图形，则会将起点和终点连接起来形成一个闭合图形
贝塞尔曲线  
quadTo、rQuadTo、cubicTo、rCubicTo 贝塞尔曲线
  • 线操作
lineTo(float x, float y) //添加当前点到目标点（x，y）构成的直线到path
rLineTo(float dx, float dy) //基于当前坐标系，即以path最后的那个点
//为坐标系原点（0,0），如果前面没有path的点，默认是屏幕左上角（0,0）.

注：lineTo、rLineTo起始点默认是屏幕左上角的坐标系原点（0,0）！
示例： 

//设置Paint
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10f);
//设置Path
Path path = new Path();
//屏幕左上角（0,0）到（200,400）画一条直线
path.lineTo(200, 400);
//(200, 400)到（400,600）画一条直线
path.lineTo(400, 600);
//以（400,600）为起始点（0,0）偏移量为（400,600）画一条直线，
//其终点坐标实际在屏幕的位置为（800,1200）
path.rLineTo(400, 600);
canvas.drawPath(path, mPaint);

效果图：

                                                  


  • 点操作
moveTo(float x, float y) //改变接下来操作的起点位置为（x,y）
rMoveTo(float dx, float dy) //接下来要操作的起点位置为（x+dx,y+dy）
setLastPoint(float dx, float dy) //改变前一步操作点的位置，会改变前一步的操作

先来看 moveTo和rMoveTo的区别 ，示例： 

//初始化Paint
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10f);
//初始化Path
Path path = new Path();
//将坐标系原点从（0,0）移动到（100,100）
path.moveTo(100, 100);
//画从（100,100）到（400,400）之间的直线
path.lineTo(400, 400);
//path.rMoveTo(0, 100); //暂时注释
path.lineTo(400, 800);
canvas.drawPath(path, mPaint);

效果图：

                                                                       

上面代码中，打开注释的path.rMoveTo(0, 100)，意为下一步操作起点位置由（400,400）变为（400+0,400+100）即为（400,500），效果图：

                                               


接下来看下，moveTo和setLastPoint的区别，同样用上面的代码,加上path.setLastPoint(100, 800)，如下：

//初始化Paint
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10f);
//初始化Path
Path path = new Path();
//将坐标系原点从（0,0）移动到（100,100）
path.moveTo(100, 100);
//画从（100,100）到（400,400）之间的直线
path.lineTo(400, 400);
//新加的setLastPoint
path.setLastPoint(100, 800);
path.lineTo(400, 800);
canvas.drawPath(path, mPaint);

效果图：

                                              


虚线本来是没设置setLastPoint之前的路径，设置setLastPoint（100,800）后，影响到了前一步lineTo（400,400）操作，变成了lineTo（100,800），最后结果就变成了红颜色的path路径，可以得出结论：moveTo影响的是后面操作的起点位置，不会影响之前的操作；而 setLastPoint改变前一步操作最后一个点的位置，不仅影响前一步操作，同时也会影响后一步操作！

  • 绘制常规图形
//绘制圆
addCircle(float x, float y, float radius, Direction dir) 
 //绘制椭圆
addOval(RectF oval, Direction dir)
addOval(float left, float top, float right, float bottom, Direction dir) 
//绘制矩形
addRect(RectF rect, Direction dir) 
addRect(float left, float top, float right, float bottom, Direction dir) 
//绘制圆角矩形
addRoundRect(RectF rect, float rx, float ry, Direction dir) 
addRoundRect(float left, float top, float right, float bottom, float rx, float ry,Direction dir)
addRoundRect(RectF rect, float[] radii, Direction dir)
addRoundRect(float left, float top, float right, float bottom, float[] radii,Direction dir)

所有方法里面都有一个共同的参数Direction ：

Direction 备注
Path.Direction.CCW counter-clockwise ，沿逆时针方向绘制
Path.Direction.CW clockwise ，沿顺时针方向绘制

Direction 用法示例：

//初始化Paint
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2f);
paint.setTextSize(40f);
//初始化Path
Path path = new Path();
//以（600,600）为圆心，300为半径绘制圆 
//Path.Direction.CW顺时针绘制圆 Path.Direction.CCW逆时针绘制圆
path.addCircle(600, 600, 300, Path.Direction.CW);
//沿path绘制文字
canvas.drawTextOnPath("痛苦最好是别人的，快乐才是自己的；麻烦将是暂时的，朋友总是永恒的。", path, 0, 0, paint);
canvas.drawPath(path, paint);

效果图：

                                              


效果很明显，设置为Path.Direction.CW时，文字沿顺时针绘制；设置为Path.Direction.CCW时，文字沿逆时针绘制。

绘制常规图形示例：

//初始化Paint
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10f);
Path path = new Path();
//以（400,200）为圆心，半径为100绘制圆
path.addCircle(400, 200, 100, Path.Direction.CW);

//绘制椭圆
RectF rectF = new RectF(100, 350, 500, 600);
//第一种方法绘制椭圆
path.addOval(rectF, Path.Direction.CW);
//第二种方法绘制椭圆
path.addOval(600, 350, 1000, 600, Path.Direction.CW);

//绘制矩形
RectF rect = new RectF(100, 650, 500, 900);
//第一种方法绘制矩形
path.addRect(rect, Path.Direction.CW);
//第一种方法绘制矩形
path.addRect(600, 650, 1000, 900, Path.Direction.CCW);

//绘制圆角矩形
RectF roundRect = new RectF(100, 950, 300, 1100);
//第一种方法绘制圆角矩形
path.addRoundRect(roundRect, 20, 20, Path.Direction.CW);
//第二种方法绘制圆角矩形
path.addRoundRect(350, 950, 550, 1100, 10, 50, Path.Direction.CCW);
//第三种方法绘制圆角矩形 
//float[] radii中有8个值，依次为左上角，右上角，右下角，左下角的rx,ry
RectF roundRectT = new RectF(600, 950, 800, 1100);
path.addRoundRect(roundRectT, new float[]{50, 50, 50, 50, 50, 50, 0, 0}, Path.Direction.CCW);
//第四种方法绘制圆角矩形
path.addRoundRect(850, 950, 1050, 1100,new float[]{0, 0, 0, 0,50, 50, 50, 50}, Path.Direction.CCW);
canvas.drawPath(path, paint);

效果图：

                                                         


绘制圆弧：

 

//绘制圆弧
addArc(RectF oval, float startAngle, float sweepAngle)
addArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle)

//forceMoveTo：是否强制将path最后一个点移动到圆弧起点，
//true是强制移动，即为不连接两个点；false则连接两个点
arcTo(RectF oval, float startAngle, float sweepAngle,boolean forceMoveTo)
arcTo(RectF oval, float startAngle, float sweepAngle)
arcTo(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean forceMoveTo)

addArc和arcTo都是添加圆弧到path中，不过他们之间还是有区别的： addArc是直接添加圆弧到path中，而arcTo会判断要绘制圆弧的起点与绘制圆弧之前path中最后的点是否是同一个点，如果不是同一个点的话，就会连接两个点。
示例： 

//在(400, 200, 600, 400)区域内绘制一个300度的圆弧
RectF rectF = new RectF(400, 200, 600, 400);
path.addArc(rectF, 0, 300);
//在(400, 600, 600, 800)区域内绘制一个90度的圆弧，并且不连接两个点
RectF rectFTo = new RectF(400, 600, 600, 800);
path.arcTo(rectFTo, 0, 90, true);
//等价于path.addArc(rectFTo, 0, 90);
canvas.drawPath(path, paint);

效果图：

                                                 


修改一下代码：

 

//在(400, 200, 600, 400)区域内绘制一个300度的圆弧
RectF rectF = new RectF(400, 200, 600, 400);
path.addArc(rectF, 0, 300);
//在(400, 600, 600, 800)区域内绘制一个90度的圆弧，并且连接两个点
RectF rectFTo = new RectF(400, 600, 600, 800);
path.arcTo(rectFTo, 0, 90,false);
//等价于path.arcTo(rectFTo, 0, 90);
canvas.drawPath(path, paint);

对比发现我们只是将arcTo最后一个参数变成了false，即连接绘制圆弧之前path的最后一个点和绘制圆弧的起点，效果图：



  • 闭合path
path.close();

如果path的终点和起始点不是同一个点的话，close()连接这两个点，形成一个封闭的图形，示例： 

//初始化Paint
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10f);
//初始化Path
Path path = new Path();
//将坐标原点移动到（300,300,）
path.moveTo(300, 300);
//连接(300, 300)和(300, 600)成一条线
path.lineTo(300, 600);
//连接(300, 600)和(600, 600)成一条线
path.lineTo(600, 600);
//path.close();暂时注释
canvas.drawPath(path, paint);

效果图：

                                                     


修改一下代码，将上面的path.close()打开，效果图：

                                                     


可以调用close()后，连接了path的起始点和终点形成了一个封闭图形！

贝塞尔曲线内容较多，放在下一篇了！


老虎从不发威-新歌
关注
专栏目录
android drawpath填充,Android自定义View之Canvas的Path方法和Paint的DrawText的方法
weixin_35833704的博客
05-29 1083
本篇文章记录了一些觉得还是很有意思的一些方法,文章底部有自定义View的干货推荐哦！Canvas画路径初始化画笔工具mPaint.setColor(Color.RED);//设置画笔的颜色mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(4);//设置画笔宽度mPaint.setAntiAlias(true);画线(三角形)Path...
Android自定义View，绘制Path相交，使用Canvas.clipPath代替Path.op
bingma1995的博客
11-12 1778
如果只是单纯的绘制两个Path交集的话，不妨采用Canvas.clipPath的方法。用其中一个path当作clipPath，其中一个drawPath，即可画出想要的效果。
Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)
09-02
主要介绍了Android编程开发之在Canvas中利用Path绘制基本图形的方法,涉及Android基本的图形绘制技巧,结合实例分析了绘制圆形,矩形,椭圆,三角形等基本图形的实现方法,需要的朋友可以参考下
安卓-Android的Canvas用法-Canvas画图(1)
ruiruiddd的博客
09-18 831
原帖： 链接: link 上一篇中介绍的Canvas绘制图形只能画一些常规图形（圆，椭圆，矩形等），如果想绘制更复杂的图形，Path神器来了！ Path是什么？ Path类将多种复合路径（多个轮廓，如直线段、二次曲线、立方曲线）封装在其内部的几何路径。 如何绘制Path： 通过设置Paint的Style（FILL、STROKE、FILL_AND_STROKE），然后调用canvas.drawPath(path, paint)；Path还可以用于剪切或者在路径上绘制文本（canvas.drawTextOnPa
Canvas、Path 和 Paint 实例
stonesharp的专栏
07-07 744
Canvas类主要实现了屏幕的绘制过程，其中包含了很多实用的方法，比如绘制一条路径、区域、贴图、画点、画线、渲染文本，下面是Canvas类常用的方法，当然Android开发网提示大家很多方法有不同的重载版本，参数更灵活。   void drawRect(RectF rect, Paint paint) //绘制区域，参数一为RectF一个区域   void drawPath(Path
AndroidUi之Canvas,Path
做一个苦行僧的专栏
05-12 858
画布，在我们android的View或者自定义View中占有举足轻重的地位，在android中它的意义也是字面的意思，我们可以通过画笔绘制几何图形，文本，路径或者位图。我们可以将Canvas的API主要分为三类，一类是绘制相关的，例如drawText,drawLine...，一类是变换相关的，canvas.translate、canvas.rotate....，还有一类是状态保存和...
Android canvas画图操作之切割画布实现方法(clipRect)
09-01
在Android开发中，Canvas是用于在屏幕上绘制图形的重要工具。Canvas提供了多种方法来对画布进行操作，包括绘制线条、形状、文字等。本篇文章将详细介绍如何使用`clipRect`方法来切割Android Canvas画布，以及它的...
android平移动画绘制,Android使用Canvas和Path自定义绘制动画
weixin_30046591的博客
05-25 1037
1. 动画类型在android开发中，完成设计师设计的动画的途径有很多种。(1). 属性动画(Property Animtion)Creates an animation by modifying an object's property values over a set period of time with an Animator.通过使用Animator类修改object 的属性来实现动画...
【Android】 Canvas、Path 和 Paint 实例 (游戏开发必备)
11-10 55
Canvas类主要实现了屏幕的绘制过程，其中包含了很多实用的方法，比如绘制一条路径、区域、贴图、画点、画线、渲染文本，下面是Canvas类常用的方法，当然Android开发网提示大家很多方法有不同的重载版本，参数更灵活。 void drawRect(RectF rect, Paint paint)//绘制区域，参数一为RectF一个区域 void drawPath(Path path, Pain...
android canvas\paint\path简单使用（自定义view必学）
04-01
最近学到自定义view，也是涉及到了canvas、paint、path的使用，此内容比较简单。 此三者一般会在自定义view的onDraw()中用到： canvas：决定view的布局（位置，画布颜色，形状） paint：决定view的属性（颜色，字体大小，风格） path：路径（path的用法深入比较复杂，此处由于是入门，就不多加阐述混淆新手了）
Android手绘路径，获取点集，曲线运动
11-07
Android手绘路径，获取所绘路径的x,y坐标点集，保存为Json格式txt文件points.txt，及从文件获取点集List。
Android Canvas之Path的详解与使用（二）
09-21 2694
Path类封装复合（多轮廓）几何路径由直线段、二次曲线和三次曲线组成。它可以用画布绘制。drawPath（路径、绘制），填充或笔划（基于绘画的样式），或者可以用于剪裁或绘制路径上的文本。 Path属于路径，路径走多了就变成一种套路，只要我们会解套，那这种套路就是高速公路。路径走完形成闭环，最终形成一个图形。
Android高级UI开发（四十五）Canvas Path
gaoxiaoweiandy的专栏
05-18 1926
1. Path概念 用Path定义一个图形，然后用canvas.drawPath(...)函数来绘制这个图形。例如绘制一个圆。Path可以绘制各种图形，如二次，三次贝塞尔曲线，圆形、多边形，三角形，五角星等几何形状。 public class PathOpView extends View { private Paint mPaint; public PathOpView(Context context) { super(context); mPai
android自定义View——基础绘制Canvas、Path笔记
qq_34501274的博客
03-26 648
自定义绘制的4个级别 Canvas 的 drawXXX() 系列方法及 Paint 最常见的使用 Paint 的完全攻略 Canvas 对绘制的辅助——范围裁切和几何变换 使用不同的绘制方法来控制绘制顺序 onDraw（） Paint基础 Paint.setStyle(Style style) 设置绘制模式（控制实心圆还是空心圆） /** * Paint.Style.ST...
Android中Path类的lineTo方法和quadTo方法画线的区别
热门推荐
stevenhu_223的专栏
07-02 7万+
但我们需要在屏幕上形成画线时，Path类的应用是必不可少的，而Path类的lineTo和quadTo方法实现的绘制线路形式是不一样的；    1. Path--->quadTo(float x, float y) :       该方法实现的是当我们不仅仅是画一条线而且是画弧线时会形成平滑的曲线，该曲线又称为"贝塞尔曲线"(Bezier curve)，下面以一个Demo来结合理解quad
精通Android自定义View(十)绘制篇Canvas分析之绘制Path
代码小疯子
03-12 1296
1Path常用方法简析 Path在2D绘图中是一个很重要的类。 Path在这里可以绘制基本的图形，也可以绘制其他复杂的图形。 2 常用API解析与示例 2.1xxxTo方法 Path类中提供了一套xxxTo方法，其作用是从起点到终点移动path画笔并绘制线（moveTo方法只移动path画笔不绘制线），线有直线和曲线 方法汇总简述 方法名 参数解析 lineTo(...
Android：视图绘制(四) ------Path进阶
阿东
09-24 3413
这里主要讲Path的填充方式 FillType 和 他的一个辅助工具类 PathMeasure
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值