Update
This commit is contained in:
GcsSloop
@@ -19,18 +19,18 @@ Canvas我们可以称之为画布，能够在上面绘制各种东西，是安
|
||||
|
||||
## 二.Canvas的常用操作速查表
|
||||
|
||||
操作类型 | 相关API | 备注
|
||||
--- | --- | ---
|
||||
绘制颜色 | drawColor, drawRGB, drawARGB | 使用单一颜色填充整个画布
|
||||
绘制基本形状 | drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc | 依次为 点、线、矩形、圆角矩形、椭圆、圆、圆弧
|
||||
绘制图片 | drawBitmap, drawPicture | 绘制位图和图片
|
||||
绘制文本 | drawText, drawPosText, drawTextOnPath | 依次为 绘制文字、绘制文字时指定每个文字位置、根据路径绘制文字
|
||||
绘制路径 | drawPath | 绘制路径，绘制贝塞尔曲线时也需要用到该函数
|
||||
顶点操作 | drawVertices, drawBitmapMesh | 通过对顶点操作可以使图像形变，drawVertices直接对画布作用、 drawBitmapMesh只对绘制的Bitmap作用
|
||||
画布剪裁 | clipPath, clipRect | 设置画布的显示区域
|
||||
画布快照 | save, restore, saveLayerXxx, restoreToCount, getSaveCount | 依次为 保存当前状态、 回滚到上一次保存的状态、 保存图层状态、 回滚到指定状态、 获取保存次数
|
||||
画布变换 | translate, scale, rotate, skew | 依次为 位移、缩放、 旋转、错切
|
||||
Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放等操作的都是图像矩阵Matrix，只不过Matrix比较难以理解和使用，故封装了一些常用的方法。
|
||||
| 操作类型 | 相关API | 备注 |
|
||||
| ---------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| 绘制颜色 | drawColor, drawRGB, drawARGB | 使用单一颜色填充整个画布 |
|
||||
| 绘制基本形状 | drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc | 依次为 点、线、矩形、圆角矩形、椭圆、圆、圆弧 |
|
||||
| 绘制图片 | drawBitmap, drawPicture | 绘制位图和图片 |
|
||||
| 绘制文本 | drawText, drawPosText, drawTextOnPath | 依次为 绘制文字、绘制文字时指定每个文字位置、根据路径绘制文字 |
|
||||
| 绘制路径 | drawPath | 绘制路径，绘制贝塞尔曲线时也需要用到该函数 |
|
||||
| 顶点操作 | drawVertices, drawBitmapMesh | 通过对顶点操作可以使图像形变，drawVertices直接对画布作用、 drawBitmapMesh只对绘制的Bitmap作用 |
|
||||
| 画布剪裁 | clipPath, clipRect | 设置画布的显示区域 |
|
||||
| 画布快照 | save, restore, saveLayerXxx, restoreToCount, getSaveCount | 依次为 保存当前状态、 回滚到上一次保存的状态、 保存图层状态、 回滚到指定状态、 获取保存次数 |
|
||||
| 画布变换 | translate, scale, rotate, skew | 依次为 位移、缩放、 旋转、错切 |
|
||||
| Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放等操作的都是图像矩阵Matrix，只不过Matrix比较难以理解和使用，故封装了一些常用的方法。 |
|
||||
|
||||
> 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" />
|
||||
|
||||
|
||||
> 关于颜色的更多资料请参考[基础篇_颜色](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" />
|
||||
|
||||
|
||||
******
|
||||
|
||||
### 绘制直线：
|
||||
@@ -109,7 +108,6 @@ Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
******
|
||||
|
||||
### 绘制椭圆：
|
||||
@@ -358,12 +355,12 @@ FILL_AND_STROKE //描边加填充
|
||||
|
||||
> 画布操作详细内容会在下一篇文章中讲解, 不是本文重点，但以下示例中可能会用到，所以此处简要介绍一下。
|
||||
|
||||
相关操作 | 简要介绍
|
||||
----------|------------------------
|
||||
save | 保存当前画布状态
|
||||
restore | 回滚到上一次保存的状态
|
||||
translate | 相对于当前位置位移
|
||||
rotate | 旋转
|
||||
| 相关操作 | 简要介绍 |
|
||||
| --------- | ----------- |
|
||||
| save | 保存当前画布状态 |
|
||||
| restore | 回滚到上一次保存的状态 |
|
||||
| translate | 相对于当前位置位移 |
|
||||
| rotate | 旋转 |
|
||||
|
||||
### 制作一个饼状图
|
||||
|
||||
@@ -409,20 +406,20 @@ PS: 以上省略了get set方法
|
||||
### 自定义View：
|
||||
先按照自定义View流程梳理一遍(确定各个步骤应该做的事情)：
|
||||
|
||||
步骤 | 关键字 | 作用
|
||||
:---:|-------------- | -----------------------
|
||||
1 | 构造函数 | 初始化(初始化画笔Paint)
|
||||
2 | onMeasure | 测量View的大小(暂时不用关心)
|
||||
3 | onSizeChanged | 确定View大小(记录当前View的宽高)
|
||||
4 | onLayout | 确定子View布局(无子View，不关心)
|
||||
5 | onDraw | 实际绘制内容(绘制饼状图)
|
||||
6 | 提供接口 | 提供接口(提供设置数据的接口)
|
||||
| 步骤 | 关键字 | 作用 |
|
||||
| :--: | ------------- | --------------------- |
|
||||
| 1 | 构造函数 | 初始化(初始化画笔Paint) |
|
||||
| 2 | onMeasure | 测量View的大小(暂时不用关心) |
|
||||
| 3 | onSizeChanged | 确定View大小(记录当前View的宽高) |
|
||||
| 4 | onLayout | 确定子View布局(无子View，不关心) |
|
||||
| 5 | onDraw | 实际绘制内容(绘制饼状图) |
|
||||
| 6 | 提供接口 | 提供接口(提供设置数据的接口) |
|
||||
|
||||
代码如下：
|
||||
|
||||
``` java
|
||||
public class PieView extends View {
|
||||
// 颜色表
|
||||
// 颜色表(注意: 此处定义颜色使用的是ARGB，带Alpha通道的)
|
||||
private int[] mColors = {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080,
|
||||
0xFFE6B800, 0xFF7CFC00};
|
||||
// 饼状图初始绘制角度
|
||||
@@ -524,7 +521,7 @@ public class PieView extends View {
|
||||
> **PS: 这个饼状图并没有添加百分比等数据，仅作为示例使用。**
|
||||
|
||||
## 总结：
|
||||
|
||||
|
||||
其实自定义View只要按照流程一步步的走，也是比较容易的。不过里面也有不少坑，这些坑还是自己踩过印象比较深，建议大家不要直接copy源码，自己手打体验一下。
|
||||
|
||||
## About Me
|
||||
|
||||
Reference in New Issue
Block a user