Android的path解析

最新推荐文章于 2024-04-08 10:22:31 发布

因人而异

最新推荐文章于 2024-04-08 10:22:31 发布

阅读量1.0k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： UI绘制 android 文章标签： android 绘图

本文链接：https://blog.youkuaiyun.com/HardWorkingAnt/article/details/66475283

android 同时被 2 个专栏收录

68 篇文章

订阅专栏

UI绘制

11 篇文章

订阅专栏

本文详细解析了Android中Path的几个关键方法：moveTo、lineTo、quadTo、cubicTo和arcTo。介绍了它们的功能和使用场景，并通过实例展示了如何绘制直线、贝塞尔曲线和弧线。同时，对比了arcTo与addArc的区别，帮助理解Android图形绘制原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文只对Android中moveTo、lineTo、quadTo、cubicTo、arcTo等方法做解析，只是作为简单的学习总结。

moveTo

moveTo(float x, float y)方法：

path的moveTo方法将起始轮廓点移至x，y坐标点，默认情况为0,0点，moveTo 不会进行绘制，只用于移动移动画笔。

简单来说，就是设置绘制的起始点，当然，现在我们设置也没有用，因为没有绘制，看不到效果。

lineTo

lineTo 用于进行直线绘制。
lineTo(float x, float y)方法用于从当前轮廓点绘制一条线段到x，y点。

添加一条从一点到指定点(x,y)的线，如果没有移至，则自动设置为(0,0)。

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setColor(Color.BLUE); // 设置画笔颜色
        paint.setStyle(Paint.Style.STROKE); // 设置画笔的样式
        paint.setStrokeWidth(10); // 设置笔画的宽度
        paint.setAntiAlias(true); // 设置抗锯齿
        Path p = new Path();
        p.lineTo(300, 300);
        canvas.drawPath(p, paint); // 绘制
    }

我自定义了一个view，重写onDraw()方法，绘制了一条线，添加到布局文件中，就如下图：

我们没用moveTo方法，所以默认从(0,0)开始绘制，这次我们加入moveTo:

p.moveTo(100, 100);

得到的结果为：

结果与我们想的一样。但我们还要记住一点，绘制点比起始点大才可以在指定的位置绘制图形。

quadTo

quadTo 用于绘制圆滑曲线，即贝塞尔曲线。

quadTo(float x1, float y1, float x2, float y2)方法：

以当前路径结束点为开始点，(x1,y1)为控制点，(x2,y2)为结束点画一条二次贝塞尔曲线。控制点，顾名思义就是能控制住的点，到底控制住的是什么呢，控制住的这个地区的坐标。

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

我们修改上面的代码，也利用moveTo来协助控制：

p.moveTo(100, 500);
p.quadTo(300, 100, 600, 500);
canvas.drawPath(p, mPaint);

效果如下图：

cubicTo

cubicTo 同样是用来实现贝塞尔曲线的。

mPath.cubicTo(x1, y1, x2, y2, x3, y3) (x1,y1) 为控制点，(x2,y2)为控制点，(x3,y3) 为结束点。

那么，cubicTo 和 quadTo 有什么不一样呢？

官方是这么说的：

Same as cubicTo, but the coordinates are considered relative to the
current point on this contour.

就是说cubicTo多一个控制点来描绘轮廓。

如果我们想要像得到用quadTo一样效果的图片，同样可以利用moveTo方法：

p.moveTo(100, 500);
p.cubicTo(100, 500, 300, 100, 600, 500);

把绘制的起始点用作第一个控制点，也可以实现。

而如果不用起始点做控制点，删掉moveTo，则以(0,0)为起点，(100,500)和(300,100)为控制点绘制贝塞尔曲线：

arcTo

arcTo 用于绘制弧线（实际是截取圆或椭圆的一部分）。

mPath.arcTo(ovalRectF, startAngle, sweepAngle) , ovalRectF为椭圆的矩形，startAngle 为开始角度，sweepAngle 为结束角度。

arcTo和addArc的区别:
1. addArc可以直接加入一段椭圆弧。使用arcTo还需要使用moveTo指定当前点的坐标。
2. arcTo如果当前点坐标和曲线的起始点不是同一个点的话，还会自动添加一条直线补齐路径。

这个弧线是怎么来的？先画一个椭圆，然后再在这个椭圆上面截取一部分图形。这个图形自然就是一个弧线了。那么这个椭圆是怎么确定的呢？这就是这个rectF参数所起的作用了。

如图所示，给出这个矩形后，系统就可以算出这个矩形的中心，然后以这个矩开的中心画一个椭圆。

得到这个椭圆后，然后就是截取一部分线了，就得到最终的弧线。这一部分是怎么截取的呢？

这就是后面两个参数共同来表达的。startAngle这个参数说的是开始的角度。这个好理解，但哪里是0度线呢，又是向哪个方向旋转是正角度数呢？

图上所示的红线就是0度线。
startAngle是开始度数，那sweepAngle是指的什么呢？
sweepAngle指的是旋转的度数，也就是以startAngle开始，旋转多少度，如果sweepAngle是正数，那么就是按顺时针方向旋转，如果是负数就是按逆时针方向旋转。

知道弧线是如何绘制出的，现在我们用例子来分析一下：

Rect rect = new Rect(100, 100, 300, 250);
p.arcTo(new RectF(rect), 0, 90);
canvas.drawPath(p, paint);

根据我们上面的分析可知，截取的弧线是从0度线为起点开始的，但如果我们加上moveTo，改变当前点，就会与曲线起始点加一条直线。

p.moveTo(0,0);

这样就会变成上图所示。

结束语：本文仅用来学习记录，参考查阅。