Android 自定义View Canvas绘制几何图形基础

项目需求:本项目中为自己的毕设项目,其中有一个模块需要通过APP进行码垛设计,并将码垛的结果发送给机械手的控制器。该模块的需求具体如下:

1. 可以从物料库中拖动项目的物料模块到码盘。

2. 用户将对应的图形模块在码盘上进行排列组合,APP将最终确定的组合的各图形的坐标进行保存

3. 可以增加码垛层数

4. 可以自定义生成不同大小的图形

现有的Android组件无法满足这一需求,在Android中只能进行自定义View设计。于是展开了对自定义View的学习。

自定义View的流程

1.构造函数 View初始化

2.onMeasure 测量View大小

3.onSizeChanged 确定View大小

4.onLayout  确定子View布局位置

5.onDraw 实际绘制内容

6.提供接口 监听View状态

1 Android Graphics 图形库

作为android的图形库提供了以下几个类

1.Drawable

通用的图形对象,

  用于装载常用格式的图像,可以是 PNG,JPG 这样的图像,也可以是前面学的 13 种 Drawable 类型的可视化对象. 

  可以理解为放画用的---画框

2.位图:Bitmap 来保持(hold)那些像素

  可以简单的理解为 画架

  先把画放到上面,然后可以进行一些处理,比如获取图像文件信息,做旋转切割,放大缩小等操作

3.画布:Canvas 来响应画画(draw)的调用(并将其写入 bitmap)

  就是可以上面作画(绘制),可以用 Paint(画笔) ,来画各种形状或者写字,又可以用 Path(路径) 来绘制多个点,然后连接成各种图形

4.画笔:paint 描述画画的颜色和样式等

Matrix(矩阵)

  用于图形特效处理的,颜色矩阵(ColorMatrix),还有使用 Matrix 进行图像的平移,缩放,旋转,倾斜等

  “颜料“:drawing primitive,比如矩形、路径、文字、位图等其他元素

!!! Canvas(画布),Paint(画笔),Path(路径) 是 android.graphics 接口类下的三个绘图 API

1.1 Paint 画笔

Paint (画笔) 用于设置绘制风格,如 线宽(笔触粗细),颜色,透明度和填充风格

获得一个 Paint 对象实例很简单

Paint paint = new Paint();

图形的形状由Canvas确定 当绘制出来的颜色效果由画笔Paint确定

mPaint.setStyle(Paint.Style.FILL); //设置画笔模式为填充

画笔有三种模式

STROKE                //描边

FILL                  //填充

FILL_AND_STROKE      //描边加填充

1.2 Path 路径

Path(路径) 简单点说就是描点,连线

创建了 Path 的实例后,可以调用 Canvas 的 drawPath(path,paint) 将图形绘制出来

Path (路径) 的常用方法如下

更高级的效果可以使用 PathEffect 类,常用方法如下

1.3 Canvas 画布

android.graphics.Canvas类提供了很多“画“的方法,让这块画布具有了丰富多彩的画画能力。比如:画点、线、矩形、椭圆、圆、文字等等。下面的例子演示了这些方法的使用。

创建Canvas画布的方法

创建有一个空的画布,可以使用 setBitmap() 方法来设置绘制具体的画布

Canvasc=Canvas();

以 bitmap对象创建一个画布,将内容都绘制在 bitmap 上bitmap 不能 null

Canvasc=Canvas(Bitmapbitmap);

绘制方法

drawXXX()方法族 ::以一定的坐标值在当前画图区域画图,另外图层会叠加, 即后面绘画的图层会覆盖前面绘画的图层

1.clipXXX() 方法族:在当前的画图区域裁剪 (clip)出一个新的画图区域,这个画图区域就是 canvas 对象的当前画图区域了

比如:clipRect(new Rect()),那么该矩形区域就是 canvas 的当前画图区域

2.save() 和 restore() 方法

!!!注意

save() 和 restore() 要配对使用( restore 可以比 save 少,但不能多),若restore 调用次数比 save 多,会报错

getXXX 方法族 获取Canvas相关的一些值

translate() 平移

translate(floatdx,floatdy)

