【Android 自定义 View】Path 的基本使用

已于 2023-02-06 11:39:44 修改
阅读量655 收藏 3
点赞数
分类专栏： Android -- 自定义View 文章标签： android Path
于 2020-01-07 22:13:33 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/duoduo_11011/article/details/103882719
版权

文章目录

简介

本文会了解到 path (路径)这个 Canvas 中的神器，有了这个神器，就能创造出更多炫酷的东东。

使用 Path 不仅能够绘制简单图形，也可以绘制这些比较复杂的图形。另外，根据路径绘制文本和剪裁画布都会用到 Path 。

常用方法
在这里插入图片描述
在这里插入图片描述

Path 使用方法详解

1. moveTo、 setLastPoint、 lineTo 和 close

首先创建画笔：

Paint mPaint = new Paint();             // 创建画笔
mPaint.setColor(Color.BLACK);           // 画笔颜色 - 黑色
mPaint.setStyle(Paint.Style.STROKE);    // 填充模式 - 描边
mPaint.setStrokeWidth(10);              // 边框宽度 - 10
  • lineTo
    public void lineTo (float x, float y)
    lineTo 很简单，只有一个方法，作用也很容易理解，就是一条线。
canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心(宽高数据在onSizeChanged中获取)

Path path = new Path();                     // 创建Path

path.lineTo(200, 200);                      // lineTo
path.lineTo(200,0);

canvas.drawPath(path, mPaint);              // 绘制Path

在这里插入图片描述

第一次由于之前没有过操作，所以默认点就是坐标原点O，结果就是坐标原点O到A(200,200)之间连直线(用蓝色圈1标注)。

第二次lineTo的时候，由于上次的结束位置是A(200,200),所以就是A(200,200)到B(200,0)之间的连线(用蓝色圈2标注)。

  • moveTo
    方法预览
// moveTo
public void moveTo (float x, float y)

示例

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();                     // 创建Path

path.lineTo(200, 200);                      // lineTo

path.moveTo(200,100);                       // moveTo

path.lineTo(200,0);                         // lineTo

canvas.drawPath(path, mPaint);              // 绘制Path

在这里插入图片描述

moveTo 只改变下次操作的起点，在执行完第一次 LineTo 的时候，本来的默认点位置是A(200,200),但是 moveTo将其改变成为了C(200,100),所以在第二次调用 lineTo 的时候就是连接C(200,100) 到 B(200,0)之间的直线(用蓝色圈2标注)。

  • setLastPoint
    方法预览：
// setLastPoint
public void setLastPoint (float dx, float dy)

示例

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();                     // 创建Path

path.lineTo(200, 200);                      // lineTo

path.setLastPoint(200,100);                 // setLastPoint

path.lineTo(200,0);                         // lineTo

canvas.drawPath(path, mPaint);              // 绘制Path

在这里插入图片描述

setLastPoint 是重置上一次操作的最后一个点，在执行完第一次的lineTo的时候，最后一个点是A(200,200),而 setLastPoint 更改最后一个点为C(200,100),所以在实际执行的时候，第一次的lineTo就不是从原点O到A(200,200)的连线了，而变成了从原点O到C(200,100)之间的连线了。
在执行完第一次 lineTo 和 setLastPoint后，最后一个点的位置是C(200,100),所以在第二次调用lineTo的时候就是C(200,100) 到 B(200,0)之间的连线(用蓝色圈2标注)。

  • close
    方法预览
public void close ()

close方法用于连接当前最后一个点和最初的一个点(如果两个点不重合的话)，最终形成一个封闭的图形。

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();                     // 创建Path

path.lineTo(200, 200);                      // lineTo

path.lineTo(200,0);                         // lineTo

path.close();                               // close

canvas.drawPath(path, mPaint);              // 绘制Path

在这里插入图片描述
注意：close的作用是封闭路径，与连接当前最后一个点和第一个点并不等价。如果连接了最后一个点和第一个点仍然无法形成封闭图形，则close什么 也不做。

2. addXxx与arcTo

  • 基本形状
    方法预览
