开发者社区> sorrower> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android绘制(二):来用Path绘出想要的图形吧!

简介: Android绘制(一):来用shape绘出想要的图形吧! 目录 前言 绘制线 绘制图形 绘制弧 绘制文字 组合 贝塞尔曲线 最后 前言 之前有一篇用shape进行绘制的, 但是那个偏向静态, path结合属性动画可以动起来哦~ path是什么...
+关注继续查看

Android绘制(一):来用shape绘出想要的图形吧!


目录

  • 前言
  • 绘制线
  • 绘制图形
  • 绘制弧
  • 绘制文字
  • 组合
  • 贝塞尔曲线
  • 最后

前言

之前有一篇用shape进行绘制的, 但是那个偏向静态, path结合属性动画可以动起来哦~
path是什么? 来看看官方的介绍:

The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and cubic curves. It can be drawn with canvas.drawPath(path, paint), either filled or stroked (based on the paint's Style), or it can be used for clipping or to draw text on a path.

咕果翻译一下就是:

Path类封装了由直线段,二次曲线和三次曲线组成的复合(多个轮廓)几何路径。 它可以使用canvas.drawPath(path,paint)绘制,填充或描边(基于绘制的样式),或者它可以用于剪切或在路径上绘制文本。

可能你更加一脸懵b了, 没事我们来看方法.


绘制线

来看段代码和效果图. 首先用moveTo移动点, lineTo绘制线某个位置, rLineTo在当前基础上加上某数值. 然后用close闭环.

mPath.moveTo(400, 400);
mPath.lineTo(600, 400);
mPath.lineTo(600, 600);
mPath.rLineTo(-200, 0);
mPath.close();
绘制线

但是就是不想好好画矩形, 皮一下. setLastPoint将上一个变化lineTo(600, 600)的作用完全覆盖了, 导致了结果出现了变化.

mPath.moveTo(400, 400);
mPath.lineTo(600, 400);
mPath.lineTo(600, 600);
mPath.setLastPoint(400, 800);
mPath.rLineTo(-200, 0);
mPath.close();
修改点位置

绘制图形

我们用同一个矩形来绘制矩形, 椭圆以及圆角矩形. 观察下圆的位置, 你会发现, 绘制圆的x和y是指圆心, 而不是左上角.

mPath.addCircle(200, 400, 100, Path.Direction.CCW);

// 绘制矩形
RectF rect = new RectF(200, 400, 800, 600);
mPath.addRect(rect, Path.Direction.CW);

// 绘制椭圆
mPath.addOval(rect, Path.Direction.CW);

// 绘制圆角矩形
mPath.addRoundRect(rect, 60, 60, Path.Direction.CW);
绘制图形

绘制弧

绘制弧也是基于矩形, 万物基于矩形(手动滑稽). addArc的后两个参数就是度数, 从0到300. arcTo最后有个boolean类型参数, 设置成true见图一, 设置成false见图二. 看出来了吧, 就是moveTo和lineTo的差别, 说专业点就是是否要forceMoveTo.

RectF rect = new RectF(200, 400, 800, 600);
RectF rect2 = new RectF(200, 600, 800, 800);
mPath.addRect(rect, Path.Direction.CW);
mPath.addRect(rect2, Path.Direction.CW);

mPath.addArc(rect, 0, 300);
mPath.arcTo(rect2, 0, 90, true);
true
false

绘制文字

我们顺时针(Path.Direction.CW)绘制圆, 写在上面的文字也是顺时针. 逆时针(Path.Direction.CCW)绘制圆, 文字也是逆时针.

闭合方向 标志
顺时针 Path.Direction.CW
逆时针 Path.Direction.CCW
mPath.addCircle(400, 400, 300, Path.Direction.CW);

mPaint.setStrokeWidth(4f);
mPaint.setTextSize(40f);
canvas.drawTextOnPath(getResources().getString(R.string.test_str),
        mPath, 0, 0, mPaint);
顺时针
mPath.addCircle(400, 400, 300, Path.Direction.CCW);

mPaint.setStrokeWidth(4f);
mPaint.setTextSize(40f);
canvas.drawTextOnPath(getResources().getString(R.string.test_str),
        mPath, 
逆时针

组合

想将线或者图形组合起来, op方法满足你. 第二个参数是关键, 有

  • Path.Op.DIFFERENCE
  • Path.Op.INTERSECT
  • Path.Op.REVERSE_DIFFERENCE
  • Path.Op.UNION
  • Path.Op.XOR
标志 说明
DIFFERENCE 从第一个路径中减去第二个路径
INTERSECT 两条路径相交部分
REVERSE_DIFFERENCE 从第二条路径中减去第一条路径
UNION 联结两条路径
XOR 独立两条路径

我们按这个排列顺序来看.

mPath.addCircle(400, 400, 200, Path.Direction.CCW);
mPath2.addRect(500, 300, 700, 500, Path.Direction.CCW);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    mPath.op(mPath2, Path.Op.DIFFERENCE);
}
Path.Op.DIFFERENCE
Path.Op.INTERSECT
Path.Op.REVERSE_DIFFERENCE
Path.Op.UNION

最后一个想看出效果需要将画笔改成FILL或者FILL_AND_STROKE. 这个可以理解成用并集减去交集剩下部分. 但是最好还是从Path来理解而不是从集合的角度. 图二是STROKE下效果.

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
Path.Op.XOR和FILL画笔
Path.Op.XOR和STROKE画笔

贝塞尔曲线

  • 单点控
    moveTo是第一个点, 如果不moveTo, 默认(0, 0). (500, 0)是控制点, (600, 400)是结束点.
mPath.moveTo(400, 400);
mPath.quadTo(500, 0, 600, 400);
单点控
  • 双点控
    (600, 800)是第二点控.
mPath.moveTo(400, 400);
mPath.cubicTo(500, 0, 600, 800, 700, 400);
双点控

最后

你可以看出Path是很有潜力的. 喜欢记得点赞哦, 有意见或者建议评论区见, 暗中关注我也是可以的~


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android绘制(一):来用shape绘出想要的图形吧!
目录 前言 shape绘制 矩形 椭圆 线 环 用shape绘制SeekBar 最后 前言 在没有UI设计师的时候, 或者是想简单看下效果的时候, 用shape进行快速绘制是极好的! 官方文档.
784 0
Android官方开发文档Training系列课程中文版:OpenGL绘图之图形定义
原文地址:http://android.xsoftlab.net/training/graphics/opengl/shapes.html 使用OpenGL绘制图形的第一步就是要定义一个图形。
575 0
Android图形绘制基础(一)
mainActiviry如下: package com.cn; import android.app.Activity; import android.
565 0
Android图形绘制基础(二)
mainActivity如下: package com.cn; import android.os.Bundle; import android.
485 0
关于Android图形系统的一些事实真相
现在网上满天飞的各类关于Android图像渲染的水文实在让我不爽,下面给大家一些关于Android硬件渲染的事实真相,硬件加速并非大家想的那么完美,而我们也一直在改进! 1. Android 一直在使用硬件加速。
582 0
Android Studio进行APP设计开发之矢量图及XML文件转换
Android Studio进行APP设计开发之矢量图及XML文件转换
0 0
Android studio开发APP时设置更改启动时的主界面程序
Android studio开发APP时设置更改启动时的主界面程序
0 0
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
0 0
+关注
sorrower
磨碎的纳豆.
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
蚂蚁聚宝Android秒级编译—— Freeline
立即下载
Android插件化:从入门到放弃
立即下载