Android中canvas常用方法_protected void ondraw(canvas canvas)

在自定义VIew中经常使用到Canvas对象的方法：

1 绘制点：

public void drawPoint(float x, float y,  Paint paint)
x:表示x轴方法的坐标
y:表示y轴方法的坐标  这坐标是相对于它的父view,而不是屏幕
paint:表示你所画点用到的画笔

public void drawPoints(float[] pts,Paint paint) 绘制多个点
pts:是一个float数组,存储的是点的集合

public void drawPoints(float[] pts, int offset, int count,Paint paint)
pts:是一个float数组,存储的是点的集合
offset：集合中跳过的数值个数
count:参与绘制的数值的个数

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint.setColor(Color.parseColor("#00ffff"));
        paint.setStrokeWidth(20);
        canvas.drawPoint(100, 50, paint);
 
        float[] point = {50, 150, 150, 150, 250, 150};
        canvas.drawPoints(point, paint);
 
        float[] points = {50, 250, 150, 250, 250, 250, 350, 250, 450, 250};
        canvas.drawPoints(points, 4, 4, paint);
    }

2 绘制线
public void drawLine(float startX, float startY, float stopX, float stopY,Paint paint)
startX：第一个点的起始x轴坐标
startY:第一个点的起始y轴坐标
stopX:结束点x轴坐标
stopY:结束点y轴坐标
paint:绘制线所用到的画笔
画多条线
public void drawLines(float[] pts, Paint paint)
pts：drawPoints中的参数是同一意思
public void drawLines(float[] pts, int offset, int count, Paint paint)
pts:同上
offset:和drawPoints是一样
count：和drawPoints是一样
paint:同上

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint.setColor(Color.parseColor("#456456"));
        paint.setStrokeWidth(20);
 
        canvas.drawLine(600, 100, 800, 300, paint);
 
        float[] lines = {600, 200, 800, 400, 600, 300, 800, 500};
        canvas.drawLines(lines, paint);
 
        float[] pts = {100,100,400,100,400,100,400,400,400,400,100,400,100,400,100,100};
        canvas.drawLines(pts,4,12,paint);
    }

3 绘制矩形

public void drawRect(float left, float top, float right, float bottom,  Paint paint)
left:第一个点距离x轴的距离(单位像素)
top:第一个点距离y轴的距离
right:第二个距离x轴的距离
bottom:第二个点距离y轴的距离
Rect和RectF用法上没什么差别,RectF相比Rect精度更准确
public void drawRect(Rect r, Paint paint)
r就是上面2个点封装成了一个矩形而已。

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint.setColor(Color.parseColor("#567354"));
        paint.setStrokeWidth(20);
 
        canvas.drawRect(100,100,400,400,paint);
 
        Rect rect = new Rect(500,100,600,400);
        canvas.drawRect(rect,paint);
    }

4 绘制圆角矩形
public void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)
left 第一个点x轴方向距离(像素)
top:第一个点y轴方向距离
right:第二个点x轴方向距离
bottom:第二个点y轴方向距离
rx:生成圆角椭圆的x轴半径
ry:生成圆角椭圆的y轴半径
paint:绘制圆角矩形所需的画笔

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setColor(Color.RED);
    mPaint.setStrokeWidth(10);
    mPaint.setStyle(Paint.Style.STROKE);
    canvas.drawRoundRect(100f,100f,600f,600f,20f,20f,mPaint);
}

5 绘制圆
public void drawCircle(float cx, float cy, float radius,Paint paint)
cx:圆心x轴方向距离
cy:圆心y轴方向距离
radius:圆的半径
paint:绘制圆所需的画笔

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint1 = new Paint();
        paint.setColor(Color.parseColor("#a23d46"));
        paint.setStrokeWidth(2);
        paint1.setStyle(Paint.Style.STROKE);
        paint1.setStrokeWidth(2);
 
        canvas.drawCircle(200,200,150,paint);
        canvas.drawCircle(600,200,150,paint1);
 
    }

6 绘制椭圆
椭圆是根据矩形里面的内切圆就是依赖外面的矩形而形成的

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint.setColor(Color.parseColor("#a23d46"));
        paint.setStrokeWidth(2);
 
        RectF rect = new RectF(200,200,600,500);
        canvas.drawRect(rect,paint);
        paint.setColor(Color.GRAY);
        canvas.drawOval(rect,paint);
 
    }

7 绘制弧
弧是根据椭圆来定的,椭圆是根据矩形来定的
public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)
oval:绘制弧所依赖的矩形
startAngle：弧开始的角度，以X轴正方向为0度
sweepAngle：弧持续的角度
useCenter:是否有弧的两边，True，还两边，False，只有一条弧

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setColor(Color.RED);
    mPaint.setStrokeWidth(10);
    mPaint.setStyle(Paint.Style.STROKE);
    RectF rect = new RectF(100,100,500,400);
    canvas.drawArc(rect,0,90,true,mPaint);
}

如果把第四个参数传false

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setColor(Color.RED);
    mPaint.setStrokeWidth(10);
    mPaint.setStyle(Paint.Style.STROKE);
    RectF rect = new RectF(100,100,500,400);
    canvas.drawRect(rect,mPaint);
    mPaint.setColor(Color.BLUE);
    canvas.drawOval(rect,mPaint);
    mPaint.setColor(Color.YELLOW);
    canvas.drawArc(rect,0,90,true,mPaint);
}

