Canvas & Paint基础

对Canvas和Paint的基本用法总结，方便以后查看。未完成，待更新。

1.Canvas 的drawxxx()方法：

# 绘制颜色
drawARGB(int a, int r, int g, int b)
drawRGB(int r, int g, int b)
drawColor(int color)
drawColor(int color, PorterDuff.Mode mode)

# 绘制圆形
drawCircle(float cx, float cy, float radius, Paint paint)

# 绘制矩形
drawRect(float left, float top, float right, float bottom, Paint paint)
drawRect(Rect r, Paint paint)
drawRect(RectF rect, Paint paint)

# 绘制圆角矩形
drawRoundRect(RectF rect, float rx, float ry, Paint paint)
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)

# 绘制椭圆
drawOval(float left, float top, float right, float bottom, Paint paint)
drawOval(RectF oval, Paint paint)
# 绘制扇形 & 弧线 
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

# 绘制点（圆点，方点）
drawPoint(float x, float y, Paint paint)
drawPoints(float[] pts, Paint paint)
drawPoints(float[] pts, int offset, int count, Paint paint)

# 绘制直线
drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
drawLines(float[] pts, int offset, int count, Paint paint)
drawLines(float[] pts, Paint paint)

# 绘制文字
drawText(CharSequence text, int start, int end, float x, float y, Paint paint)
drawText(String text, float x, float y, Paint paint)
drawText(char[] text, int index, int count, float x, float y, Paint paint)
drawText(String text, int start, int end, float x, float y, Paint paint)

# 绘制图片
drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)
drawBitmap(int[] colors, int offset, int stride, float x, float y, int width, int height, boolean hasAlpha, Paint paint)
drawBitmap(int[] colors, int offset, int stride, int x, int y, int width, int height, boolean hasAlpha, Paint paint)
drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)
drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint)

# 绘制路径
drawPath(Path path, Paint paint)

2.Pant类的常用方法

# 设置抗锯齿
setAntiAlias(boolean aa)
# 设置颜色
setColor(int color)
# 设置要绘制的点的形状（drawPoint()时使用）
setStrokeCap(Paint.Cap cap)
# 设置线条宽度px（style为STROKE,FILL_AND_STROKE有用）
setStrokeWidth(float width)
# 设置绘画风格，默认是FILL有三种（STROKE,FILL,FILL_AND_STROKE）
setStyle(Paint.Style style)

绘制线条时一定要设置setStyle(Paint.Style.STROKE)。

3.canvas简单使用

自定义控件继承View类，准备好Paint，重写onDraw()，把绘制代码写在onDraw()里，类似下面这样：

Paint paint = new Paint();

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

    canvas.drawCircle(200,200,100,paint);

}

绘制颜色

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // canvas.drawColor(Color.parseColor("#aa6666"));
    // canvas.drawColor(Color.YELLOW);
      canvas.drawARGB(255,250,60,60);

}

绘制圆

/** 画笔 */
private Paint paint = new Paint();

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

    // 画笔颜色
    paint.setColor(Color.YELLOW);
    // 抗锯齿
    paint.setAntiAlias(true);

    // 画圆 cx,cy:圆心点坐标，radius:圆半径
    canvas.drawCircle(200,200,100,paint);

    paint.setColor(Color.BLUE);
    canvas.drawCircle(500, 200, 100,paint);

    // 设置填充方式是线条，默认是填充Fill
    paint.setStyle(Paint.Style.STROKE);
    // 设置线条宽度,style是Fill时无效
    paint.setStrokeWidth(30);
    canvas.drawCircle(200,500,100,paint);

    paint.setColor(Color.YELLOW);
    paint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(450,500,100,paint);

    paint.setColor(Color.GREEN);
    canvas.drawCircle(600,500,100,paint);

}

画圆--效果图.PNG

绘制矩形 & 圆角矩形

