Android画图一二

入门

参考Android绘图深度解析这篇博客，通过例子来了解Android画图过程：继承View组件→重写onDraw(canvas)方法，相关类和接口有：

名称	功能
Drawable	绘图结果表现出来的接口
Bitmap	可以来自资源或文件，也可以在程序中创建，实际上的功能相当于图片的存储空间
Canvas	代表了”依附”于指定View的画布，通过Canvas类的成员方法能够实现绘制各种图形
Paint	代表了Canvas上的画笔，主要用于设置绘制风格，画笔颜色，粗细，填充风格等。
Path	代表任意多条直线连接而成的任意图形，canvas.drawPath(path,paint)来绘制出任意形状的图形，另外通过PathEffect定义绘制路径图形效果
Shader	定义渐变填充，包含LinearGradient、RadialGradient和 SweepGradient

可以看看Android画布绘图这个博客做进一步了解。

代码

例子代码如下：

import android.content.Context;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
import com.leon.myappdraw1.R;

/**
 * Android画图入门例子
 */
public class MyView extends View {

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    // 重写该方法，进行绘图
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawColor(Color.WHITE);  // 把整张画布绘制成白色

        Paint paint = new Paint();
        paint.setAntiAlias(true); // 抗锯齿
        paint.setColor(Color.BLUE); // 画笔颜色
        paint.setStyle(Paint.Style.STROKE); // 绘制风格（空心或实心）
        paint.setStrokeWidth(3);            // 线框粗细

        canvas.drawCircle(40, 40, 30, paint);   // 绘制圆形
        canvas.drawRect(10, 80, 70, 140, paint); // 绘制正方形
        canvas.drawRect(10, 150, 70, 190, paint); // 绘制矩形
        canvas.drawRoundRect(new RectF(10, 200, 70, 230), 15, 15, paint);// 绘制圆角矩形
        canvas.drawOval(new RectF(10, 240, 70, 270), paint);         // 绘制椭圆

        // 定义一个Path对象，封闭成一个三角形。
        Path path1 = new Path();
        path1.moveTo(10, 340);
        path1.lineTo(70, 340);
        path1.lineTo(40, 290);
        path1.close();
        canvas.drawPath(path1, paint);// 根据Path进行绘制，绘制三角形
        // 定义一个Path对象，封闭成一个五角形。
        Path path2 = new Path();
        path2.moveTo(26, 360);
        path2.lineTo(54, 360);
        path2.lineTo(70, 392);
        path2.lineTo(40, 420);
        path2.lineTo(10, 392);
        path2.close();
        canvas.drawPath(path2, paint);// 根据Path进行绘制，绘制五角形

        // ----------设置填充风格后绘制----------
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        canvas.drawCircle(120, 40, 30, paint);              //绘制圆
        canvas.drawRect(90, 80, 150, 140, paint);        // 绘制正方形
        canvas.drawRect(90, 150, 150, 190, paint);        // 绘制矩形
        canvas.drawRoundRect(new RectF(90, 200, 150, 230), 15, 15, paint); // 绘制圆角矩形
        canvas.drawOval(new RectF(90, 240, 150, 270), paint);        // 绘制椭圆
        Path path3 = new Path();
        path3.moveTo(90, 340);
        path3.lineTo(150, 340);
        path3.lineTo(120, 290);
        path3.close();
        canvas.drawPath(path3, paint);        // 绘制三角形
        Path path4 = new Path();
        path4.moveTo(106, 360);
        path4.lineTo(134, 360);
        path4.lineTo(150, 392);
        path4.lineTo(120, 420);
        path4.lineTo(90, 392);
        path4.close();
        canvas.drawPath(path4, paint);         // 绘制五角形

        // ----------设置渐变器后绘制----------
        // 为Paint设置渐变器
        Shader mShader = new LinearGradient(0, 0, 40, 60, new int[] {
                Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW }, null,
                Shader.TileMode.REPEAT);
        paint.setShader(mShader);
        // 设置阴影
        paint.setShadowLayer(25, 10, 10, Color.GRAY);

        canvas.drawCircle(200, 40, 30, paint);// 绘制圆形
        canvas.drawRect(170, 80, 230, 140, paint);// 绘制正方形
        canvas.drawRect(170, 150, 230, 190, paint);// 绘制矩形
        canvas.drawRoundRect(new RectF(170, 200, 230, 230), 15, 15, paint);// 绘制圆角矩形
        canvas.drawOval(new RectF(170, 240, 230, 270), paint);// 绘制椭圆

        Path path5 = new Path();
        path5.moveTo(170, 340);
        path5.lineTo(230, 340);
        path5.lineTo(200, 290);
        path5.close();
        canvas.drawPath(path5, paint);// 根据Path进行绘制，绘制三角形

        Path path6 = new Path();
        path6.moveTo(186, 360);
        path6.lineTo(214, 360);
        path6.lineTo(230, 392);
        path6.lineTo(200, 420);
        path6.lineTo(170, 392);
        path6.close();
        canvas.drawPath(path6, paint);// 根据Path进行绘制，绘制五角形

        // ----------设置字符大小后绘制字符串----------
        paint.setTextSize(24);
        paint.setShader(null);
//        paint.clearShadowLayer();
        // 绘制字符串
        canvas.drawText("圆形", 240, 50, paint);
        canvas.drawText("正方形", 240, 120,paint);
        canvas.drawText("长方形", 240, 175,paint);
        canvas.drawText("圆角矩形", 230,220, paint);
        canvas.drawText("椭圆形", 240, 260,paint);
        canvas.drawText("三角形", 240, 325, paint);
        canvas.drawText("五角形", 240, 390, paint);
        //绘制图片
        canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher), 500, 150, paint);

    }
}

效果如下：

错误

遇到的错误情况记录如下：

Blur radius out of 0-25 pixel bound

在Canvas上添加文本。使用一个drawText的时候没有问题，但是使用多个时就报错:

E/rsC++: RS CPP error: Blur radius out of 0-25 pixel bound
E/rsC++: RS CPP error (masked by previous error): Allocation creation failed
E/rsC++: RS CPP error (masked by previous error): Allocation creation failed
E/rsC++: RS CPP error (masked by previous error): Blur radius out of 0-25 pixel bound

错误代码为

paint.setShadowLayer(45, 10, 10, Color.GRAY);

设置Text的阴影层半径应在0~25px
所以在绘制字符串时先paint.clearShadowLayer();清理阴影层或者修改半径paint.setShadowLayer(25, 10, 10, Color.GRAY);即可。

小结

了解Android的常用的画图API