linglongxin24/AndroidNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
GcsSloop
2016-08-25 00:53:50 +08:00
parent d319959dbf
commit 4f7316eaaa
1 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
CustomView/Advance/[02]Canvas_BasicGraphics.md
View File

@@ -19,18 +19,18 @@ Canvas我们可以称之为画布，能够在上面绘制各种东西，是安
## 二.Canvas的常用操作速查表 ## 二.Canvas的常用操作速查表
操作类型 | 相关API | 备注 | 操作类型 | 相关API | 备注 |
--- | --- | --- | ---------- | ---------------------------------------- | ---------------------------------------- |
绘制颜色 | drawColor, drawRGB, drawARGB | 使用单一颜色填充整个画布 | 绘制颜色 | drawColor, drawRGB, drawARGB | 使用单一颜色填充整个画布 |
绘制基本形状 | drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc | 依次为 点、线、矩形、圆角矩形、椭圆、圆、圆弧 | 绘制基本形状 | drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc | 依次为 点、线、矩形、圆角矩形、椭圆、圆、圆弧 |
绘制图片 | drawBitmap, drawPicture | 绘制位图和图片 | 绘制图片 | drawBitmap, drawPicture | 绘制位图和图片 |
绘制文本 | drawText, drawPosText, drawTextOnPath | 依次为 绘制文字、绘制文字时指定每个文字位置、根据路径绘制文字 | 绘制文本 | drawText, drawPosText, drawTextOnPath | 依次为 绘制文字、绘制文字时指定每个文字位置、根据路径绘制文字 |
绘制路径 | drawPath | 绘制路径，绘制贝塞尔曲线时也需要用到该函数 | 绘制路径 | drawPath | 绘制路径，绘制贝塞尔曲线时也需要用到该函数 |
顶点操作 | drawVertices, drawBitmapMesh | 通过对顶点操作可以使图像形变，drawVertices直接对画布作用、 drawBitmapMesh只对绘制的Bitmap作用 | 顶点操作 | drawVertices, drawBitmapMesh | 通过对顶点操作可以使图像形变，drawVertices直接对画布作用、 drawBitmapMesh只对绘制的Bitmap作用 |
画布剪裁 | clipPath, clipRect | 设置画布的显示区域 | 画布剪裁 | clipPath, clipRect | 设置画布的显示区域 |
画布快照 | save, restore, saveLayerXxx, restoreToCount, getSaveCount | 依次为 保存当前状态、 回滚到上一次保存的状态、 保存图层状态、 回滚到指定状态、 获取保存次数 | 画布快照 | save, restore, saveLayerXxx, restoreToCount, getSaveCount | 依次为 保存当前状态、 回滚到上一次保存的状态、 保存图层状态、 回滚到指定状态、 获取保存次数 |
画布变换 | translate, scale, rotate, skew | 依次为 位移、缩放、 旋转、错切 | 画布变换 | translate, scale, rotate, skew | 依次为 位移、缩放、 旋转、错切 |
Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放等操作的都是图像矩阵Matrix，只不过Matrix比较难以理解和使用，故封装了一些常用的方法。 | Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放等操作的都是图像矩阵Matrix，只不过Matrix比较难以理解和使用，故封装了一些常用的方法。 |
> PS： Canvas常用方法在上面表格中已经全部列出了，当然还存在一些其他的方法未列出，具体可以参考官方文档 [Canvas](http://developer.android.com/reference/android/graphics/Canvas.html) > PS： Canvas常用方法在上面表格中已经全部列出了，当然还存在一些其他的方法未列出，具体可以参考官方文档 [Canvas](http://developer.android.com/reference/android/graphics/Canvas.html)
@@ -49,7 +49,7 @@ Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放
``` ```
<img src="http://ww4.sinaimg.cn/large/005Xtdi2jw1f2742437w3j30u01hcjrq.jpg" width = "300" /> <img src="http://ww4.sinaimg.cn/large/005Xtdi2jw1f2742437w3j30u01hcjrq.jpg" width = "300" />
> 关于颜色的更多资料请参考[基础篇_颜色](https://github.com/GcsSloop/AndroidNote/blob/master/CustomView%2FBase%2F%5B3%5DColor.md) > 关于颜色的更多资料请参考[基础篇_颜色](https://github.com/GcsSloop/AndroidNote/blob/master/CustomView%2FBase%2F%5B3%5DColor.md)
****** ******
@@ -94,7 +94,6 @@ Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放
<img src="http://ww1.sinaimg.cn/large/005Xtdi2jw1f2743rkifnj30u01hc74n.jpg" width = "300" /> <img src="http://ww1.sinaimg.cn/large/005Xtdi2jw1f2743rkifnj30u01hc74n.jpg" width = "300" />
****** ******
### 绘制直线： ### 绘制直线：
@@ -109,7 +108,6 @@ Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放
<img src="http://ww2.sinaimg.cn/large/005Xtdi2jw1f2745k83ybj30u01hcq3d.jpg" width = "300" /> <img src="http://ww2.sinaimg.cn/large/005Xtdi2jw1f2745k83ybj30u01hcq3d.jpg" width = "300" />
****** ******
### 绘制矩形： ### 绘制矩形：
@@ -191,7 +189,6 @@ Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放
其中灰色部分是我们所选定的矩形，而里面的圆角矩形则变成了一个椭圆，<b>实际上在rx为宽度的一半，ry为高度的一半时，刚好是一个椭圆，通过上面我们分析的原理推算一下就能得到，而当rx大于宽度的一半，ry大于高度的一半时，实际上是无法计算出圆弧的，所以drawRoundRect对大于该数值的参数进行了限制(修正)，凡是大于一半的参数均按照一半来处理。</b> 其中灰色部分是我们所选定的矩形，而里面的圆角矩形则变成了一个椭圆，<b>实际上在rx为宽度的一半，ry为高度的一半时，刚好是一个椭圆，通过上面我们分析的原理推算一下就能得到，而当rx大于宽度的一半，ry大于高度的一半时，实际上是无法计算出圆弧的，所以drawRoundRect对大于该数值的参数进行了限制(修正)，凡是大于一半的参数均按照一半来处理。</b>
****** ******
### 绘制椭圆： ### 绘制椭圆：
@@ -358,12 +355,12 @@ FILL_AND_STROKE //描边加填充
> 画布操作详细内容会在下一篇文章中讲解, 不是本文重点，但以下示例中可能会用到，所以此处简要介绍一下。 > 画布操作详细内容会在下一篇文章中讲解, 不是本文重点，但以下示例中可能会用到，所以此处简要介绍一下。
相关操作 | 简要介绍 | 相关操作 | 简要介绍 |
----------|------------------------ | --------- | ----------- |
save | 保存当前画布状态 | save | 保存当前画布状态 |
restore | 回滚到上一次保存的状态 | restore | 回滚到上一次保存的状态 |
translate | 相对于当前位置位移 | translate | 相对于当前位置位移 |
rotate | 旋转 | rotate | 旋转 |
### 制作一个饼状图 ### 制作一个饼状图
@@ -409,20 +406,20 @@ PS: 以上省略了get set方法
### 自定义View： ### 自定义View：
先按照自定义View流程梳理一遍(确定各个步骤应该做的事情)： 先按照自定义View流程梳理一遍(确定各个步骤应该做的事情)：
步骤 | 关键字 | 作用 | 步骤 | 关键字 | 作用 |
:---:|-------------- | ----------------------- | :--: | ------------- | --------------------- |
1 | 构造函数 | 初始化(初始化画笔Paint) | 1 | 构造函数 | 初始化(初始化画笔Paint) |
2 | onMeasure | 测量View的大小(暂时不用关心) | 2 | onMeasure | 测量View的大小(暂时不用关心) |
3 | onSizeChanged | 确定View大小(记录当前View的宽高) | 3 | onSizeChanged | 确定View大小(记录当前View的宽高) |
4 | onLayout | 确定子View布局(无子View，不关心) | 4 | onLayout | 确定子View布局(无子View，不关心) |
5 | onDraw | 实际绘制内容(绘制饼状图) | 5 | onDraw | 实际绘制内容(绘制饼状图) |
6 | 提供接口 | 提供接口(提供设置数据的接口) | 6 | 提供接口 | 提供接口(提供设置数据的接口) |
代码如下： 代码如下：
``` java ``` java
public class PieView extends View { public class PieView extends View {
// 颜色表 // 颜色表(注意: 此处定义颜色使用的是ARGB，带Alpha通道的)
private int[] mColors = {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080, private int[] mColors = {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080,
0xFFE6B800, 0xFF7CFC00}; 0xFFE6B800, 0xFF7CFC00};
// 饼状图初始绘制角度 // 饼状图初始绘制角度
@@ -524,7 +521,7 @@ public class PieView extends View {
> **PS: 这个饼状图并没有添加百分比等数据，仅作为示例使用。** > **PS: 这个饼状图并没有添加百分比等数据，仅作为示例使用。**
## 总结： ## 总结：
其实自定义View只要按照流程一步步的走，也是比较容易的。不过里面也有不少坑，这些坑还是自己踩过印象比较深，建议大家不要直接copy源码，自己手打体验一下。 其实自定义View只要按照流程一步步的走，也是比较容易的。不过里面也有不少坑，这些坑还是自己踩过印象比较深，建议大家不要直接copy源码，自己手打体验一下。
## About Me ## About Me