Canvas绘图的使用(一)

本文章的所有知识都是从这里学习的 http://blog.csdn.net/iispring/article/details/49770651

概述

Adnroid通过Canvas类提供了很多的drawxxx(),我们可以通过这些方法绘制各种各样的图形.
Canvas绘图有三个基本要素:Canvas(画布),绘图坐标系,Paint(画笔).

Cavnvas坐标系和绘图坐标系

Canvas绘图中牵扯到两种坐标系:Cavnvas坐标系和绘图坐标系.

• Canvas坐标系

  Canvas的坐标系是其本身的坐标系,有且只有一个并是唯一不变的,其坐标原点是View的左上角,和Android屏幕的坐标系一样,向右为正,向下为正.

• 绘图坐标系

  绘图坐标系中的坐标是Canvas的drawxxx()中传入的各种坐标,在初始状态下,绘图坐标系的原点与Canvas坐标系的坐标原点完全重合,当Canvas的drawxxx()传入坐标时,绘图坐标系的坐标将被改变,每次绘图时所用到的坐标系都是最新状态的绘图坐标系.

绘制坐标系:

    //绘制坐标系 private void drawAxis(Canvas canvas) {    int height = canvas.getHeight();    int width = canvas.getWidth();    mPaint.setStyle(Paint.Style.STROKE);    mPaint.setStrokeCap(Paint.Cap.ROUND);    mPaint.setStrokeWidth(6 * density);    //红色x轴 绿色y轴    mPaint.setColor(Color.RED);    canvas.drawLine(0,0,width,0,mPaint);  //绘制x轴    mPaint.setColor(Color.GREEN);    canvas.drawLine(0,0,0,height,mPaint);    //平移旋转坐标系后再此绘制    canvas.translate(width/2,height/2);    canvas.rotate(30);    mPaint.setColor(Color.RED);    canvas.drawLine(0,0,width,0,mPaint);  //绘制x轴    mPaint.setColor(Color.GREEN);    canvas.drawLine(0,0,0,height,mPaint);}

drawARGB

A:alpha R:red G:green B:blue

//绘制argb颜色private void drawARGB(Canvas canvas) {    canvas.drawARGB(255,255,0,0);}

drawText

Android中的画笔有两种Paint和TextPaint，我们可以Paint来画其他的图形：点、线、矩形、椭圆等。TextPaint继承自Paint，是专门用来画文本的，由于TextPaint继承自Paint，所以也可以用TextPaint画点、线、面、矩形、椭圆等图形