平移就是将画布的坐标原点向左右方向移动 x,向上下方向移动 y

canvas 默认坐标原点位置为左上角 (0,0)

scale 缩放

voidscale(floatsx,floatsy)finalvoidscale(floatsx,floatsy,floatpx,floatpy)

对画布进行缩放

参数说明

rotate(float degrees) 旋转,angle 指旋转的角度,顺时针旋转

voidrotate(floatdegrees)finalvoidrotate(floatdegrees,floatpx,floatpy)

围绕坐标原点或指定坐标旋转 degrees 度,值为正顺时针

参数说明

skew 倾斜

skew(floatsx,floatsy)

倾斜一定的角度

参数说明

两个参数都是 tan 值,比如要在 x 轴方向上倾斜 60 度,那么 sx 为

tan(60) = 根号3=1.732

Canvas 坐标系

Canvas 以左上角为原点,向右为 X 轴正方向,向下为 Y 轴正方向

Layer 图层

画布Canvas给开发者提供了Layer支持。Layer是按照栈结构进行管理。

当开发者带哦用Save方法时候,会保存当前Canvas的状态作为一个Layer 添加到Canvas栈。

而当我们调用 restore() 方法的时候,会恢复之前 Canvas 的状态,而此时 Canvas 的图层栈 会弹出栈顶的那个 Layer,后继的 Layer 来到栈顶,此时的 Canvas 回复到此栈顶时保存的 Canvas 状态

简单说就是 save()往栈压入一个 Layer,restore()弹出栈顶的一个Layer,这个Layer代表Canvas的 状态! 也就是说可以 save() 多次,也可以 restore() 多次,但是 restore() 的调用次数 不能大于** save()否则会引发错误

OnDraw

创建画笔

绘制常见的几何图形实例

绘制点

drawPoint(floatx,floaty, Paint paint)//画点,参数一水平x轴,参数二垂直y轴,第三个参数为Paint对象。

绘制直线

绘制直线需要两个点,初始点和结束点,同样绘制直线也可以绘制一条或者绘制一组:

canvas.drawLine(300,300,500,600,mPaint);// 在坐标(300,300)(500,600)之间绘制一条直线canvas.drawLines(newfloat[]{// 绘制一组线 每四数字(两个点的坐标)确定一条线100,200,200,200,    100,300,200,300},mPaint);

绘制矩形

确定一个矩形一般需要四个数据 :对角线的两个点的坐标值。通常我们次啊用左上角和右下角的两个点的坐标值

关于绘制矩形,Canvas提供了三种重载方法,第一种就是提供四个数值(矩形左上角和右下角两个点的坐标)来确定一个矩形进行绘制。 其余两种是先将矩形封装为Rect或RectF(实际上仍然是用两个坐标点来确定的矩形),然后传递给Canvas绘制,如下:

// 第一种canvas.drawRect(100,100,800,400,mPaint);// 第二种Rect rect =newRect(100,100,800,400);canvas.drawRect(rect,mPaint);// 第三种RectF rectF =newRectF(100,100,800,400);canvas.drawRect(rectF,mPaint)

绘制圆角矩形

// 第一种RectF rectF =newRectF(100,100,800,400);canvas.drawRoundRect(rectF,30,30,mPaint);// 第二种canvas.drawRoundRect(100,100,800,400,30,30,mPaint);

绘制圆

canvas.drawCircle(500,500,400,mPaint);// 绘制一个圆心坐标在(500,500),半径为400 的圆。

绘制椭圆

drawCircle(floatcx,floatcy,floatradius,Paint paint)// 绘制圆,参数一是中心点的x轴,参数二是中心点的y轴,参数三是半径,参数四是paint对象;

绘制圆弧

drawArc(RectF oval,float startAngle,float sweepAngle,boolean useCenter,Paint paint)//画弧参数一是RectF对象,一个矩形区域椭圆形的界限用于定义在形状、大小、电弧,参数二是起始角(度)在电弧的开始,    参数三扫描角(度)开始顺时针测量的,参数四是如果这是真的话,包括椭圆中心的电弧,并关闭它

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342