用Path来绘制一些图形

本是古典何须时尚 2022-06-08 07:26 185阅读 0赞

Path是android中用来封装几何学路径的一个类，因为Path在图形绘制上占的比重还是相当大的。你可以用它来绘制各种样式的几何图形，做图表什么的都可以。

一、画线段

1.1 lineT(float x, float y)

先来看一段代码：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            // 连接路径到点[100,100]
            mPath.lineTo(100, 100);
            // 绘制路径
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

![261211147051047.jpg][]

效果就是将起始点和（100，100）进行连接。这里因为没有设置起始点，所以默认是canvas的左上角，而这里默认的canvas和屏幕重合，所以就成了这个样子。

当然我们可以考虑多次调用lineTo方法来绘制更复杂的图形：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            mPath.moveTo(100, 100);  
            // 连接路径到点  
            mPath.lineTo(300, 100);  
            mPath.lineTo(400, 200);  
            mPath.lineTo(200, 200); 
            // 绘制路径
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

![261217055498129.jpg][]

1.2 moveTo(float x, float y)

我们可以通过moveTo(float x, float y) 来移动起始的坐标点，比如：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            //移动点至[300,300]  
            mPath.moveTo(300, 300);  
            // 连接路径到点[100,100]
            mPath.lineTo(100, 100);
            // 绘制路径
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

![261214417363164.jpg][]

1.3 close()

![261217055498129.jpg][]

上面的例子我们构建了一个类似平行四边形的图像，如果此时我们想闭合该曲线让它变成一个形状该怎么做呢？聪明的你一定想到：

mPath.lineTo(100, 100)

然而Path给我提供了更便捷的方法：

> close()

在上面的例子添加close()后就会自动构建一条末点和起始点的线段：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            mPath.moveTo(100, 100);  
            // 连接路径到点  
            mPath.lineTo(300, 100);  
            mPath.lineTo(400, 200);  
            mPath.lineTo(200, 200); 
            // 闭合曲线
            mPath.close();
            // 绘制路径
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

![261222134082143.jpg][]

二、画贝赛尔曲线

2.1 贝赛尔曲线

什么叫贝赛尔曲线？其实很简单，使用三个或多个点来确定的一条曲线，贝塞尔曲线在图形图像学中有相当重要的地位，Path中也提供了一些方法来给我们模拟低阶贝赛尔曲线。

贝塞尔曲线的定义也比较简单，你只需要一个起点、一个终点和至少零个控制点则可定义一个贝赛尔曲线，当控制点为零时，只有起点和终点，此时的曲线说白了就是一条线段，我们称之为一阶贝赛尔曲线。

PS：以下图片和公式均来自维基百科和互联网

一阶贝赛尔曲线：

![20141216154914760][]

其公式可概括为：

![Center][]

其中B(t)为时间为t时点的坐标，P0为起点、Pn为终点

贝塞尔曲线于1962年由法国数学家Pierre Bézier第一次研究使用并给出了详细的计算公式，So该曲线也是由其名字命名。Path中给出的quadTo方法属于

二阶贝赛尔曲线：

![20141216155508803][]

二阶贝赛尔曲线的一个明显特征是其拥有一个控制点，大家可以这样想想贝赛尔曲线，在一根两端固定橡皮筋上有一块磁铁，现在我们拿另一块磁铁去吸引橡皮筋上的磁铁，因为引力，橡皮筋会随着我们手上磁铁的移动而改变形状，又因为橡皮筋的张力让束缚在橡皮筋上的磁铁不会轻易吸附到我们手上的磁铁，这时橡皮筋的状态就可以看成是一条贝塞尔曲线，而我们手中的磁铁就是一个控制点，通过这个控制点我们“拉扯”橡皮筋的曲度。

二阶贝赛尔曲线的公式为：

![20141216155633823][]

同样的，Path中也提供了三阶贝塞尔曲线的方法cubicTo，按照上面我们的推论，三阶应该是有两个控制点才对对吧

三阶贝赛尔曲线：

![20141216155707332][]

公式：

![20141216155716578][]

高阶贝赛尔曲线在Path中没有对应的方法，对我们来说三阶也足够了，不过大家可以了解下，难得我在墙外找到如此动感的贝赛尔曲线高清无码动图

高阶贝塞尔曲线：

四阶：

![20141216155817984][]

五阶：

![20141216155848359][]

贝塞尔曲线通用公式：

![20141216155935687][]

2.2 quadTo(float x1, float y1, float x2, float y2)

上面说了一阶的就是一条线段，所以直接来看二阶。下面的方法可以让我们绘制“二阶”贝赛尔曲线。

> quadTo(float x1, float y1, float x2, float y2)

![20141216155508803][]

