6.4 Android绘图技巧(Primary：四大方法&Layer)
1.Canvas的四大金刚
Canvas.save()
这个方法从字面上可以理解为保存画布，作用就是将之前的所有已绘制的图像保存起来。让后续的操作就好像在一个新的图层上操作一样，这一点与Photoshop中的图层理解基本一致。Canvas.restore()
可以理解为Photoshop中的合并图层操作，作用是将我们在save()之后绘制的所有图像与save()之前的图像进行合并。Canvas.translate()
Android默认绘图坐标零点位于屏幕左上角，那么在调用translate()之后，则将零点(0,0)移动到了(x,y)。之后所有绘图操作都将以(x,y)为原点执行。Canvas.rotate()
与translate()同理，旋转坐标系一个一定的角度。
2.Demo：仪表盘
2.1.画外圆
2.2.画刻度和刻度值
2.3.画指针
2.4.全代码和运行结果
Clock.java:
package com.yishengxu.myapplication;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class Clock extends View {
private int mHeight, mWidth;
public Clock(Context context) {
super(context);
}
public Clock(Context context, AttributeSet attrs) {
super(context, attrs);
}
public Clock(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
// 获取宽高参数
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
// 画外圆
Paint paintCircle = new Paint();
paintCircle.setStyle(Paint.Style.STROKE);
paintCircle.setAntiAlias(true);
paintCircle.setStrokeWidth(5);
canvas.drawCircle(mWidth / 2,
mHeight / 2, mWidth / 2, paintCircle);
// 画刻度
Paint painDegree = new Paint();
paintCircle.setStrokeWidth(3);
for (int i = 0; i < 24; i++) {
// 区分整点与非整点
if (i == 0 || i == 6 || i == 12 || i == 18) {
painDegree.setStrokeWidth(5);
painDegree.setTextSize(30);
canvas.drawLine(mWidth / 2, mHeight / 2 - mWidth / 2,//基线起点x
mWidth / 2, mHeight / 2 - mWidth / 2 + 60,//基线起点y
painDegree);
String degree = String.valueOf(i);//Integer.toString(i)
canvas.drawText(degree,
mWidth / 2 - painDegree.measureText(degree) / 2,//measureText()在画布上输出文本之前，检查字体的宽度：
mHeight / 2 - mWidth / 2 + 90,
painDegree);
} else {
painDegree.setStrokeWidth(3);
painDegree.setTextSize(15);
canvas.drawLine(mWidth / 2, mHeight / 2 - mWidth / 2,
mWidth / 2, mHeight / 2 - mWidth / 2 + 30,
painDegree);
String degree = String.valueOf(i);
canvas.drawText(degree,
mWidth / 2 - painDegree.measureText(degree) / 2,
mHeight / 2 - mWidth / 2 + 60,
painDegree);
}
// 通过旋转画布简化坐标运算
canvas.rotate(15, mWidth / 2, mHeight / 2);//二三参数为枢轴点的xy，枢轴点即旋转中心
}
// 画圆心
Paint paintPointer = new Paint();
paintPointer.setStrokeWidth(30);
canvas.drawPoint(mWidth / 2, mHeight / 2, paintPointer);
// 画指针
Paint paintHour = new Paint();
paintHour.setStrokeWidth(20);
Paint paintMinute = new Paint();
paintMinute.setStrokeWidth(10);
canvas.save();//只是保存“缓冲区”绘制的内容
canvas.translate(mWidth / 2, mHeight / 2);
canvas.drawLine(0, 0, 100, 100, paintHour);
canvas.drawLine(0, 0, 100, 200, paintMinute);
canvas.restore();//将“缓冲区”绘制的内容和已经save()的内容一同合并并保存起来，这里跟上边的save注意区分开来
}
}
MainActivity.java:
package com.yishengxu.myapplication;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new Clock(this));
}
}
效果图：
3.Layer图层
创建一个新的Layer到“栈”中，可以使用saveLayer(), savaLayerAlpha(), 从“栈”中推出一个Layer，可以使用restore(),restoreToCount()。但Layer入栈时，后续的DrawXXX操作都发生在这个Layer上，而Layer退栈时，就会把本层绘制的图像“绘制”到上层或是Canvas上，在复制Layer到Canvas上时，可以指定Layer的透明度
- 透明度：
- 127，半透明
- 255，完全不透明
- 0，完全透明
实例如Demo下图：
上Demo：
package com.imooc.myapplication;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyLayer(this));
}
public class MyLayer extends View {
private Paint mPaint;
private static final int LAYER_FLAGS =
Canvas.MATRIX_SAVE_FLAG |
Canvas.CLIP_SAVE_FLAG |
Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
Canvas.CLIP_TO_LAYER_SAVE_FLAG;//此乃API定义的常量，ctrl+E 进入文档查看便知晓其含义
public MyLayer(Context context) {
super(context);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);//背景
mPaint.setColor(Color.BLUE);
canvas.drawCircle(150, 150, 100, mPaint);//“零图层”
canvas.saveLayerAlpha(0, 0, 400, 400, 127, LAYER_FLAGS);
mPaint.setColor(Color.RED);
canvas.drawCircle(200, 200, 100, mPaint);
canvas.restore();
}
}
}
半透明：
完全不透明： canvas.saveLayerAlpha(0, 0, 400, 400, 255, LAYER_FLAGS);
image.png
完全透明： canvas.saveLayerAlpha(0, 0, 400, 400, 0, LAYER_FLAGS);
