社区首页 >专栏 >绘图［上］（四）

绘图［上］（四）

李小白是一只喵

发布于 2020-04-24 00:46:10

78600

代码可运行

文章被收录于专栏：算法微时光算法微时光

运行总次数：0

代码可运行

image.png

绘图工具

Android下绘图需要使用view.使用自定义的view完成绘制．其中需要使用的有三个工具：Paint，Canvas，Path.

Paint

绘图需要两个工具，笔和纸。

这里的 Paint相当于笔，而 Canvas相当于纸，不过需要注意的是 Canvas（画布）无限大，没有边界，切记理解成只有屏幕大小。

API	含义
setAntiAlias();	设置画笔的锯齿效果
setColor();	设置画笔的颜色
setARGB();	设置画笔的A、R、G、B值
setAlpha();	设置画笔的Alpha值
setTextSize();	设置字体的尺寸
setStyle();	设置画笔的风格（空心或实心）
setStrokeWidth();	设置空心边框的宽度
getColor();	获取画笔的颜色

Canvas

Canvass是画布．

API	含义
canvas.drawPoint(x,y,paint);	绘制点
canvas.drawLine(startX,startY,endX,endY,paint);	绘制直线
canvas.drawRect(left,top,right,button,paint);	绘制矩形
canvas.drawRect(left,top,right,button,radiusX,radiusY,paint);	绘制圆角矩形
canvas.drawCircle(圆心X坐标,Y坐标,半径,paint1);	绘制圆
canvas.drawArc(left,top,right,button, startAngle, sweepAngle, useCenter, paint2);	绘制弧形/扇形

Path

顾名思义，就是路径的意思．

使用Path不仅可以绘制简单的图形（如圆形，矩形，直线等），也可以绘制复杂一些的图形（如正多边形，五角星等），还有绘制裁剪和绘制文本都会用到Path。

API	含义
moveTo	移动起点
lineTo	连接直线
setLastPoint	设置终点
close	闭合路劲
addRect	添加矩形
addRoundRect	添加圆角矩形
addOval	添加椭圆
addCircle	添加圆
addPah	添加路劲
addArc	添加圆弧
arcTo	圆弧
isEmpty	是否为空
isRect	是否为矩形
set	替换路劲
offset	偏移路劲
quadTo	贝塞尔曲线二次贝塞尔曲线的方法
cubicTo	贝塞尔曲线三次贝塞尔曲线的方法
setFillType	填充模式
getFillType	填充模式
isInverseFillType	是否逆填充
toggleInverseFillType	相反模式
getFillType	填充模式
incReserve	提示方法
computeBounds	计算边界
reset，rewind	重置路劲
transform	矩阵操作

好了，理论结束，下面开始实战．

使用Canvas和Paint画圆

首先创建一个新的类，集成于view类： HelloView.java文件：

package com.example.user.test11;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class HelloView extends View{

    public HelloView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        // 设置画笔
        Paint mPaint = new Paint();
        // 设定画笔颜色
        mPaint.setColor(Color.BLACK);
        //抗锯齿
        mPaint.setAntiAlias(true);

        //获取控件的宽高
        int width = getWidth();
        int height = getHeight();
        //设置半径
        int raius = width/4;
        //画圆
        canvas.drawCircle(width/2,height/2, raius, mPaint);
    }

}

然后再activity_main.xml中添加：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.user.test11.HelloView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

这样就可以了，代码里有注释，不再过多解释.

编译后的效果：

image.png

运行的效果：

image.png

好丑，下面让我们来画个太极图吧．Ｏ（∩＿∩）Ｏ

小练习（太极图源码)

HelloView.java文件：

package com.example.user.test11;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class HelloView extends View{

    public HelloView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        // 设置画笔
        Paint mPaint = new Paint();
        // 设定画笔颜色
        mPaint.setColor(Color.BLACK);
        //抗锯齿
        mPaint.setAntiAlias(true);

        //获取控件的宽高
        int width = getWidth();
        int height = getHeight();

        //设置半径
        int raius = width/4;

        // 设定画笔填充类型(不填充)
        mPaint.setStyle(Paint.Style.STROKE);

        //绘制圆
        canvas.drawCircle(width/2, height/2, raius, mPaint);
        // 设定画弧区域
        float left = width/2 - raius;
        float top = height/2 - raius;
        float right = width/2 + raius;
        float bottom = height/2 + raius;


        // 设定画笔填充类型(填充)
        mPaint.setStyle(Paint.Style.FILL);

        //绘制一个黑色的半圆（下半圆）
        canvas.drawArc(left, top, right, bottom, 0, 180, true, mPaint);

        //绘制圆（黑色区域的头）
        canvas.drawCircle(width/2 - raius/2, height/2, raius/2, mPaint);

        // 设定画笔颜色
        mPaint.setColor(Color.WHITE);

        //绘制圆（白色区域的头）
        canvas.drawCircle(width/2 + raius/2, height/2, raius/2, mPaint);

        //绘制圆（白色眼睛）
        canvas.drawCircle(width/2 - raius/2, height/2, raius/10, mPaint);

        // 设定画笔颜色
        mPaint.setColor(Color.BLACK);

        //绘制圆（黑色眼睛）
        canvas.drawCircle(width/2 + raius/2, height/2, raius/10, mPaint);
    }

}

activity_main.xml文件没有变化：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.user.test11.HelloView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>