Android绘图（一）

（《群英传》）整理笔记：

基本知识点：

分辨率：手机屏幕的像素点个数。
PPI(DPI)：对角线的像素点除以屏幕的大小。

系统屏幕密度：
Ldpi：240×320；
Mdpi：320×480；
Hdpi：480×800；
Xhdpi：720×1280；
Xxhdpi：1080×1920。

单位转换：

package com.android.utils;

import android.content.Context;

/**
 * 单位转换工具类（公式换算方法）
 * 
 * @author Administrator
 *
 */
public class UnitConversion {

    /**
     * 将px值转换为dip或dp值，保证尺寸不变。 density为换算比例
     * 
     * @param context
     * @param pxValue
     * @return
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }

    /**
     * 将dip或dp转换为px值，保证尺寸大小不变
     * 
     * @param context
     * @param dipValue
     * @return
     */
    public static int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    /**
     * 将px值转换为sp值，保证尺寸大小不变
     * 
     * @param context
     * @param pxValue
     * @return
     */
    public static int px2sp(Context context, float pxValue) {
        final float fontScale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / fontScale + 0.5f);
    }

    /**
     * 将sp值转换为px值，保证尺寸大小不变
     * 
     * @param context
     * @param spValue
     * @return
     */
    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().density;
        return (int) (spValue * fontScale + 0.5f);
    }

}

2D绘图基础：

Paint的基本属性：
setAntiAlias(true); // 设置画笔的锯齿效果
setColor(); // 设置画笔的颜色
SetARGB(); // 设置画笔的A、R、G、B值
setAlpha(); // 设置画笔的Alpha（透明度）值
setTextSize() ; //设置字体的尺寸
setStyle(); // 设置画笔的风格（空心或实心）
setStrokeWidth(); // 设置空心边框的宽度

Canvas的常用方法：
DrawPoint：绘制点；
DrawLine：绘制直线；
DrawLines：绘制多条直线；

float[] pts = {
                startX1, startY1, endX1, endY1,
                …… ……
                startXn, startYn, endXn, endYn
        };
        canvas.drawLines(pts, paint);

DrawRect：绘制矩形；
DrawRoundRect：绘制圆角矩形；
DrawCircle：绘制圆；
DrawArc：绘制弧形、扇形。useCenter(true)为扇形；
DrawOval：绘制椭圆（外接矩形）；
DrawText()：绘制文本；
DrawPosText：在指定位置绘制文本；
DrawPath：绘制路径–>

Path patn = new Path();
path.moveTo(50, 50);
path.lineTo(100, 100);
path.lineTo(100, 300);
path.lineTo(300, 50);
canvas.drawPath(path,paint);

Android XML绘图：
1、Bitmap:可以将图片转换成Bitmap在程序中使用

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_launcher" >

</bitmap>

2、Shape：可以在XML中绘制各种形状
（为了说明用法，格式并不准确）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- 绘制各种形状 -->

    <!-- 指定大小，一般用在imageview配合scaleType属性使用 -->
    <size 
        android:width="integer"
        android:height="integer"/>

    <!-- 渐变 -->
    <gradient
        android:angle="45"
        android:endColor="color"
        android:startColor="color"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="color"
        android:gradientRadius="integer"
        android:type="linear"
        android:useLevel="true" />

    <padding 
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer"/>

    <!-- 填充颜色 -->
    <solid android:color="color"/>

    <!-- 指定边框 -->
    <stroke android:width="integer"
        android:color="color"
        // 虚线宽度
        android:dashWidth="integer"
        // 虚线间隔宽度
        android:dashGap="integer"/>

    <corners android:radius="integer"/>

</shape>

通过渐变实现的阴影效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >


    <!-- 阴影效果 -->

    <gradient
        android:angle="45"
        android:endColor="#805FBBFF"
        android:startColor="#FF5DA2FF" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <corners android:radius="8dp" />

</shape>

3、Layer图层：
图片会依次叠加

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 图层 -->

    <!-- 图片1 -->
    <item android:drawable="@drawable/ic_launcher">
    </item>
    <!-- 图片2 -->
    <item
        android:bottom="10.0dp"
        android:drawable="@drawable/ic_launcher"
        android:left="10.0dp"
        android:right="10.0dp"
        android:top="10.0dp">
    </item>