解释：其中quadTo的前两个参数为控制点的坐标，后两个参数为终点坐标，至于起点默认是画布的左上角。这里的p0就是起点，(x1,y1)就是中点P1，(x2,y2)就是末端点P2。

现在，我们使用它来绘制一条曲线：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            // 移动起点至[100,100]  
            mPath.moveTo(100, 100);  
              
            // 连接路径到点  
            mPath.quadTo(200, 200, 300, 100); 
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

效果：

![261231581891423.jpg][] 示意图： ![261235381114101.jpg][]

2.3 cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)

它可以绘制三阶贝赛尔曲线。

![20141216155707332][]

与quadTo类似，前四个参数表示两个控制点，最后两个参数表示终点。其实，(x1,y1)就是P1,(x2,y2)是P2，(x3,y3)是P3。

下面用代码来绘制一下：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            // 移动起点至[100,100]  
            mPath.moveTo(100, 100);  
              
            // 连接路径到点  
            mPath.cubicTo(200, 200, 300, 0, 400, 100);  
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

![261238535803684.jpg][] 示意图： ![261239263773532.jpg][]

三、画弧线

> arcTo (RectF oval, float startAngle, float sweepAngle)

是一个画弧线的方法，其实说白了就是从圆或椭圆上截取一部分而已。

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            // 移动起点至[100,100]  
            mPath.moveTo(100, 100);  
            // 连接路径到点  
            RectF oval = new RectF(100, 100, 200, 200);  
            mPath.arcTo(oval, 0, 90); 
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

上面的代码首先构建出一个矩形区域，这个区域内就是椭圆和园的区域，椭圆或园会内切于这个矩形区域。然后我们设置圆弧的其实角度和最终角度来截取圆弧。

![261249282684385.jpg][]

注意：使用Path生成的路径必定都是连贯的，虽然我们使用arcTo绘制的是一段弧但其最终都会与我们的起始点\[100,100\]连接。

如果你不想连怎么办？Path也提供了另一个重载方法：

> arcTo (RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo)

它会强制起点为绘制的起始点，而不是画布的左上角。我们来看看效果：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            // 移动起点至[100,100]  
            mPath.moveTo(100, 100);  
            // 连接路径到点  
            RectF oval = new RectF(100, 100, 200, 200);  
            mPath.arcTo(oval, 0, 90,true); 
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

![261252063612452.jpg][]

四、rXXXTo方法

Path中除了上面介绍的几个XXXTo方法外还有一套rXXXTo方法：

rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3)  
    rLineTo(float dx, float dy)  
    rMoveTo(float dx, float dy)  
    rQuadTo(float dx1, float dy1, float dx2, float dy2)

这一系列rXXXTo方法其实跟上面的那些XXXTo差不多的，唯一的不同是rXXXTo方法的参考坐标是相对的而XXXTo方法的参考坐标始终是参照画布原点坐标，什么意思呢？举个简单的例子：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);  
            mPaint.setStrokeWidth(5);
            
            // 实例化路径
            mPath = new Path();
            // 移动点至[100,100]  
            mPath.moveTo(100, 100);  
      
            // 连接路径到点  
            mPath.lineTo(200, 200); 
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

![261301050806437.jpg][]

这里的move和lineTo的坐标都是对于画布左上角(0,0)来说的，是一个绝对坐标。而我们换为mPath.rLineTo(200, 200); 后呢？

![261303356584268.jpg][]

是不是感觉线段长了很多，因为这里的(200,200)是相对于开始点(100,100)来说的，是相对坐标。如果换算成绝对坐标就是绘制一条(100,100)到(300,300)之间的线段。其实，这个前缀“r”也就是relative（相对）的简写！

五、addXXX方法

XXXTo方法可以连接Path中的曲线而Path提供的另一系列addXXX方法则可以让我们直接往Path中添加一些曲线，比如

> addArc(RectF oval, float startAngle, float sweepAngle)

它允许我们将一段弧形添加至Path，注意这里我用到了“添加”这个词汇，也就是说，通过addXXX方法添加到Path中的曲线是不会和上一次的曲线进行连接的：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(5);
    
            // 实例化路径
            mPath = new Path();
            // 移动点至[100,100]
            mPath.moveTo(100, 100);
    
            // 连接路径到点
            mPath.lineTo(200, 200);
            // 添加一条弧线到Path中
            RectF oval = new RectF(100, 100, 300, 400);
            mPath.addArc(oval, 0, 90);
    
            canvas.drawPath(mPath, mPaint);
        }

![复制代码][copycode.gif]

![261314589862874.jpg][]

如图和代码所示，虽然我们先绘制了由\[100,100\]到\[200,200\]的线段，但是在我们往Path中添加了一条弧线后该弧线并没与线段连接。

除了addArc，Path还提供了一系列的add方法：

