From 4f7316eaaa8f0ed63d25c39f70ffd3767913265d Mon Sep 17 00:00:00 2001 From: GcsSloop Date: Thu, 25 Aug 2016 00:53:50 +0800 Subject: [PATCH] Update --- .../Advance/[02]Canvas_BasicGraphics.md | 61 +++++++++---------- 1 file changed, 29 insertions(+), 32 deletions(-) diff --git a/CustomView/Advance/[02]Canvas_BasicGraphics.md b/CustomView/Advance/[02]Canvas_BasicGraphics.md index 9fafb16..bd60ceb 100644 --- a/CustomView/Advance/[02]Canvas_BasicGraphics.md +++ b/CustomView/Advance/[02]Canvas_BasicGraphics.md @@ -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 | 实际画布的位移，缩放 ``` - + > 关于颜色的更多资料请参考[基础篇_颜色](https://github.com/GcsSloop/AndroidNote/blob/master/CustomView%2FBase%2F%5B3%5DColor.md) ****** @@ -94,7 +94,6 @@ Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放 - ****** ### 绘制直线： @@ -109,7 +108,6 @@ Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放 - ****** ### 绘制矩形： @@ -191,7 +189,6 @@ Matrix(矩阵) | getMatrix, setMatrix, concat | 实际画布的位移，缩放 其中灰色部分是我们所选定的矩形，而里面的圆角矩形则变成了一个椭圆，实际上在rx为宽度的一半，ry为高度的一半时，刚好是一个椭圆，通过上面我们分析的原理推算一下就能得到，而当rx大于宽度的一半，ry大于高度的一半时，实际上是无法计算出圆弧的，所以drawRoundRect对大于该数值的参数进行了限制(修正)，凡是大于一半的参数均按照一半来处理。 - ****** ### 绘制椭圆： @@ -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