Path
程序员文章站
2022-03-10 09:16:18
...
作用:
可以利用一些基本的绘制函数,组合成复杂的图形,保存到path变量里,之后再由canvas.drawPath(path, paint)来进行绘制。
共有参数:
Direction dir:
路径绘制的方向,有两种:顺时针 (CW clockwise) 和逆时针 (CCW counter-clockwise) 。对于普通情况,这个参数填 CW 还是填 CCW 没有影响。它只是在需要填充图形 (Paint.Style 为 FILL 或FILL_AND_STROKE) ,并且图形出现自相交时,用于判断填充范围的。
添加圆形
path.addCircle(300, 300, 200, Path.Direction.CW);
参数:
x, y, radius 这三个参数是圆的基本信息,最后一个参数 dir 是画圆的路径的方向。
示例:
path.addCircle(300, 300, 200, Path.Direction.CW);
canvas.drawPath(path, paint);
解读:
X从0向右偏移300为X轴,Y从0向下偏移300为Y轴,X+Y轴=圆心的位置,200为圆的半径,Path.Direction.CW是画圆的路径的方向。
示例图:
添加椭圆
path.addOval(50, 50, 350, 200, Path.Direction.CW);
示例:
path.addOval(50, 50, 350, 200, Path.Direction.CW);
canvas.drawPath(path, paint);
解读:
以XY(0,0)为起点,X从0向右偏移50为新起点,Y从0向下偏移50为新起点,X从0向右偏移350为终点,Y从0向下偏移200为终点,新起点和终点所得的区域,就是椭圆区域。
示例图:
添加矩形
path.addRect(100, 100, 500, 500, Path.Direction.CW);
解读:
以XY(0,0)为起点,X从0向右偏移100为新起点,Y从0向下偏移100为新起点,X从0向右偏移500为终点,Y从0向下偏移500为终点,新起点和终点所得的区域,就是矩形区域。
示例图:
添加圆角矩形
path.addRoundRect(100,100,500,300,50,50, Path.Direction.CW);
解读:
以XY(0,0)为起点,X从0向右偏移100为新起点,Y从0向下偏移100为新起点,X从0向右偏移500为终点,Y从0向下偏移300为终点,新起点和终点所得的区域,就是矩形区域,rx的50是圆角的横向半径,ry的50是圆角的纵向半径。
示例图:
画线
path.lineTo(100, 100);
path.rLineTo(100, 0);
示例:
paint.setStyle(Paint.Style.STROKE);
path.lineTo(100, 100);
path.rLineTo(100, 0);
path.lineTo(100, 200);
canvas.drawPath(path, paint);
解读:
lineTo(x,y) x,y的计算方式是绝对坐标(0,0开始计算),绘画的起点是上一次绘制的结束坐标;
rLineTo(x,y) x,y的计算方式是相对坐标(上一次绘制结束的xy开始计算),绘画的起点是上一次绘制的结束坐标;
path.lineTo(100, 100);
以XY(0,0)开始计算XY,绘画的起点为0,0(因为第一次画,所以起始值是0,0),X从0向右偏移100点为X的终点,Y从0向下偏移100点为Y的终点,X的终点+Y的终点形成绘画终点,从绘画起点(0,0)到绘画终点(100,100)就是绘制路径,该方法所得的效果就是在起点和终点的端点上画一条线。
path.rLineTo(100, 0);
以XY(100,100)开始计算XY,绘画的起点为100,100(因为上一次绘制的结束坐标在100,100),X从100向右偏移100点为X的终点,Y从100向下偏移0点为Y的终点,X的终点+Y的终点形成绘画的终点,从绘画起点(100,100)到绘画终点(200,100)就是绘制路径,该方法所得的效果就是在起点和终点的端点上画一条线。
path.lineTo(100, 200);
以XY(0,0)开始计算XY,绘画的起点为200,100(因为上一次绘制的结束坐标在200,100),X从0向右偏移100点为X的终点,Y从0向下偏移200点为Y的终点,X的终点+Y的终点形成绘画终点,从绘画起点(200,100)到绘画终点(100,200)就是绘制路径,该方法所得的效果就是在起点和终点的端点上画一条线。
示例图:
移动绘画的起始位置
path.moveTo(200, 100);
示例:
paint.setStyle(Paint.Style.STROKE);
path.lineTo(100, 100);
path.moveTo(200, 100);
path.lineTo(200, 0);
canvas.drawPath(path, paint);
解读:
先画一条线,然后移动绘画的起始位置到200,100(x,y的计算方式是绝对坐标0,0开始计算)再从绘画起点(200,100)到绘画终点(200,0)的起点和终点的端点上画一条线。
示例图:
在圆形的区域里画弧形
path.arcTo(100, 100, 300, 300, -90, 90, true);
示例:
paint.setStyle(Paint.Style.STROKE);
path.lineTo(100, 100);
path.arcTo(100, 100, 300, 300, -90, 90, true);
canvas.drawPath(path, paint);
解读:
先画一条线,然后以XY(0,0)为起点,X从0向右偏移100为新起点,Y从0向下偏移100为新起点,X从0向右偏移300为终点,Y从0向下偏移300为终点,新起点和终点所得的区域,就是圆形区域,-90是起始绘画位置(X轴从正右方向为0度,旋转-90度的位置开始绘画),90是绘画的角度,true为强制移动到弧形起点(无痕迹)开始绘画,false为一条直线连接到弧形起点(有痕迹)再开始绘画。
多种写法:
path.addArc(100, 100, 300, 300, -90, 90);
解读:
只是一个直接使用了 forceMoveTo = true 的简化版 arcTo()
示例图:
闭环
path.close();
示例:
paint.setStyle(Style.STROKE);
path.moveTo(100, 100);
path.lineTo(200, 100);
path.lineTo(150, 150);
path.close();
解读:
先把起始绘画点移动到100,100,然后X从0向右偏移200点为X的终点,Y从0向下偏移100点为Y的终点,X的终点+Y的终点形成绘画终点,从绘画起点(100,100)到绘画终点(200,100)画一条线;然后X从0向右偏移150点为X的终点,Y从0向下偏移150点为Y的终点,X的终点+Y的终点形成绘画终点,从上次绘画结束的位置到绘画终点(150,150)画一条线;调用close形成闭环(从当前绘画终点150,150到绘画起点100,100绘制一条直线)。
示例图:
添加另一个 Path
path.addPath(Path path);
推荐阅读
-
set_include_path用法
-
Failed to load keystore type JKS with path tomcat.keystore due to D:/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tm
-
Failed to load keystore type JKS with path tomcat.keystore due to D:/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tm
-
IntelliJ IDEA的build path设置方法
-
$_SERVER['PATH']值的有关问题
-
为什么phpinfo()输出的环境变量PATH值,和小弟我本机设置的不一样呢?
-
cookie中的path与domain属性详解
-
关于 npm 安装angular报错‘code EEXIST‘,ERR! path C:UsersAdministratorAppDataRoaming pm ode_modules
-
Falling back to java on path. This behavior is deprecated
-
nginx中path模式配置示例