现在看到我们绘制的矩形,我们从中可以得出它的坐标点为圆心点,现在我把弧所持续的角度为-90

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setColor(Color.RED);
    mPaint.setStrokeWidth(10);
    mPaint.setStyle(Paint.Style.STROKE);
    RectF rect = new RectF(100,100,500,400);
    canvas.drawRect(rect,mPaint);
    mPaint.setColor(Color.BLUE);
    canvas.drawOval(rect,mPaint);
    mPaint.setColor(Color.YELLOW);
    canvas.drawArc(rect,0,-90,true,mPaint);
}

发现当所持续的角度为-90度是逆时针转90的,从这可以得出一个简单的结论:当所持续的角度为正数是顺时针,当所持续的角度为负数时,是逆时针,

现在还有一个参数startAngle就是弧开始的角度,之前是传入0,现在改为90,

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setColor(Color.RED);
    mPaint.setStrokeWidth(10);
    mPaint.setStyle(Paint.Style.STROKE);
    RectF rect = new RectF(100,100,500,400);
    canvas.drawRect(rect,mPaint);
    mPaint.setColor(Color.BLUE);
    canvas.drawOval(rect,mPaint);
    mPaint.setColor(Color.YELLOW);
    canvas.drawArc(rect,90,-90,true,mPaint);
}

现在画图来解释上面第二个和第三个参数如下图：

8 绘制多边形
public void drawPath(Path path, Paint paint)
path:路径
paint:所画路径需要的画笔

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    paint = new Paint();
    paint.setColor(Color.parseColor("#987452"));
    paint.setStrokeWidth(2);
 
    Path path = new Path();
    path.moveTo(100,100);
    path.lineTo(100,300);
    path.lineTo(500,300);
    path.close();
    canvas.drawPath(path,paint);
}

moveTo()方法是绘制多边形的起点,lineTo()是连接上一个点,构成一条线,path的close()方法一定要记得调用,close()能保证多边形构成的线能闭合,

add()的使用

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint.setColor(Color.parseColor("#987452"));
        paint.setStrokeWidth(6);
        paint.setStyle(Paint.Style.STROKE);
 
        Path path = new Path();
        path.moveTo(100,100);
        path.lineTo(100,300);
        path.lineTo(500,300);
        path.close();
        path.addCircle(100,160,30, Path.Direction.CW);
        canvas.drawPath(path,paint);
    }

9 绘制带文字的多边形

public void drawTextOnPath(String text,Path path, float hOffset,float vOffset,Paint paint)

text:绘制到path上的文字

path:路径

float hOffset  : 与路径起始点的水平偏移距离
float vOffset  : 与路径中心的垂直偏移量

paint:同上

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint.setColor(Color.parseColor("#987452"));
        paint.setStrokeWidth(2);
        paint.setStyle(Paint.Style.STROKE);
 
        String text="你们好啊 地球人";
        Path path = new Path();
        Path path1 = new Path();
        path.addCircle(300,300,200, Path.Direction.CCW);
        path1.addCircle(800,300,200, Path.Direction.CCW);
        canvas.drawPath(path,paint);
        canvas.drawPath(path1,paint);
        paint.setTextSize(50);//设置字体
        paint.setColor(Color.GREEN);
        paint.setAntiAlias(true);
        canvas.drawTextOnPath(text,path,0,0,paint);
        canvas.drawTextOnPath(text,path1,10,10,paint);
    }

分析图：

path.addCircle(300,300,200, Path.Direction.CCW);方法的第四个参数讲下,

Path.Direction有两个值：
Path.Direction.CCW：是counter-clockwise缩写，指创建逆时针方向的矩形路径；
Path.Direction.CW：是clockwise的缩写，指创建顺时针方向的矩形路径

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint.setColor(Color.parseColor("#987452"));
        paint.setStrokeWidth(2);
        paint.setStyle(Paint.Style.STROKE);
 
        String text="你们好啊 地球人";
        Path path = new Path();
        Path path1 = new Path();
        path.addCircle(300,300,200, Path.Direction.CW);
        path1.addCircle(800,300,200, Path.Direction.CCW);
        canvas.drawPath(path,paint);
        canvas.drawPath(path1,paint);
        paint.setTextSize(50);//设置字体
        paint.setColor(Color.GREEN);
        paint.setAntiAlias(true);
        canvas.drawTextOnPath(text,path,0,0,paint);
        canvas.drawTextOnPath(text,path1,10,10,paint);
    }

10 绘制文字
这里就不讲drawText()了,在讲Paint中这个讲的比较详细,可以去看看那个博客,绘制文字讲的是这个方法
  public void drawPosText(char[] text, int index, int count,float[] pos,Paint paint)
参数说明：
text:所绘制文字的数组
index：从第几个数组小标位置开始绘制
count:绘制多少文字
paint:同上
pos：是所绘制所在位置的坐标的集合

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint();
        paint.setColor(Color.parseColor("#146ad4"));
        paint.setStrokeWidth(2);
        paint.setTextSize(50);
        paint.setStyle(Paint.Style.STROKE);
 
        float[] pos = new float[]{140, 200,
                200, 300,
                320, 400,
                440, 500};
        char[] text = {'北', '京', '你', '好'};
        canvas.drawPosText(text, 0, 4, pos, paint);
    }

实现一个轨迹或者涂鸦功能

public class All_View extends View {
    private Paint mPaint;
    private Path mPath;
 
    public All_View(Context context) {
        this(context, null);
    }
 
    public All_View(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    public All_View(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPath = new Path();
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(5);
        mPaint.setTextSize(60);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(mPath, mPaint);
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
 
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(event.getX(), event.getY());
                return true;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(), event.getY());
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return super.onTouchEvent(event);
    }
}

参考：http://blog.csdn.net/coderinchina/article/details/51442075