private Paint paint = new Paint();

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 设置模式为填充
    paint.setStyle(Paint.Style.FILL);
    // 设置颜色
    paint.setColor(Color.GREEN);
    // 设置抗锯齿
    paint.setAntiAlias(true);

    // 画矩形
    // left,top,right,bottom 矩形四个边的位置
    canvas.drawRect(10,10,200,150,paint);

    paint.setColor(Color.YELLOW);
    Rect rect = new Rect();
    rect.left = 300;
    rect.top = 10;
    rect.right = 550;
    rect.bottom = 150;
    canvas.drawRect(rect,paint);

    paint.setColor(Color.MAGENTA);
    // 设置为画线
    paint.setStyle(Paint.Style.STROKE);
    // 设置线宽度，不设置时线的宽度为1
    paint.setStrokeWidth(20);
    RectF rectF = new RectF();
    rectF.left = 10;
    rectF.top = 200;
    rectF.right = 200;
    rectF.bottom = 350;
    canvas.drawRect(rectF,paint);

    // 设置填充带边框线
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawRect(300,200,550,350,paint);

    // 绘制圆角矩形
    // rx 在x轴方向圆角的半径;ry 在y轴方向圆角的半径
    canvas.drawRoundRect(50,400,250,550,10,10,paint);

    paint.setColor(Color.LTGRAY);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(20);
    rectF.left = 350;
    rectF.top = 400;
    rectF.right = 550;
    rectF.bottom = 550;
    canvas.drawRoundRect(rectF,50,50,paint);

}

矩形&圆角矩形.PNG

绘制椭圆

private Paint paint = new Paint();

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

    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.FILL);

    // 绘制椭圆，椭圆是在长方形中绘制
    canvas.drawOval(50,50,300,200,paint);

    // 绘制圆形
    paint.setColor(Color.YELLOW);
    // 长宽相等时=drawCircle()
    canvas.drawOval(400,50,600,250,paint);

    paint.setColor(Color.MAGENTA);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(30);

    canvas.drawOval(50,300,250,700,paint);

    canvas.drawOval(350,300,750,500,paint);
}

画椭圆.PNG

绘制扇形 & 弧线

private Paint paint = new Paint();

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

    paint.setAntiAlias(true);
    paint.setColor(Color.GREEN);
    paint.setStyle(Paint.Style.STROKE);

    // 绘制扇形
    canvas.drawArc(50,50,300,300,0,-90,true,paint);

    canvas.drawArc(400,50,700,300,-90,-200,true,paint);

    // 绘制饼图
    canvas.drawArc(150,300,550,700,0,30,true,paint);
    paint.setColor(Color.YELLOW);
    canvas.drawArc(150,300,550,700,35,65,true,paint);
    paint.setColor(Color.MAGENTA);
    canvas.drawArc(150,300,550,700,110,40,true,paint);
    paint.setColor(Color.YELLOW);
    canvas.drawArc(150,300,550,700,155,100,true,paint);
    paint.setColor(Color.MAGENTA);
    canvas.drawArc(150,300,550,700,260,98,true,paint);


    // 绘制弧线
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(10);
    canvas.drawArc(100,750,400,900,-90,-90,false,paint);

}

画扇形 & 弧线.PNG

绘制点（圆点，方点）

private Paint paint = new Paint();

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

    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.GREEN);
    paint.setStrokeWidth(40);
    // 设置圆点
    paint.setStrokeCap(Paint.Cap.ROUND);

    // xml布局文件看不到效果，手机可以正常显示
    canvas.drawPoint(50,50,paint);

    // 绘制点的坐标集合
    float[] pts = new float[]{100,200,200,200,300,200,400,200,500,200};
    canvas.drawPoints(pts,paint);

    paint.setColor(Color.MAGENTA);
    // 设置方点
    paint.setStrokeCap(Paint.Cap.SQUARE);
    float[] pts2 = new float[]{100,300,200,300,300,300,400,300,500,300};
    // 从第一个点开始，画三个点
    canvas.drawPoints(pts2,0,6,paint);

    paint.setColor(Color.BLUE);
    // 设置平头
    paint.setStrokeCap(Paint.Cap.BUTT);
    float[] pts3 = new float[]{300,600,400,600,500,600,600,600,700,600};
    // 绘制点，从第二个点，画三个点
    canvas.drawPoints(pts3,2,6,paint);

}

