Android中使用Canvas绘制简单的图形(一)

进阶版 绘制时钟 请阅读 http://blog.csdn.net/daweibalang717/article/details/51784511

图形绘制，与现实生活中进行绘画的步骤相差不多。

Canvas 相当于现实的画布，

Paint 相当于现实中的画笔* 与现实中的区别在于  ：Paint 是绘画的属性，如颜色，风格，粗细。

而真正绘制的时候，是调用画布的属性，如：canvas.drawText() 绘制文字

效果图：

布局文件：

    

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.myapplication.MainActivity">


    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"/>

            <ImageView
                android:id="@+id/imageViewPoint"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"/>

            <ImageView
                android:id="@+id/imageViewLine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"/>

            <ImageView
                android:id="@+id/imageViewRoundRect"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"/>

            <ImageView
                android:id="@+id/imageViewRoundPath"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"/>
        </LinearLayout>

    </ScrollView>
</LinearLayout>

java 文件：

  

package com.example.myapplication;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView mImageView,mImageViewPoint,mImageViewLine,mImageViewRoundRect,mImageViewPath;
    private int width=400;
    private int height=400;
    private Bitmap.Config mConfig;

    /***
     * 图形绘制，与现实生活中进行绘画的步骤相差不多。
     * Canvas 相当于现实的画布，
     * Paint 相当于现实中的画笔
     * 与现实中的区别在于  ：Paint 是绘画的属性，如颜色，风格，粗细。
     *     而真正绘制的时候，是调用画布的属性，如：canvas.drawText() 绘制文字
     *
     * 这里我们用ImageView 来显示绘制结果。
     * 如果你要写自定义控件，可实现onDraw(Canvas canvas) 方法去绘制。
     * 网上我见这个博客里面是如此实现的：http://blog.csdn.net/rhljiayou/article/details/7212620
     * */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mConfig = Bitmap.Config.ARGB_8888;
        mImageView = (ImageView) findViewById(R.id.imageView);
        mImageView.setImageBitmap(getBitmap());

        mImageViewPoint = (ImageView) findViewById(R.id.imageViewPoint);

        mImageViewLine = (ImageView) findViewById(R.id.imageViewLine);

        mImageViewRoundRect = (ImageView) findViewById(R.id.imageViewRoundRect);

        mImageViewPath = (ImageView) findViewById(R.id.imageViewRoundPath);

        doDrawPoint();
        doDrawLine();
        doDrawRoundRect();
        doDrawPath();
    }

    //绘制路径: 绘制一个菱形
    private void doDrawPath(){
        Bitmap bm = Bitmap.createBitmap(width,height,mConfig);
        Canvas canvas = new Canvas(bm);
        canvas.drawColor(Color.parseColor("#666666"));

        Paint paint = new Paint();
        paint.setColor(Color.WHITE);
        //画笔的风格，就是边框（绘制的是空心的）
        //paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);

        //绘制路径
        Path path = new Path();
        //从哪个点开始绘制
        path.moveTo(0,width/2);
        //然后绘制到哪个点
        path.lineTo(height/2,width);
        //然后再绘制到哪个点
        path.lineTo(height,width/2);
        //然后再绘制到哪个点
        path.lineTo(height/2,0);
        //然后再绘制到哪个点
        path.lineTo(0,width/2);

        //按路径绘制，就是一个菱形
        canvas.drawPath(path,paint);
        mImageViewPath.setImageBitmap(bm);


    }



    //绘制圆角矩形
    private void doDrawRoundRect(){
        //创建Bitmap
        Bitmap bm = Bitmap.createBitmap(width,height,mConfig);
        //创建画布，把 bm 作为画布的背景（通俗点说就是bm作为画画的纸）

        Canvas canvas = new Canvas(bm);
        //然后画出灰色作为背景。 Color.parseColor("#666666") 把十六进制解析成颜色
        canvas.drawColor(Color.parseColor("#666666"));

        //创建画笔
        Paint paint = new Paint();
        //画笔设置成白色
        paint.setColor(Color.WHITE);
        //画笔的风格，就是边框（绘制的是空心的）
        //paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);

        //用来标记矩形的四个点
        RectF rect = new RectF();

        //----------下面是矩形形圆角------
 /*       rect.set(10,100,width-10,height-100);
        float rx =10;
        float ry =10;
        canvas.drawRoundRect(rect,rx,ry,paint);*/

        //----------下面是椭圆------
/*        rect.set(10,100,width-10,height-100);
        float rx =(width-20)/2;
        float ry =(height-200)/2;
        canvas.drawRoundRect(rect,rx,ry,paint);*/

        //----------下面是圆------
/*        rect.set(10,10,width-10,height-10);
        float rx =(width-20)/2;
        float ry =(height-20)/2;
        canvas.drawRoundRect(rect,rx,ry,paint);*/

        //----------下面是正方形圆角------
        // 原点（0,0） 即左上角
        //参数public void set (float left, float top, float right, float bottom) ：

        rect.set(10,10,width-10,height-10);
        //rx  ry 如果为0，那么就是没有圆角
        float rx =10;
        float ry =10;
        //绘制一个圆角矩形。 第一个参数是一个矩形，第二个是 x轴 圆角半径， 第三个是 y轴圆角半径，第四个是画笔
        canvas.drawRoundRect(rect,rx,ry,paint);

        mImageViewRoundRect.setImageBitmap(bm);
    }
    //画多条线
    private void doDrawLine(){
        Bitmap bm = Bitmap.createBitmap(width,height,mConfig);
        Canvas canvas = new Canvas(bm);
        canvas.drawColor(Color.parseColor("#666666"));

        Paint paint = new Paint();
        paint.setColor(Color.WHITE);
        paint.setStrokeWidth(5);
        //线的起始坐标 与结束坐标 比如第一条线： 起始坐标是（10,10） 结束坐标（width-10,10）
        //这里四条线正好是一个矩形
        float[] pts = new float[]{
                10,10,width-10,10,
                width-10,10,width-10,height-10,
                width-10,height-10,10,height-10,
                10,10,10,height-10

        };
        //第一个参数是线的数组，第二个参数是从数组第几条线开始画， 第三个参数是画几条，第四个是画笔
        canvas.drawLines(pts,0,pts.length,paint);
        mImageViewLine.setImageBitmap(bm);
    }

    //画点
    private void doDrawPoint(){
        Bitmap bm = Bitmap.createBitmap(width,height,mConfig);
        Canvas canvas = new Canvas(bm);
        canvas.drawColor(Color.parseColor("#666666"));

        Paint paint = new Paint();
        paint.setColor(Color.WHITE);
        paint.setStrokeWidth(5);
        //坐标应该是成对出现的 (x,y)
        float[] pts = new float[]{
          20,20,30,30,40,40,50,50
        };
        //画出多个点
        canvas.drawPoints(pts,paint);
        mImageViewPoint.setImageBitmap(bm);

    }

    private Bitmap getBitmap() {
        //创建Bitmap
        Bitmap bm = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888);

        //创建画布
        Canvas canvas = new Canvas(bm);

        //创建画笔
        Paint rectPain = new Paint();
       // rectPain.setColor(Color.YELLOW);


        //配置 白黄绿 三个颜色渐变
        int[] colors = new int[]{Color.WHITE,Color.YELLOW,Color.GREEN};
        //这个渐变色是位于哪，  白色 0%  黄色 是 50%  绿色是100%
        float[] positions = new float[]{0f,0.5f,1f};
        //线性 渐变 默认是从左上角到右下角
        //TileMode 三个模式：
        // CLAMP  如果目标比要绘制的渐变色区域大，就用最后一种颜色填满
        // REPEAT  如果目标比要绘制的渐变色区域大，就不断重复
        // MIRROR  镜像，就像照镜子，颜色的排列顺序是反序的。
        //这里 如果目标与绘制的渐变色区域一样大
        LinearGradient shader = new LinearGradient(0,0,width,height,colors,positions, Shader.TileMode.REPEAT);
        //线性 渐变 默认是从左上角到右下角 ，这里旋转45度，让颜色从上到下
/*        Matrix matrix = new Matrix();
        matrix.setRotate(45,width/2,height/2);
        shader.setLocalMatrix(matrix);*/
        //画笔设置渐变属性
        rectPain.setShader(shader);


        //创建矩形
        canvas.drawRect(0,0,width,height,rectPain);

        //创建Paint用于写字
        Paint textPaint = new Paint();
        textPaint.setColor(Color.BLUE);
        textPaint.setTextSize(50);
        textPaint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD_ITALIC));
        textPaint.setTextAlign(Paint.Align.CENTER);

        //写字
        canvas.drawText("Daweibalang717",width/2,height/2,textPaint);
        return bm;
    }
}

本代码整理于学习视频，是用于总结与备忘。函数参数说明都在代码注释中。

canvas 方法总结：