绘图［上］（四）

2020-04-24 08:46:10 浏览数 (1)

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文件：

代码语言：javascript复制
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中添加：

代码语言：javascript复制
<?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文件：

代码语言：javascript复制
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文件没有变化：

代码语言：javascript复制
<?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

参考

Android开发中三个绘图工具(Paint，Canvas，Path)的基本用法（总结） Android绘图（2D绘图、3D绘图） Android 自定义View之绘图 Android开发--图形图像与动画（一）--Paint和Canvas类

canvas android api java xml

0 人点赞