addCircle(float x, float y, float radius, Path.Direction dir)  
    addOval(float left, float top, float right, float bottom, Path.Direction dir)  
    addRect(float left, float top, float right, float bottom, Path.Direction dir)  
    addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Path.Direction dir)

这些方法和addArc有很明显的区别，就是多了一个Path.Direction参数，其他呢都大同小异，除此之外不知道大家还发现没有，addArc是往Path中添加一段弧，说白了就是一条开放的曲线，而上述几种方法都是一个具体的图形，或者说是一条闭合的曲线，Path.Direction的意思就是标识这些闭合曲线的闭合方向。Path.Direction只有两个常量值CCW和CW分别表示逆时针方向闭合和顺时针方向闭合。

那什么叫闭合方向呢？光说大家一定会蒙，有学习激情的童鞋看到后肯定会马上敲代码试验一下两者的区别，可是不管你如何改，单独地在一条闭合曲线上你是看不出所谓闭合方向的区别的。为了弄懂它，我们在path上绘制一些文字来说明最后参数的意义：

![复制代码][copycode.gif]

@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);
    
            // 实例化路径
            mPath = new Path();
            // 移动起点至[100,100]
            mPath.moveTo(100, 100);
    
            // 添加一条弧线到Path中  
            RectF oval = new RectF(100, 100, 300, 400);  
            mPath.addOval(oval, Path.Direction.CW); 
    
            canvas.drawPath(mPath, mPaint);
            
            mPaint.setTextSize(50);
            // 绘制路径上的文字  
            canvas.drawTextOnPath("123456789", mPath, 0, 0, mPaint); 
        }

![复制代码][copycode.gif]

![261321287994484.jpg][]

如果我们换作：

mPath.addOval(oval, Path.Direction.CCW);

![261323079559924.jpg][]

绘制的文字全都沿着Path跑到闭合曲线的“内部”了。

文章中大部分内容参考自：http://blog.csdn.net/aigestudio/article/details/41960507，本人对原文有少量的删减。本文记录在此，仅供学习之用，感谢原作者分享。

From AigeStudio（http://blog.csdn.net/aigestudio）Power by Aige ，感谢原作者。

[copycode.gif]: /images/20220608/41e0d32a4a374690973a00ff4d89eff9.png
[261211147051047.jpg]: /images/20220608/3fcf63c592b941b29cac3aa91c9985d1.png
[261217055498129.jpg]: /images/20220608/3d711063d2a74cb1940781b0bdb8b616.png
[261214417363164.jpg]: /images/20220608/d34fafe67fc54988b888bec48db4877a.png
[261222134082143.jpg]: /images/20220608/3951a3a144b346da933a4ce0ced75c5e.png
[20141216154914760]: /images/20220608/2f95f903665f40c2b90d87e422b36a39.png
[Center]: /images/20220608/4e1fef08e6564feabda4964c607f7311.png
[20141216155508803]: /images/20220608/55c7f551ef6a4064bab5906ef2ffad40.png
[20141216155633823]: /images/20220608/8c4d5c08d02f437ea74ebaa6226b3c53.png
[20141216155707332]: /images/20220608/4d625ece5c8b4d77a8aee635de3a249e.png
[20141216155716578]: /images/20220608/d2f7ede8f3784fd5911f49419a903062.png
[20141216155817984]: /images/20220608/7eab5f5bfea1489f88ac605da5245a8b.png
[20141216155848359]: /images/20220608/addc72bcdc8647c69c30eeba2df9e23a.png
[20141216155935687]: /images/20220608/7232ede1f2df4813be8f06dd78359956.png
[261231581891423.jpg]: http://images.cnitblog.com/blog/651487/201502/261231581891423.jpg
[261235381114101.jpg]: /images/20220608/1c0fa4c1cc7e4432a8a604aa0d98d1cf.png
[261238535803684.jpg]: http://images.cnitblog.com/blog/651487/201502/261238535803684.jpg
[261239263773532.jpg]: /images/20220608/bce9cd8f4fb842369a8f74b5e93967c3.png
[261249282684385.jpg]: /images/20220608/d16cabb455864e169d6d736e0f2b618e.png
[261252063612452.jpg]: /images/20220608/19f7cc3da1544904a0ec80aeeda43866.png
[261301050806437.jpg]: /images/20220608/98ebbfb9b3134af494807c0972f73cec.png
[261303356584268.jpg]: /images/20220608/ab90a6cbd9334f989a29b54ab63154ca.png
[261314589862874.jpg]: /images/20220608/4108c4dd02f04f78a783180b9598adc8.png
[261321287994484.jpg]: /images/20220608/dc7e1d0934b4412e933d6298c752e313.png
[261323079559924.jpg]: /images/20220608/a4d1bcdafb7845b0a897b37e974a5be9.png