通过机器猫的绘制学会Android画布（Canvas）的使用
可以说安卓上面的难点就这么几个：自定义控件、手势事件处理、JNI....
那么，我们今天了解一下自定义控件的一种，那就是Canvas，
有了他你可以-----
为所欲为
再也不要担心美工设计出来的乱七八糟的效果了，
下面我们开始
一般的操作都会通过重写onDraw开始，
下面通过一段代码简单的说一下画布和画笔的使用：
package com.uidemo2;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;
/**
* @author GONGPENG
* @CreateTime 2018/3/3 10:27
*/
public class PaintView extends View {
public Paint circlePaint = new Paint();
public Paint circleWhitePaint = new Paint();
public Paint circleLinePaint = new Paint();
public Paint eyesPint = new Paint();
public Paint eyesLinePint = new Paint();
private float width = 0;
private float higth = 0;
private float faceX;
private float faceY;
private float faceRadius;
public PaintView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initView();
}
public PaintView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
public PaintView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
public void initView() {
/**
通过这个东西可以获取到屏幕的高度，一般有三中方式：
1、通过WindowManager获取
DisplayMetrics dm = new DisplayMetrics();
heigth = dm.heightPixels;
width = dm.widthPixels;
2、通过Resources获取
DisplayMetrics dm = getResources().getDisplayMetrics();
heigth = dm.heightPixels; width = dm.widthPixels;
3、获取屏幕的默认分辨率
Display display = getWindowManager().getDefaultDisplay();
heigth = display.getWidth(); width = display.getHeight();
当然我更喜欢第二种，因为Context几乎无处不在
*/
DisplayMetrics dm = getResources().getDisplayMetrics();
width = dm.widthPixels;
higth = dm.heightPixels;
}
@Override
protected void onDraw(Canvas canvas) {
//这个吗，设置画笔描边，画出来的图形不会被填充，如果要画实心的，就不要设置这个了
circleLinePaint.setStyle(Paint.Style.STROKE);
//设置画笔宽度
circleLinePaint.setStrokeWidth(12f);
//设置画笔颜色
circlePaint.setColor(Color.parseColor("#FF4397F1"));
circleWhitePaint.setColor(Color.WHITE);
eyesLinePint.setStrokeWidth(10f);
eyesPint.setColor(Color.WHITE);
eyesLinePint.setStyle(Paint.Style.STROKE);
faceX = width / 2;
faceY = higth / 2 - 100;
faceRadius = higth / 4;
//用它可以画圆
canvas.drawCircle(faceX, faceY, faceRadius, circlePaint);
canvas.drawCircle(faceX, faceY + faceRadius / 2, faceRadius + 50, circleWhitePaint);
drawEyeCircle(true, canvas);
drawEyeCircle(false, canvas);
canvas.drawCircle(faceX, faceY, faceRadius, circleLinePaint);
super.onDraw(canvas);
}
private void drawEyeCircle(boolean isLeft, Canvas canvas) {
float eyeWidth = 120f;
float eyeHidth = 180f;
float coroWidth = 40f;
float coroHidth = 80f;
RectF eye = new RectF();
eye.left = faceX;
if (isLeft) {
eye.left = eye.left - eyeWidth;
} else {
eye.left = eye.left + 10f;
}
eye.right = faceX;
if (!isLeft) {
eye.right = eye.right + eyeWidth + 10f;
}
eye.top = (faceY - faceRadius) + 40 + eyeHidth / 2;
eye.bottom = eye.top + eyeHidth;
RectF eyeCircle = new RectF();
eyeCircle.left = eye.left - 10f;
eyeCircle.right = eye.right + 10f;
eyeCircle.top = eye.top - 10f;
eyeCircle.bottom = eye.bottom + 10f;
Paint coroPiant = new Paint();
coroPiant.setStyle(Paint.Style.STROKE);
coroPiant.setStrokeWidth(25f);
//用这个确定图形的位置
RectF coroRect = new RectF();
if (isLeft) {
coroRect.left = eye.right - coroWidth - 30f;
} else {
coroRect.left = eye.left + 30f;
}
coroRect.bottom = eye.bottom - 40f;
coroRect.top = coroRect.bottom - coroHidth;
coroRect.right = coroRect.left + coroWidth;
canvas.drawOval(eye, eyesPint);
canvas.drawOval(eyeCircle, eyesLinePint);
canvas.drawOval(coroRect, coroPiant);
RectF mouse = new RectF();
float re = faceRadius - 60f;
mouse.top = (faceY - re) + 20f;
mouse.bottom = mouse.top + re * 2;
mouse.left = (faceX - re);
mouse.right = (faceX + re);
//用这个话弧形，第一个参数是弧形位置，第二个是开始角度，第三个是绘制的扇面角度，第三个是否填充扇
//面，当然，设置画笔属性为setStyle(Paint.Style.STROKE)的时候是看不出来的
canvas.drawArc(mouse, 0, 180, false, circleLinePaint);
canvas.drawLine(faceX + 8f,eye.bottom + 40f,faceX + 8f,mouse.bottom,circleLinePaint);
float startY1 = faceY;
float startX1 = faceX - 120f;
float startX2 = faceX + 120f;
float stopX1 = faceX - faceRadius;
float stopX2 = faceX + faceRadius;
//划线，参数分别是：起始点的x,y,结束点的x,y 所使用的画笔
canvas.drawLine(startX1,startY1,stopX1,startY1,circleLinePaint);
canvas.drawLine(startX2,startY1,stopX2,startY1,circleLinePaint);
canvas.drawLine(startX1,startY1 - 40f,stopX1,startY1 - 80,circleLinePaint);
canvas.drawLine(startX2,startY1 - 40f,stopX2,startY1 - 80,circleLinePaint);
canvas.drawLine(startX1,startY1 + 40f,stopX1,startY1 + 80,circleLinePaint);
canvas.drawLine(startX2,startY1 + 40f,stopX2,startY1 + 80,circleLinePaint);
canvas.drawLine(faceX + 8f,eye.bottom + 40f,faceX + 8f,mouse.bottom,circleLinePaint);
Paint nousePaint = new Paint();
nousePaint.setColor(Color.RED);
canvas.drawCircle(faceX + 8f, eye.bottom + 40f, 50f, nousePaint);
canvas.drawCircle(faceX + 8f, eye.bottom + 40f, 50f, circleLinePaint);
}
}
好了，白话完了，让你们看下作品，其实这才是我的真实目的，哈哈哈哈哈哈哈哈哈.....
Screenshot_20181103-144251.jpg
