自定义绘图View之onDraw

1，上一两个demo简单说明一下吧

第一个绘一个实时的钟表：

具体代码：

package demo.com.customviewdemo;

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

import java.util.Calendar;

/**
 * Created by Alv_chi 
 */
public class MyClockView extends View {

    private Paint circlePaint;
    private Paint pointerPaint;
    private Paint textPaint;


    public MyClockView(Context context) {
        this(context, null);
    }

    public MyClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public MyClockView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
//     初始化画笔工具：
        initialPaints();

    }

    private void initialPaints() {
        circlePaint = new Paint();
        circlePaint.setAntiAlias(true);
        circlePaint.setColor(Color.CYAN);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeWidth(10);
        pointerPaint = new Paint();
        pointerPaint.setColor(Color.GREEN);
        textPaint = new Paint();
        textPaint.setColor(Color.RED);
        textPaint.setTextSize(30);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//     计算圆心坐标，和半径；
        int height = getHeight();
        int width = getWidth();
        int centerY = height / 2;
        int centerX = width / 2;
        int radius = (height > width ? width : height) / 4;

//        画个圆，和圆心；
        canvas.drawCircle(centerX, centerY, radius, circlePaint);
        canvas.drawPoint(centerX, centerY, circlePaint);

//        画钟表上的数字：
        double singleAngle = Math.PI * 2 / 12;
        for (int i = 1; i < 13; i++) {
            float textSize = textPaint.measureText(i + "", 0, (i + "").length());
            double deltaAngle = singleAngle * i;
            double y = centerY - radius * Math.cos(deltaAngle)+textSize/2;
            double x = centerX + radius * Math.sin(deltaAngle)-textSize/2;

            canvas.drawText(i + "", (float) x, (float) y, textPaint);

        }

//        画时针，分针，秒针：
        Calendar calendar = Calendar.getInstance();
        int second = calendar.get(Calendar.SECOND);
        int minute = calendar.get(Calendar.MINUTE);
        int hour = calendar.get(Calendar.HOUR);
        float fhour =  hour+ minute / 60f;


//        时针
        pointerPaint.setStrokeCap(Paint.Cap.ROUND);
        pointerPaint.setStrokeWidth(20);
        canvas.drawLine(centerX, centerY, (float) (centerX + radius * 0.45 * Math.sin(Math.toRadians(fhour * 30))), (float) (centerY - (radius * 0.5 * Math.cos(Math.toRadians(fhour * 30)))), pointerPaint);


//        分针
        pointerPaint.setStrokeWidth(10);
        canvas.drawLine(centerX, centerY, (float) (centerX + radius * 0.6 * Math.sin(Math.toRadians(minute * 6))), (float) (centerY - (radius * 0.8 * Math.cos(Math.toRadians(minute * 6)))), pointerPaint);

//        秒针
        pointerPaint.setStrokeWidth(3);
        canvas.drawLine(centerX, centerY, (float) (centerX + radius * 0.8 * Math.sin(Math.toRadians(second * 6))), (float) (centerY - (radius * 0.8 * Math.cos(Math.toRadians(second * 6)))), pointerPaint);

//        每隔1秒重绘刷新一次；
        postInvalidateDelayed(1000);
    }


}

效果如图：

2；第二个例子是以一个正五边形和五角星：

package demo.com.customviewdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Alv_chi 
 */
public class MyFiveStarView extends View{

    private Paint paint;
    private double[] arrY;
    private double[] arrX;
    private Path path;
    private double[] X;
    private double[] Y;


    public MyFiveStarView(Context context) {
        this(context,null);
    }

    public MyFiveStarView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MyFiveStarView(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr,0);
    }

    public MyFiveStarView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);

        paint = new Paint();
        paint.setColor(Color.CYAN);
        paint.setStrokeWidth(20);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int height = getHeight();
        int width = getWidth();
        int centerY = height / 2;
        int centerX = width / 2;
        int radius = (height > width ? width : height) / 4;

        initialPointArr(centerY, centerX, radius);
//      画正五边形：
//        drawGraphic(canvas,arrX,arrY);

//        改变一下数组坐标顺序，就可以画个五角星：
        drawGraphic(canvas,X,Y);
    }

    private void drawGraphic(Canvas canvas,double[] X,double[] Y) {
        path = new Path();


        for (int i = 0; i < 5; i++) {
            if (i==0)
            {
                path.moveTo((float) X[i], (float) Y[i]);

            }else
            {
                path.lineTo((float) X[i], (float) Y[i]);

            }
        }

        path.close();

        canvas.drawPath(path,paint);
    }

    private void initialPointArr(int centerY, int centerX, int radius) {

//        从最高顶点开始，从左往右开始计算各个顶点的坐标；
//        顶点坐标：
        double tX = centerX;
        double tY = centerY - radius;

//        右中顶点坐标：
        double rmY = centerY-radius *Math.sin(Math.toRadians(18));
        double rmX = tX + radius * Math.cos(Math.toRadians(18));

//        右底顶点坐标：
        double rbY = centerY + radius * Math.cos(Math.toRadians(36));
        double rbX = centerX + radius *Math.sin(Math.toRadians(36));;

//        相对应的左边中底顶点坐标为：
        double lmY = rmY;
        double lmX = tX -radius * Math.cos(Math.toRadians(18));

        double lbY = rbY;
        double lbX = centerX - radius *Math.sin(Math.toRadians(36));

//        分别用两数组对应地装起来；
        arrY = new double[]{tY,rmY,rbY,lbY,lmY};
        arrX = new double[]{tX,rmX,rbX,lbX,lmX};
//      改变数组顺序：
        X = new double[]{lbY,tY,rbY,lmY,rmY};
        Y = new double[]{lbX,tX,rbX,lmX,rmX};
    }
}

效果如图：

总结;  先是准备好画笔，再计算出相应坐标位置（x,y），最后用相应的Draw方法去绘，不难，主要是数学计算和相关Api的运用，api不懂可以直接看源码；

最后源码下载：点击打开链接下载源码