// 圆形
public void addCircle (float x, float y, float radius, Path.Direction dir)
// 椭圆
public void addOval (RectF oval, Path.Direction dir)
// 矩形
public void addRect (float left, float top, float right, float bottom, Path.Direction dir)
public void addRect (RectF rect, Path.Direction dir)
// 圆角矩形
public void addRoundRect (RectF rect, float[] radii, Path.Direction dir)
public void addRoundRect (RectF rect, float rx, float ry, Path.Direction dir)

Path.Direction : 方向，趋势。
在这里插入图片描述
示例

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心

Path path = new Path();

path.addRect(-200,-200,200,200, Path.Direction.CCW);

path.setLastPoint(-300,300);                // <-- 重置最后一个点的位置

canvas.drawPath(path,mPaint);

在这里插入图片描述

3. Path

方法预览

// 第二类(Path)
// path
public void addPath (Path src)
public void addPath (Path src, float dx, float dy)
public void addPath (Path src, Matrix matrix)

示例：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();
Path src = new Path();

path.addRect(-200,-200,200,200, Path.Direction.CW);
src.addCircle(0,0,100, Path.Direction.CW);

path.addPath(src,0,200);

mPaint.setColor(Color.BLACK);           // 绘制合并后的路径
canvas.drawPath(path,mPaint);

在这里插入图片描述

4. addArc与arcTo

方法预览

// addArc
public void addArc (RectF oval, float startAngle, float sweepAngle)
// arcTo
public void arcTo (RectF oval, float startAngle, float sweepAngle)
public void arcTo (RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo)

参数说明：

  • oval 圆弧的外切矩形。
  • startAngle 开始角度
  • sweepAngle 扫过角度(-360 <= sweepAngle <360)
  • forceMoveTo 是否强制使用 MoveTo

两者区别：
在这里插入图片描述
示例

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();
path.lineTo(100,100);

RectF oval = new RectF(0,0,300,300);

path.addArc(oval,0,270);
// path.arcTo(oval,0,270,true);             // <-- 和上面一句作用等价

canvas.drawPath(path,mPaint);

在这里插入图片描述

5. isEmpty、 isRect、isConvex、 set 和 offset

  • isEmpty
    方法预览：public boolean isEmpty ()
    判断path中是否包含内容。
Path path = new Path();
Log.e("1",path.isEmpty()+"");

path.lineTo(100,100);
Log.e("2",path.isEmpty()+"");

输出结果:

true
false
  • isRect
    方法预览：public boolean isRect (RectF rect)

判断 path 是否是一个矩形，如果是一个矩形的话，会将矩形的信息存放进参数 rect 中。

示例

path.lineTo(0,400);
path.lineTo(400,400);
path.lineTo(400,0);
path.lineTo(0,0);

RectF rect = new RectF();
boolean b = path.isRect(rect);
Log.e("Rect","isRect:"+b+"| left:"+rect.left+"| top:"+rect.top+"| right:"+rect.right+"| bottom:"+rect.bottom);

输出结果：

 isRect:true| left:0.0| top:0.0| right:400.0| bottom:400.0
  • set
    方法预览：public void set (Path src)
canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();                     // path添加一个矩形
path.addRect(-200,-200,200,200, Path.Direction.CW);

Path src = new Path();                      // src添加一个圆
src.addCircle(0,0,100, Path.Direction.CW);

path.set(src);                              // 大致相当于 path = src;

canvas.drawPath(path,mPaint);

在这里插入图片描述

  • offset
    方法预览
public void offset (float dx, float dy)
public void offset (float dx, float dy, Path dst)

这个的作用也很简单，就是对path进行一段平移，它和Canvas中的translate作用很像，但Canvas作用于整个画布，而path的offset只作用于当前path。

示例

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴

Path path = new Path();                     // path中添加一个圆形(圆心在坐标原点)
path.addCircle(0,0,100, Path.Direction.CW);

Path dst = new Path();                      // dst中添加一个矩形
dst.addRect(-200,-200,200,200, Path.Direction.CW);

path.offset(300,0,dst);                     // 平移

canvas.drawPath(path,mPaint);               // 绘制path

mPaint.setColor(Color.BLUE);                // 更改画笔颜色

canvas.drawPath(dst,mPaint);                // 绘制dst

在这里插入图片描述

练手项目 – 雷达图