画点.PNG

我在AS的xml布局文件上看不到效果，手机可以正常显示，不知道大家的是不是和我一样。

绘制直线

private Paint paint = new Paint();

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

    paint.setColor(Color.RED);
    paint.setStrokeWidth(10);
    paint.setStyle(Paint.Style.STROKE);
    paint.setAntiAlias(true);

    float[] pts = new float[]{
            50,100,310,100,
            180,100,180,300,
            20,300,340,300};
    canvas.drawLines(pts,paint);

    float[] pts2 = new float[]{
            430,100,650,100,
            430,100,430,330,
            650,100,650,330,
            430,330,650,330
    };

    canvas.drawLines(pts2,paint);

}

画直线.PNG

绘制文字

    private Paint paint = new Paint();

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

    paint.setTextSize(36);
    canvas.drawText("Hello World",50,50,paint);

    paint.setTextSize(45);
    paint.setColor(Color.RED);
    canvas.drawText("Hello World",2,8,50,100,paint);

    paint.setTextSize(60);
    paint.setColor(Color.MAGENTA);
    canvas.drawText("Hello World",50,160,paint);

}

画文字.PNG

绘制图片

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);
// xml布局文件看不到效果，手机可以正常显示
canvas.drawBitmap(bitmap,50,50,paint);

绘制路径

paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.GREEN);
paint.setAntiAlias(true);

Path path = new Path();

path.addCircle(100,100,50, Path.Direction.CCW);
path.addOval(150,0,400,200, Path.Direction.CCW);

RectF rectF = new RectF(300,0,600,300);
path.addArc(rectF,-30,-90);

canvas.drawPath(path,paint);

// 画线一定要设置
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);
paint.setColor(Color.RED);

path.moveTo(100,250);
path.arcTo(100,250,400,550,0,90,true);

path.moveTo(100,500);
path.lineTo(500,800);

path.rLineTo(-300,0);
// 封闭图形
path.close();

canvas.drawPath(path,paint);

绘制完图形后接着绘制线，一定要重新设置style，我在测试过程中忘记重新设置style.stroke，结果一直没有直线。

4.练习

第一个是环形图自定义控件：

环形图

实现如下：

/**
 * 绘制环形图
 */
public class DrawDoughnutChartView extends View {

    private Paint paint = new Paint();
    /** 线宽度 */
    private int strokeWidth = 60;
    /** 弧线颜色 */
    private String[] colors = new String[]{"#FF00FF","#121a56","#1ae1ef","#0de506","#dde506","#e50612"};
    /** 弧线角度集合，相加为360 正数为顺时针方向绘制，负数为逆时针方向绘制*/
    private int[] sweepAngles = new int[]{60,60,70,50,60,60};

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

        // 方形边长
        int w = Math.min(getWidth(),getHeight());
        // 最小padding
        int padding = Math.max(Math.max(getPaddingLeft(),getPaddingRight()),Math.max(getPaddingBottom(),getPaddingTop()));

        int left = padding;
        int top = padding;
        int right = w-padding;
        int bottom = w-padding;

        // 绘制线
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        // 线头为圆形
        paint.setStrokeCap(Paint.Cap.ROUND);

        // 绘制方向是从0°开始，即水平向右方向
        int startAngle = 0;

        for (int i = 0; i < colors.length; i++) {

            if (startAngle > 360){
                break;
            }
            paint.setColor(Color.parseColor(colors[i]));
            // left,top,right,bottom矩形的位置
            // startAngle 弧线开始位置
            // sweepAngles 弧线长度
            canvas.drawArc(left,top,right,bottom,startAngle,sweepAngles[i],false,paint);
            startAngle+=sweepAngles[i];
        }
    }
}

参考http://hencoder.com/ui-1-1/