尊重原创，欢迎转载，转载请注明： FROM GA_studio http://blog.csdn.net/tianjian4592
前面说Canvas大致可以分为三类：
1. save、restore 等与层的保存和回滚相关的方法；
2. scale、rotate、clipXXX 等对画布进行操作的方法；
3. drawXXX 等一系列绘画相关的方法；
前面主要讲了drawBitmap方法，并举了一个星球浮动的栗子，在那个例子中，星球有大有小，需要移动，有时候可能需求上还需要旋转或错切，有了这些需求，我们就需要使用到与Canvas相关的translate、scale、rotate、skew这几个方法，平移、缩放、旋转、错切,这四个词听起来是如此的熟悉，我们在做一些基本动画的时候经常会与这几个词打交道，现在我们一个个看下当把这几个家伙和Canvas（画布）结合能产生什么效果;
当然在看之前得先明确两个基本概念：
1.Canvas 的左上角是（0，0）；
2.基于左上角往右 X 为正，往下 Y 为正，反之为负；
一、canvas.translate() － 画布的平移：
首先咱们在画布上画一个400 X 400 红色的矩形
canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);
此时整个画布的左上角出现了一个红色的矩形（为了更清楚，蓝色打个底）该矩形大小为400 X 400 ，效果如下：
接下来我们canvas.translate( )玩玩
-
@
Override
-
protected void onDraw(Canvas canvas) {
-
super
.onDraw(
canvas);
-
canvas
.drawColor(
Color
.BLUE);
-
canvas
.translate(100, 100);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
}
看下效果：
此时可以看到，虽然是绘制同样的矩形，但矩形在画布上的位置已经向右和向下各移动了100px；
既然如此，这个时候如果我们再将canvas 平移（translate）（100，100），再绘制一个同样的矩形会出现什么情况呢？会与之前的矩形重叠吗？咱们拭目以待：-
@
Override
-
protected void onDraw(Canvas canvas) {
-
super
.onDraw(
canvas);
-
canvas
.drawColor(
Color
.BLUE);
-
canvas
.translate(100, 100);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
canvas
.translate(100, 100);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
}
从效果上看，两次translate 进行了叠加，绘制第二个矩形的时候画布已经偏移了（200，200）；
好了，了解到这里，咱们利用canvas.translate( )一起来做个小栗子，绘制一个生活中比较常用的刻度尺；
咱们先从网上找个用于参考的刻度尺图片：
从图上看，刻度尺的元素有：外框、刻度线（不同的数值刻度线长短不一）、数字
所以我们所要做的就是对上面的元素在onDraw里分别绘制：
-
@Override
-
protected void onDraw(Canvas canvas) {
-
super.onDraw(canvas);
-
// 绘制外框
-
drawOuter(canvas);
-
// 绘制刻度线
-
drawLines(canvas);
-
// 绘制数字
-
drawNumbers(canvas);
-
}
有了上面的分析，咱们一个一个来，先绘制外框，外框也就是一个矩形，只需要确定边框的位置和大小，然后使用canvas.drawRect( )绘制即可：
咱们先定义几个需要的数据，为了屏幕适配，数据均为dp：
-
// 刻度尺高度
-
private
static
final
int DIVIDING_RULE_HEIGHT =
70;
-
// 距离左右间
-
private
static
final
int DIVIDING_RULE_MARGIN_LEFT_RIGHT =
10;
-
-
// 第一条线距离边框距离
-
private
static
final
int FIRST_LINE_MARGIN =
5;
-
// 打算绘制的厘米数
-
private
static
final
int DEFAULT_COUNT =
9;
-
private void initData() {
-
mDividRuleHeight = (
int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
-
DIVIDING_RULE_HEIGHT, mResources.getDisplayMetrics());
-
mHalfRuleHeight = mDividRuleHeight /
2;
-
-
mDividRuleLeftMargin = (
int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
-
DIVIDING_RULE_MARGIN_LEFT_RIGHT, mResources.getDisplayMetrics());
-
mFirstLineMargin = (
int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
-
FIRST_LINE_MARGIN, mResources.getDisplayMetrics());
-
-
}
-
mOutRect =
new Rect(mDividRuleLeftMargin, top, mTotalWidth - mDividRuleLeftMargin,
-
mRuleBottom);
接下来看刻度线的绘制，根据厘米可以计算出中间的格数，根据厘米占用屏幕宽度和所占格数可以计算出每一格所占屏幕宽度：
有了每一格所占宽度，我们只需要在绘制刻度线的时候不断将画布右移对应宽度即可：
-
/**
-
* 绘制刻度线
-
* @param canvas
-
*/
-
private void drawLines(Canvas canvas) {
-
canvas.save();
-
canvas.translate(mLineStartX,
0);
-
int top = mMaxLineTop;
-
for (
int i =
0; i <= DEFAULT_COUNT *
10; i++) {
-
if (i %
10 ==
0) {
-
top = mMaxLineTop;
-
}
else
if (i %
5 ==
0) {
-
top = mMiddleLineTop;
-
}
else {
-
top = mMinLineTop;
-
}
-
-
canvas.drawLine(
0, mRuleBottom,
0, top, mLinePaint);
-
canvas.translate(mLineInterval,
0);
-
-
}
-
canvas.restore();
-
-
}
此时绘制出的刻度尺效果为：
此时刻度尺的基本样子就出来了，对应文字大家有兴趣可以自己加上；
俗话说，条条大路通罗马，我们除了使用canvas.translate ，还能不能使用别的方式进行实现呢，答案当然是可以，比如在绘制的时候根据for循环里的 i 值也可以直接计算出每一根刻度线的位置，然后直接进行绘制，相比之下，这两种方式的优劣大家也可以自行比较一下，好了，canvas.translate() 就说这么多；
二、canvas.scale( ) － 画布的缩放：
关于scale，android 提供了以下两个接口：
-
/**
-
* Preconcat the current matrix with the specified scale.
-
*
-
* @param sx The amount to scale in X
-
* @param sy The amount to scale in Y
-
*/
-
public native void scale(float sx, float sy);
-
-
/**
-
* Preconcat the current matrix with the specified scale.
-
*
-
* @param sx The amount to scale in X
-
* @param sy The amount to scale in Y
-
* @param px The x-coord for the pivot point (unchanged by the scale)
-
* @param py The y-coord for the pivot point (unchanged by the scale)
-
*/
-
public final void scale(float sx, float sy, float px, float py) {
-
translate(px, py);
-
scale(sx, sy);
-
translate(-px, -py);
-
}
-
@
Override
-
protected void onDraw(Canvas canvas) {
-
super
.onDraw(
canvas);
-
canvas
.drawColor(
Color
.BLUE);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
canvas
.scale(0
.5f, 0
.5f);
-
mPaint
.setColor(
Color
.YELLOW);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
}
效果就相当于用个钉子钉在(0,0)处，然后把矩形的x，y缩放为一半，我们再来看看第二个接口scale(float sx , float sy, float px,float py):
前两个参数为将画布在x、y方向上缩放的倍数，而px和py 分别为缩放的基准点，从源码上可以非常清楚的看出和scale(float sx , float sy)的差别：
即先将画布平移px,py，然后scale，scale结束之后再将画布平移回原基准点；
我们再在之前的基础上绘制一个同样的矩形，x , y 均缩放为 0.5 倍，缩放中心为矩形的中心：
-
@Override
-
protected void onDraw(Canvas canvas) {
-
super.onDraw(canvas);
-
canvas.drawColor(Color.BLUE);
-
canvas.drawRect(
new Rect(
0,
0,
400,
400), mPaint);
-
-
// 保存画布状态
-
canvas.save();
-
canvas.scale(
0.5f,
0.5f);
-
mPaint.setColor(Color.YELLOW);
-
canvas.drawRect(
new Rect(
0,
0,
400,
400), mPaint);
-
// 画布状态回滚
-
canvas.restore();
-
-
canvas.scale(
0.5f,
0.5f,
200,
200);
-
mPaint.setColor(Color.BLACK);
-
canvas.drawRect(
new Rect(
0,
0,
400,
400), mPaint);
-
}
一起来看下效果：
效果就相当于用个钉子钉在矩形的中心，然后进行缩放；
根据上面android 的实现，我们其实可以使用以下代码实现同样的效果：
-
// 先将画布平移到矩形的中心
-
canvas.translate(
200,
200);
-
// 将画布进行缩放
-
canvas.scale(
0.5f,
0.5f);
-
// 将画布移回原基准点
-
canvas.translate(
-200,
-200);
-
mPaint.setColor(Color.BLACK);
-
canvas.drawRect(
new Rect(
0,
0,
400,
400), mPaint);
到此为止，我们也就了解了对画布的缩放，基于canvas.scale(),我们一起完成一个小例子：
上面是网络上找的一张让人产生视觉误差的静态图，我们模拟绘制出上面的效果；
思路非常的简单：
1. 绘制一个和屏幕等宽的正方形；
2. 将画布以正方形中心为基准点进行缩放；
3. 在缩放的过程中绘制原正方形；
注：每次绘制都得使用canvas.save() 和 canvas.restore()进行画布的锁定和回滚，以免除对后面绘制的影响（后面会单独讲）
先初始化画笔，注意此时画笔需要设置成空心：
-
/**
-
* 初始化画笔
-
*/
-
private void initPaint() {
-
mPaint =
new Paint(Paint.ANTI_ALIAS_FLAG);
-
// 将画笔设置为空心
-
mPaint.setStyle(Style.STROKE);
-
// 设置画笔颜色
-
mPaint.setColor(Color.BLACK);
-
// 设置画笔宽度
-
mPaint.setStrokeWidth(mLineWidth);
-
}
-
/**
-
* 绘制正方形
-
*
-
* @param canvas
-
*/
-
private void drawSquare(Canvas canvas) {
-
for (
int i =
0; i < TOTAL_SQUARE_COUNT; i++) {
-
// 保存画布
-
canvas.save();
-
float fraction = (
float) i / TOTAL_SQUARE_COUNT;
-
// 将画布以正方形中心进行缩放
-
canvas.scale(fraction, fraction, mHalfWidth, mHalfHeight);
-
canvas.drawRect(mSquareRect, mPaint);
-
// 画布回滚
-
canvas.restore();
-
}
-
}
其实最终效果和网上找的还是有点小差别的，由于画布的缩放，越小的时候画笔宽度越细，而原图是所有的都一样宽度，但似乎画笔宽度缩放之后效果更佳，哈哈 ... ...
三、canvas.rotate( ) － 画布的旋转：
canvas.rotate( )和canvas.scale()可以类比起来看，如果理解了canvas.scale( )，那么canvas.rotate( )将会非常简单实用；
简单来讲，canvas.rotate( )即是将画布进行旋转，和canvas.scale( )类似的是，它也有两个可以使用的方法：
-
/**
-
* Preconcat the current matrix with the specified rotation.
-
*
-
* @param degrees The amount to rotate, in degrees
-
*/
-
public native void rotate(float degrees);
-
-
/**
-
* Preconcat the current matrix with the specified rotation.
-
*
-
* @param degrees The amount to rotate, in degrees
-
* @param px The x-coord for the pivot point (unchanged by the rotation)
-
* @param py The y-coord for the pivot point (unchanged by the rotation)
-
*/
-
public final void rotate(float degrees, float px, float py) {
-
translate(px, py);
-
rotate(degrees);
-
translate(-px, -py);
-
}
两个方法的区别也是在于基准点的选取，默认是以原点作为基准点，另一个则是以传入的x,y 作为基准点，是不是和scale 一模一样，咱们一起来rotate一下：
咱们先转转左上角的矩形，转多少度呢？先来个90度玩玩吧；
-
@
Override
-
protected void onDraw(Canvas canvas) {
-
super
.onDraw(
canvas);
-
canvas
.drawColor(
Color
.BLUE);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
mPaint
.setColor(
Color
.YELLOW);
-
canvas
.rotate(90);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
}
擦，黄色的矩形呢？
由于基准点是原点，我们直接旋转了90 度，所以已经将矩形旋转出屏幕，当然看不到了，我们将角度调小一点，改为45 度：
-
@
Override
-
protected void onDraw(Canvas canvas) {
-
super
.onDraw(
canvas);
-
canvas
.drawColor(
Color
.BLUE);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
mPaint
.setColor(
Color
.YELLOW);
-
canvas
.rotate(45);
-
canvas
.drawRect(
new
Rect(0, 0, 400, 400),
mPaint);
-
}
此时我们可以可以清楚的看到黄色的矩形是红色矩形绕原点(0,0)旋转45度之后的结果；
我们再将旋转基准点改为矩形中心看看：
canvas.rotate(45,200,200);
可以看到现在黄色矩形是红色矩形绕着中心旋转后的结果：
到这里，我们已经了解了canvas.rotate(float degrees)和 canvas.rotate(float degrees,float px , float py)的使用，同样也应该清楚后者的实现如下：
好了，我们再利用canvas.rotate()完成个闹钟表盘的小例子：
闹钟表盘其实和刻度尺类似，只是一个是在一条直线上绘制，一个是在一个圆周上绘制，说到底都是确定一个位置绘制刻度线；
既然是圆周，最简单的方式莫过于在闹钟的12点钟处划线，通过canvas的旋转绘制到对应圆周处，我们一起实现一下：
整个圆周是360 度，每隔 30 度为一个整时间刻度，整刻度与刻度之间有四个短刻度，划分出5个小段，每个段为6度，有了这些分析，我们则可以采用如下代码进行绘制：
-
/**
-
* 绘制刻度
-
*
-
* @param canvas
-
*/
-
private void drawLines(Canvas canvas) {
-
for (
int i =
0; i <=
360; i++) {
-
if (i %
30 ==
0) {
-
mLineBottom = mLineTop + mLongLineHeight;
-
mLinePaint.setStrokeWidth(mLineWidth);
-
}
else {
-
mLineBottom = mLineTop + mShortLineHeight;
-
mLinePaint.setStrokeWidth(mHalfLineWidth);
-
}
-
-
if (i %
6 ==
0) {
-
canvas.save();
-
canvas.rotate(i, mHalfWidth, mHalfHeight);
-
canvas.drawLine(mLineLeft, mLineTop, mLineLeft, mLineBottom, mLinePaint);
-
canvas.restore();
-
}
-
}
-
}
此时效果如下：
整体代码如下：
-
/**
-
* 闹钟表盘
-
*
-
* @author AJian
-
*/
-
public
class RotateClockView extends View {
-
-
private
static
final
int LONG_LINE_HEIGHT =
35;
-
private
static
final
int SHORT_LINE_HEIGHT =
25;
-
private Paint mCirclePaint, mLinePaint;
-
private DrawFilter mDrawFilter;
-
private
int mHalfWidth, mHalfHeight;
-
-
// 圆环线宽度
-
private
int mCircleLineWidth, mHalfCircleLineWidth;
-
// 直线刻度线宽度
-
private
int mLineWidth, mHalfLineWidth;
-
// 长线长度
-
private
int mLongLineHeight;
-
// 短线长度
-
private
int mShortLineHeight;
-
// 刻度线的左、上位置
-
private
int mLineLeft, mLineTop;
-
-
// 刻度线的下边位置
-
private
int mLineBottom;
-
// 用于控制刻度线位置
-
private
int mFixLineHeight;
-
-
public RotateClockView(Context context) {
-
super(context);
-
mDrawFilter =
new PaintFlagsDrawFilter(
0, Paint.ANTI_ALIAS_FLAG
-
| Paint.FILTER_BITMAP_FLAG);
-
-
mCircleLineWidth = (
int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
8,
-
getResources().getDisplayMetrics());
-
mHalfCircleLineWidth = mCircleLineWidth;
-
mLineWidth = (
int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
4,
-
getResources().getDisplayMetrics());
-
mHalfLineWidth = mLineWidth /
2;
-
-
mFixLineHeight = (
int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
4,
-
getResources().getDisplayMetrics());
-
-
mLongLineHeight = (
int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
-
LONG_LINE_HEIGHT,
-
getResources().getDisplayMetrics());
-
mShortLineHeight = (
int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
-
SHORT_LINE_HEIGHT,
-
getResources().getDisplayMetrics());
-
initPaint();
-
}
-
-
private void initPaint() {
-
mCirclePaint =
new Paint(Paint.ANTI_ALIAS_FLAG);
-
mCirclePaint.setColor(Color.RED);
-
// 将画笔设置为空心
-
mCirclePaint.setStyle(Style.STROKE);
-
// 设置画笔宽度
-
mCirclePaint.setStrokeWidth(mCircleLineWidth);
-
-
mLinePaint =
new Paint(Paint.ANTI_ALIAS_FLAG);
-
mLinePaint.setColor(Color.RED);
-
mLinePaint.setStyle(Style.FILL_AND_STROKE);
-
// 设置画笔宽度
-
mLinePaint.setStrokeWidth(mLineWidth);
-
}
-
-
@Override
-
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
-
}
-
-
@Override
-
protected void onDraw(Canvas canvas) {
-
canvas.setDrawFilter(mDrawFilter);
-
super.onDraw(canvas);
-
// 绘制表盘
-
drawCircle(canvas);
-
// 绘制刻度
-
drawLines(canvas);
-
}
-
-
/**
-
* 绘制刻度
-
*
-
* @param canvas
-
*/
-
private void drawLines(Canvas canvas) {
-
for (
int i =
0; i <=
360; i++) {
-
if (i %
30 ==
0) {
-
mLineBottom = mLineTop + mLongLineHeight;
-
mLinePaint.setStrokeWidth(mLineWidth);
-
}
else {
-
mLineBottom = mLineTop + mShortLineHeight;
-
mLinePaint.setStrokeWidth(mHalfLineWidth);
-
}
-
-
if (i %
6 ==
0) {
-
canvas.save();
-
canvas.rotate(i, mHalfWidth, mHalfHeight);
-
canvas.drawLine(mLineLeft, mLineTop, mLineLeft, mLineBottom, mLinePaint);
-
canvas.restore();
-
}
-
}
-
}
-
-
/**
-
* 绘制表盘
-
*
-
* @param canvas
-
*/
-
private void drawCircle(Canvas canvas) {
-
canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth - mHalfCircleLineWidth, mCirclePaint);
-
}
-
-
@Override
-
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
-
super.onSizeChanged(w, h, oldw, oldh);
-
mHalfWidth = w /
2;
-
mHalfHeight = h /
2;
-
-
mLineLeft = mHalfWidth - mHalfLineWidth;
-
mLineTop = mHalfHeight - mHalfWidth + mFixLineHeight;
-
}
-
}
同样的，有兴趣的同学可以自己补上文字；
四、canvas.skew( ) － 画布的错切：
-
/**
-
* Preconcat the current matrix with the specified skew.
-
*
-
* @param sx The amount to skew in X
-
* @param sy The amount to skew in Y
-
*/
-
public native void skew(float sx, float sy);
这个方法只要理解了两个参数即可：
float sx:将画布在x方向上倾斜相应的角度，sx为倾斜角度的tan值；
float sy:将画布在y轴方向上倾斜相应的角度，sy为倾斜角度的tan值；
注意，这里全是倾斜角度的tan值，比如我们打算在X轴方向上倾斜45度，tan45=1；
先在X 轴上倾斜45 度，我们一起看看：-
@Override
-
protected void onDraw(Canvas canvas) {
-
super.onDraw(canvas);
-
canvas.drawColor(Color.BLUE);
-
canvas.drawRect(
new Rect(
0,
0,
400,
400), mPaint);
-
-
// x 方向上倾斜45 度
-
canvas.skew(
1,
0);
-
mPaint.setColor(
0x8800ff00);
-
canvas.drawRect(
new Rect(
0,
0,
400,
400), mPaint);
-
}
再在y轴上倾斜45度看看：
-
@Override
-
protected void onDraw(Canvas canvas) {
-
super.onDraw(canvas);
-
canvas.drawColor(Color.BLUE);
-
canvas.drawRect(
new Rect(
0,
0,
400,
400), mPaint);
-
-
// y 方向上倾斜45 度
-
canvas.skew(
0,
1);
-
mPaint.setColor(
0x8800ff00);
-
canvas.drawRect(
new Rect(
0,
0,
400,
400), mPaint);
-
}
关于Canvas(画布)的translate(平移)、scale(缩放) 、rotate(旋转) 、skew(错切)就说这么多，这些方法都不复杂，而灵活的使用往往能解决绘制中很多看似复杂的问题，所以重在理解，并在看到与之相关的效果时能够及时恰当的进行关联。
当然对Canvas的操作往往使用Matrix(后面会单独讲)也能达到同样的效果，想看例子可参考 一个绚丽的loading动效分析与实现！
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