private void drawText(Canvas canvas) {    int width = canvas.getWidth();    int translateY= (int) fontSize;    //绘制时,文本会被状态栏遮盖,所以要向下平移         //绘制正常文本    canvas.save();    canvas.translate(0,translateY);    canvas.drawText("绘制正常文本",0,0,mPaint);    canvas.restore();    translateY+=fontSize;    mPaint.setColor(Color.RED);    canvas.save();    canvas.translate(width/2,translateY);    canvas.drawText("绘制红色文本",0,0,mPaint);    canvas.restore();    mPaint.setColor(Color.BLACK);    translateY+=fontSize;    //设置左对齐    mPaint.setTextAlign(Paint.Align.LEFT);//设置左对齐    canvas.save();    canvas.translate(0, translateY);    canvas.drawText("左对齐文本", 0, 0, mPaint);    canvas.restore();    translateY+=fontSize;    //设置居中对齐    mPaint.setTextAlign(Paint.Align.CENTER);//设置居中对齐    canvas.save();    canvas.translate(width/2, translateY);    canvas.drawText("居中对齐文本", 0, 0, mPaint);    canvas.restore();    translateY+=fontSize;    //设置右对齐    mPaint.setTextAlign(Paint.Align.RIGHT);//设置右对齐    canvas.save();    canvas.translate(0, translateY);    canvas.drawText("右对齐文本", 0, 0, mPaint);    canvas.restore();    mPaint.setTextAlign(Paint.Align.LEFT);//重新设置为左对齐    translateY+=fontSize;    //设置下划线    mPaint.setUnderlineText(true);//设置具有下划线    canvas.save();    canvas.translate(width/2, translateY);    canvas.drawText("下划线文本", 0, 0, mPaint);    canvas.restore();    mPaint.setUnderlineText(false);//重新设置为没有下划线    translateY+=fontSize;    //绘制加粗文字    mPaint.setFakeBoldText(true);//将画笔设置为粗体    canvas.save();    canvas.translate(0, translateY);    canvas.drawText("粗体文本", 0, 0, mPaint);    canvas.restore();    mPaint.setFakeBoldText(false);//重新将画笔设置为非粗体状态    translateY+=fontSize;    //文本绕绘制起点顺时针旋转    canvas.save();    canvas.translate(width/2, translateY);    canvas.rotate(20);    canvas.drawText("文本绕绘制起点旋转20度", 0, 0, mPaint);    canvas.restore();}

drawPoint

private void drawPoint(Canvas canvas) {    int width = canvas.getWidth();    int height = canvas.getHeight();    mPaint.setColor(Color.RED);    mPaint.setStrokeWidth(50*density); //设置线宽,否则无法绘制点    mPaint.setStrokeCap(Paint.Cap.BUTT);    canvas.drawPoint(width/2,height/6,mPaint);    canvas.translate(0,height/3);    mPaint.setStrokeCap(Paint.Cap.ROUND);    canvas.drawPoint(width/2,height/6,mPaint);    canvas.translate(0,height/3);    mPaint.setStrokeCap(Paint.Cap.SQUARE);    canvas.drawPoint(width/2,height/6,mPaint);}

drawLine

    private void drawLine(Canvas canvas) {        int width = canvas.getWidth();        int height = canvas.getHeight();        mPaint.setColor(Color.RED);        mPaint.setStrokeWidth(20*density);//        canvas.translate(0,height/14);//        canvas.drawLine(100,0,width-100,0,mPaint);//        mPaint.setStrokeCap(Paint.Cap.ROUND);        canvas.translate(0,height/12);        canvas.drawLine(100,0,width-100,0,mPaint);    }

drawRect

private void drawRect(Canvas canvas) {    //设置左上右下值    mPaint.setColor(Color.RED);    canvas.drawRect(20,20,canvas.getWidth()/2,canvas.getHeight()/2,mPaint);}

drawCircle

 private void drawCircle(Canvas canvas) {    int width = canvas.getWidth();    int height = canvas.getHeight();//  mPaint.setStyle(Paint.Style.STROKE); // 只有轮廓    mPaint.setStyle(Paint.Style.FILL); //默认为fill    mPaint.setColor(Color.RED);    canvas.drawCircle(width / 2, height / 2, height / 4, mPaint);    mPaint.setColor(Color.GREEN);    canvas.drawCircle(width / 2, height / 2, height / 6, mPaint);}

drawBitmap

        //直接完全绘制Bitmap        canvas.drawBitmap(mBitmap, 0, 0, mPaint);        //绘制Bitmap的一部分，并对其拉伸        //srcRect定义了要绘制Bitmap的哪一部分        Rect srcRect = new Rect();        srcRect.left = 0;        srcRect.right = mBitmap.getWidth();        srcRect.top = 0;        srcRect.bottom = (int)(0.33 * mBitmap.getHeight());        float radio = (float)(srcRect.bottom - srcRect.top)  / mBitmap.getWidth();        //dstRecF定义了要将绘制的Bitmap拉伸到哪里        RectF dstRecF = new RectF();        dstRecF.left = 0;        dstRecF.right = canvas.getWidth();        dstRecF.top = mBitmap.getHeight();        float dstHeight = (dstRecF.right - dstRecF.left) * radio;        dstRecF.bottom = dstRecF.top + dstHeight;        canvas.drawBitmap(mBitmap, srcRect, dstRecF, mPaint);