</layer-list>

4、Selector：
他的作用是帮助开发者实现静态绘图中的事件反馈，通过给不同的事件设置不同的图像，从而在程序中根据用户输入，返回不同的效果。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 默认时的背景图片 -->
    <item android:drawable="@drawable/pic1"></item>
    <!-- 没有焦点时的背景图片 -->
    <item android:drawable="@drawable/pic2" android:state_window_focused="false"></item>
    <!-- 非触摸模式下获得焦点并单击时的背景图片 -->
    <item android:drawable="@drawable/pic3" android:state_focused="true" android:state_pressed="true"></item>
    <!-- 触摸模式下单击时的背景图片 -->
    <item android:drawable="@drawable/pic4" android:state_focused="false" android:state_pressed="true"></item>
    <!-- 选中时的背景图片 -->
    <item android:drawable="@drawable/pic5" android:state_selected="true"></item>
    <!-- 获得焦点时的背景图片 -->
    <item android:drawable="@drawable/pic6" android:state_focused="true"></item>

</selector>

5、上面方法的共同作用：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#33444444"/>
            <corners android:radius="5dp"/>
            <padding 
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"/>
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners android:radius="5dp"/>
            <padding 
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"/>
        </shape>
    </item>

</selector>

绘图技巧：
1、Canvas：
Canvas.save()：将之前的所有已绘制图像保存起来；
Canvas.restore()：合并图层；
Canvas.translate()：坐标系的平移；
Canvas.rotate():坐标系的反转。

示例：时钟

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;

public class MyClock extends View {

    private int mWidth;
    private int mHeight;

    public MyClock(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    public MyClock(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public MyClock(Context context) {
        super(context);
        initView(context);
    }

    // 获取屏幕的宽和高
    private void initView(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        mWidth = dm.widthPixels;
        mHeight = dm.heightPixels;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint panintCicle = new Paint();
        panintCicle.setStyle(Paint.Style.STROKE);
        panintCicle.setAntiAlias(true);
        panintCicle.setStrokeWidth(5);

        canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, panintCicle);

        Paint paintDegree = new Paint();
        panintCicle.setStrokeWidth(3);
        for (int i = 0; i < 12; i++) {
            // 区分整点与非整点
            if (i == 0 || i == 3 || i == 6 || i == 9) {

                paintDegree.setStrokeWidth(5);
                paintDegree.setTextSize(100);

                canvas.drawLine(
                        mWidth / 2,
                        mHeight / 2 - mWidth / 2 + 100,
                        mWidth / 2, mHeight / 2 - mWidth,
                        paintDegree);

                String degree = String.valueOf(i);
                canvas.drawText(
                        degree,
                        mWidth / 2 - paintDegree.measureText(degree) / 2,
                        mHeight / 2 - mWidth / 2 + 170,
                        paintDegree);
            } else {
                paintDegree.setStrokeWidth(3);
                paintDegree.setTextSize(50);
                canvas.drawLine(
                        mWidth / 2,
                        mHeight / 2 - mWidth / 2 + 60,
                        mWidth / 2,
                        mHeight / 2 - mWidth,
                        paintDegree);

                String degree = String.valueOf(i);
                canvas.drawText(
                        degree,
                        mWidth / 2 - paintDegree.measureText(degree) / 2,
                        mHeight / 2 - mWidth / 2 + 100,
                        paintDegree);
            }
            // 通过旋转画布简化坐标运算
            canvas.rotate(30, mWidth / 2, mHeight / 2);
        }

        // 画指针
        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();

    }

}

2、Layer图层
使用saveLayer()方法来创建一个图层，图层是基于栈的结构进行管理。调用saveLayer()、saveLayerAlpha()，使用restore()、restoreToCount()将一个图层出栈。

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        Paint mPaint = new Paint();
        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();
    }

透明度为127时，即半透明；
透明度为255时，即完全不透明；
透明度为0时，即完全透明。