Kevin-Dev
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
安卓自定义View进阶-Path基本操作
GcsSloop
03-02 1万+
在上一篇 Canvas 之图片文字中我们了解了如何使用 Canvas 中绘制图片文字，结合前几篇文章，Canvas 的基本操作已经差不多完结了，然而 Canvas 不仅仅具有这些基本的操作，还可以更加炫酷，本次会了解到 path(路径)这个 Canvas 中的神器，有了这个神器，就能创造出更多炫 (zhuang) 酷(B)的东东了。
自定义View，和Canvas(画布)，Paint(画笔)，Path(路径)的用法
N_Y_S的博客
08-05 622
怎么自定义控件，Canvas画布，Paint画笔，Path路径的使用
Android Path 使用 解析
热门推荐
w124374860的专栏
04-11 3万+
最近看了一些关于android path的使用，这里做个总结，方便以后查阅   Path主要用于绘制复杂的图形轮廓，比如折线，圆弧以及各种复杂图案 方法列表：   reset()                            lineTo(float x, float y) moveTo(float x, float y) close() path.addArc(oval...
Android自定义View，绘制Path相交，使用Canvas.clipPath代替Path.op
bingma1995的博客
11-12 1685
如果只是单纯的绘制两个Path交集的话，不妨采用Canvas.clipPath的方法。用其中一个path当作clipPath，其中一个drawPath，即可画出想要的效果。
自定义View之Path类
.天天向上.
01-14 235
1. 简介 定义： 路径，即无数个点连接起来的线 作用：设置绘制的顺序&区域 Path 只用于描述顺序&区域，单使用Path无法产生效果 应用场景：绘制复杂图形 Path类封装了由直线和曲线（2,3次贝塞尔曲线）构成的几何路径 2. 基础 2.1 开放路径与闭合路径的区别 3.具体使用 3.1 对象创建 // 使用Path首先要new一个Pat...
Android 自定义View——Path的使用
To_be_Designer
09-17 2828
Path, 轨迹，路径。Path可以沿着多个点绘制一条路径， 在Canvas中可以根据Path绘制不同的图形。Path我们在使用Path绘制路径，一般要使用到以下几个方法：moveTo(float x, float y)： 　　移动到（x, y）坐标点。绘制路径时，路径的第一个点一般我们通过moveTo()来决定，否则默认为(0, 0)点。 lineTo(float x, float y)：
Android自定义view Path 的高级用法之搜索按钮动画
08-30
"Android自定义View Path高级用法之搜索按钮动画" Android自定义View Path的高级用法之搜索按钮动画是Android开发中的一种高级技术，主要用于实现搜索按钮的动画效果。今天，我们将探讨Path的高级用法，特别是...
Android自定义View图片按Path运动和旋转
08-28
通过本文，我们了解了 Android 自定义 View 图片按 Path 运动和旋转的实现方法和原理，并了解了 Path、PathMeasure 和 ValueAnimator 的使用。同时，我们也了解了如何使用 Matrix 来实现图片的平移旋转操作，以便...
android自定义view用path画长方形
08-19
Android 自定义 View 用 Path 画长方形 Android 自定义 View 是 Android 开发中的一种常用技巧，通过自定义 View，可以实现各种自定义控件，并且可以满足不同的业务需求。在本文中，我们将主要介绍如何使用 Path 画...
Android自定义View绘图实现拖影动画
01-04
前几天在“Android绘图之渐隐动画”一文中通过画线实现了渐隐动画，但里面有个问题，画笔较粗（大于1）时线段之间会有裂隙，我又改进了一下。这次效果好多了。 先看效果吧： 然后我们来说说基本的做法：  •根据...
Android笔记 自定义View（十）：Path使用之常用方法
u013135085的博客
10-28 836
目录   前言 一、Path简介 二、Path的使用 1、构造方法 2、常用方法 2.1、lineTo、rLineTo 2.2、moveTo、rMoveTo、setLastPoint 2.3、绘制常规图形 2.4、绘制圆弧 2.5、闭合Path 三、PathEffect 3.1、CornerPathEffect 3.2、PathDashPathEffect 3.3、D...
Android中Path类的使用
大数据
04-05 1323
Path类是绘图里的一个常用类之一，会按照指定的路径绘制图形，如果将画笔的Style设定为Stroke，则会看到由一条条线组成图形。然而这些图形 看上去往往很单调，而且有的时候我们也需要绘制虚线，或者由一些小的图形来沿着一定的路径组成图形，API接口里其实提供了这个功能，使用 PathEffect就可以完成这些比较特殊一些的效果。首先还是看一下PathEffect这个类： 这个类本身
Android Path的使用
Notzuonotdied的博客
08-10 635
方法解析 reset()方法：清除path设置的所有属性 lineTo(float x, float y)方法：ineTo(float x, float y)方法用于从当前轮廓点绘制一条线段到x，y点 moveTo(float x, float y)方法：path的moveTo方法将起始轮廓点移至x，y坐标点，默认情况为0,0点 close()方法:回到初始点形成封闭的曲线 addArc(RectF
view中path的使用
ITxiaobing123的博客
11-25 474
Path mPath = new Path(); 1，Path.Direction.CCW和 Path.Direction.CW Path.Direction.CW表示顺时针 Path.Direction.CCW表示逆时针2 lineTo moveTo 在lineTo表示轨迹运动点 moveTo表示轨迹运动起点 在path画图中，如果不设置moveTo系统默认在（0，0） 设置mo
Android中绘制简单几何图形和路径Path
weixin_33853794的博客
02-07 515
背景 我的博客：http://zhangsunyucong.top 马上就到2018年过年了，然后我又刚好有兴致，就来玩玩Android中的简单几何图形的绘制和使用Path类来绘制路径。 Path和Canvas 在Android中，和我们平时画图一样是有画笔和画布的，Path是画笔，Canvas是画布。与画的样式属性有关，如大小或者颜色等，是由Path来完成的；与画的形状，即画什么东西是由Can...
Android自定义View进阶——绘制异形图+onMeasure宽高约束
递归安卓
07-31 2308
前言 玩过自定义View的小伙伴都知道，在View的绘制过程中，有一个类叫做Path，Path可以帮助我们实现很多自定义形状的View（总有奇葩View等着我们），特别是配合xfermode属性来使用的时候。进入正题，本篇文章有两个重点： 1、Path类中那几个常用的API及效果展示 2、顺带简单的讲解一下onMeasure方法宽高约束   1.moveTo moveTo表示将绘制...
初学Android,图形图像之使用Path类(二十六)
lee576的专栏
08-14 2万+
Path类可以预先在View上将N个点连成一条"路径",然后调用Canvas的drawPath(path,paint)即可沿着路径绘制图形Android还为路径绘制提供了PathEffect来定义绘制效果,PathEffect包含如下子类ComposePathEffectCornerPathEffectDashPathEffectDiscretePathEffectPathDashPathEffe
android下Path,Canvas，Paint画图工具类的使用-----很好的例子
上帝派来的逗比
04-12 1577
先说下个人对这个三个类的理解： 1.Canvas  意为： 画布   也就是说，你想要画的图形 要画在 我这张布上， 毫无疑问。  该类直接提供了一些常见的图形  画法的 方法， 比如圆形，正方形，长方形，椭圆形。  这些方法可以直接画出这些图形。 但是要画比较复杂的图形，就需要用到Path了。 2.Path  意为：  路线，路径   也就是画线用的。 看下面的 详细解释
Android开发之Path类使用详解，自绘各种各样的图形！
weixin_30301449的博客
09-10 364
玩过自定义View的小伙伴都知道，在View的绘制过程中，有一个类叫做Path，Path可以帮助我们实现很多自定义形状的View，特别是配合xfermode属性来使用的时候。OK，那我们今天就来看看Path中那几个常用的API。1.moveTomoveTo表示将绘制点移动到某一个坐标处，该方法并不会进行绘制，主要是用来移动画笔。默认情况下起始坐标位于（0，0）点，我们可以手动调整默认位置。2....
android 自定义View 雷达
最新发布
05-25
Android自定义View雷达图，也称为蜘蛛网图或者星型图，是一种很常见的数据可视化方式。在这种图中，多个数据维度会以不同的角度展示，而每个维度的数据则会以不同的长度表示。这样一来，我们就可以通过一个图形快速地了解多个数据维度的情况。下面是一个简单的实现。 首先，我们需要在 XML 中定义自定义 View 的布局： ``` <com.example.radarview.RadarView android:id="@+id/radar_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" /> ``` 接着，在 Java 代码中实现 View 的绘制逻辑： ``` public class RadarView extends View { private int mCount = 6; // 雷达图维度 private float mRadius; // 雷达图半径 private float mAngle; // 雷达图每个维度的角度 private Paint mRadarPaint; // 雷达图画笔 private Paint mValuePaint; // 数据画笔 private String[] mTitles = {"A", "B", "C", "D", "E", "F"}; // 维度名称 private double[] mValues = {5, 4, 3, 2, 5, 1}; // 数据值 public RadarView(Context context) { this(context, null); } public RadarView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public RadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 初始化雷达图画笔 mRadarPaint = new Paint(); mRadarPaint.setStyle(Paint.Style.STROKE); // 初始化数据画笔 mValuePaint = new Paint(); mValuePaint.setStyle(Paint.Style.FILL_AND_STROKE); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); int size = Math.min(width, height); mRadius = size / 2f * 0.8f; mAngle = (float) (Math.PI * 2 / mCount); setMeasuredDimension(size, size); } @Override protected void onDraw(Canvas canvas) { // 绘制雷达图 drawRadar(canvas); // 绘制数据区域 drawValue(canvas); } private void drawRadar(Canvas canvas) { Path path = new Path(); float r = mRadius / (mCount - 1); // 计算多边形边长 for (int i = 0; i < mCount; i++) { float currentR = r * i + r; // 计算当前多边形的半径 path.reset(); for (int j = 0; j < mCount; j++) { if (j == 0) { path.moveTo(getMeasuredWidth() / 2f + currentR, getMeasuredHeight() / 2f); } else { float x = (float) (getMeasuredWidth() / 2f + currentR * Math.cos(mAngle * j)); float y = (float) (getMeasuredHeight() / 2f + currentR * Math.sin(mAngle * j)); path.lineTo(x, y); } } path.close(); // 闭合路径 canvas.drawPath(path, mRadarPaint); } // 绘制连接线 for (int i = 0; i < mCount; i++) { float x = (float) (getMeasuredWidth() / 2f + mRadius * Math.cos(mAngle * i)); float y = (float) (getMeasuredHeight() / 2f + mRadius * Math.sin(mAngle * i)); canvas.drawLine(getMeasuredWidth() / 2f, getMeasuredHeight() / 2f, x, y, mRadarPaint); } // 绘制维度名称 for (int i = 0; i < mCount; i++) { float x = (float) (getMeasuredWidth() / 2f + (mRadius + 20) * Math.cos(mAngle * i)); float y = (float) (getMeasuredHeight() / 2f + (mRadius + 20) * Math.sin(mAngle * i)); canvas.drawText(mTitles[i], x, y, mValuePaint); } } private void drawValue(Canvas canvas) { Path path = new Path(); for (int i = 0; i < mCount; i++) { float percent = (float) mValues[i] / 6f; // 计算数据值占比 float x = (float) (getMeasuredWidth() / 2f + mRadius * Math.cos(mAngle * i) * percent); float y = (float) (getMeasuredHeight() / 2f + mRadius * Math.sin(mAngle * i) * percent); if (i == 0) { path.moveTo(x, getMeasuredHeight() / 2f); } else { path.lineTo(x, y); } // 绘制数据点 canvas.drawCircle(x, y, 5, mValuePaint); } path.close(); // 闭合路径 mValuePaint.setStyle(Paint.Style.FILL); mValuePaint.setAlpha(127); canvas.drawPath(path, mValuePaint); } } ``` 在这个实现中，我们首先在 onMeasure 方法中计算出雷达图的半径和每个维度之间的角度。然后，在 onDraw 方法中先绘制雷达图，再绘制数据区域。在绘制雷达图时，我们通过计算每个多边形的边长和半径，以及每个维度的角度，来绘制多个同心多边形。然后，我们绘制多边形之间的连线和维度名称。在绘制数据区域时，我们通过计算每个数据值占比来绘制数据点，并使用 Path 来绘制闭合的数据区域。最后，我们再将数据区域填充上颜色。 这样，一个简单的雷达图就完成了。当然，这只是一个基础的实现，你可以根据自己的需求来进行更多的定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kevin-Dev

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值