
image.png
目錄
繪圖工具
Android下繪圖需要使用view.使用自定義的view完成繪制.
其中需要使用的有三個(gè)工具:Paint,Canvas,Path.
Paint
繪圖需要兩個(gè)工具,筆和紙。
這里的 Paint相當(dāng)于筆,而 Canvas相當(dāng)于紙,不過需要注意的是 Canvas(畫布)無限大,沒有邊界,切記理解成只有屏幕大小。
| API | 含義 |
|---|---|
| setAntiAlias(); | 設(shè)置畫筆的鋸齒效果 |
| setColor(); | 設(shè)置畫筆的顏色 |
| setARGB(); | 設(shè)置畫筆的A、R、G、B值 |
| setAlpha(); | 設(shè)置畫筆的Alpha值 |
| setTextSize(); | 設(shè)置字體的尺寸 |
| setStyle(); | 設(shè)置畫筆的風(fēng)格(空心或?qū)嵭模?/td> |
| setStrokeWidth(); | 設(shè)置空心邊框的寬度 |
| getColor(); | 獲取畫筆的顏色 |
Canvas
Canvass是畫布.
| API | 含義 |
|---|---|
| canvas.drawPoint(x,y,paint); | 繪制點(diǎn) |
| 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坐標(biāo),Y坐標(biāo),半徑,paint1); | 繪制圓 |
| canvas.drawArc(left,top,right,button, startAngle, sweepAngle, useCenter, paint2); | 繪制弧形/扇形 |
Path
顧名思義,就是路徑的意思.
使用Path不僅可以繪制簡(jiǎn)單的圖形(如圓形,矩形,直線等),也可以繪制復(fù)雜一些的圖形(如正多邊形,五角星等),還有繪制裁剪和繪制文本都會(huì)用到Path。
| API | 含義 |
|---|---|
| moveTo | 移動(dòng)起點(diǎn) |
| lineTo | 連接直線 |
| setLastPoint | 設(shè)置終點(diǎn) |
| close | 閉合路勁 |
| addRect | 添加矩形 |
| addRoundRect | 添加圓角矩形 |
| addOval | 添加橢圓 |
| addCircle | 添加圓 |
| addPah | 添加路勁 |
| addArc | 添加圓弧 |
| arcTo | 圓弧 |
| isEmpty | 是否為空 |
| isRect | 是否為矩形 |
| set | 替換路勁 |
| offset | 偏移路勁 |
| quadTo | 貝塞爾曲線 二次貝塞爾曲線的方法 |
| cubicTo | 貝塞爾曲線 三次貝塞爾曲線的方法 |
| setFillType | 填充模式 |
| getFillType | 填充模式 |
| isInverseFillType | 是否逆填充 |
| toggleInverseFillType | 相反模式 |
| getFillType | 填充模式 |
| incReserve | 提示方法 |
| computeBounds | 計(jì)算邊界 |
| reset,rewind | 重置路勁 |
| transform | 矩陣操作 |
好了,理論結(jié)束,下面開始實(shí)戰(zhàn).
使用Canvas和Paint畫圓
首先創(chuàng)建一個(gè)新的類,集成于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);
// 設(shè)置畫筆
Paint mPaint = new Paint();
// 設(shè)定畫筆顏色
mPaint.setColor(Color.BLACK);
//抗鋸齒
mPaint.setAntiAlias(true);
//獲取控件的寬高
int width = getWidth();
int height = getHeight();
//設(shè)置半徑
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
運(yùn)行的效果:

image.png
好丑,下面讓我們來畫個(gè)太極圖吧.O(∩_∩)O
小練習(xí)(太極圖源碼)
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);
// 設(shè)置畫筆
Paint mPaint = new Paint();
// 設(shè)定畫筆顏色
mPaint.setColor(Color.BLACK);
//抗鋸齒
mPaint.setAntiAlias(true);
//獲取控件的寬高
int width = getWidth();
int height = getHeight();
//設(shè)置半徑
int raius = width/4;
// 設(shè)定畫筆填充類型(不填充)
mPaint.setStyle(Paint.Style.STROKE);
//繪制圓
canvas.drawCircle(width/2, height/2, raius, mPaint);
// 設(shè)定畫弧區(qū)域
float left = width/2 - raius;
float top = height/2 - raius;
float right = width/2 + raius;
float bottom = height/2 + raius;
// 設(shè)定畫筆填充類型(填充)
mPaint.setStyle(Paint.Style.FILL);
//繪制一個(gè)黑色的半圓(下半圓)
canvas.drawArc(left, top, right, bottom, 0, 180, true, mPaint);
//繪制圓(黑色區(qū)域的頭)
canvas.drawCircle(width/2 - raius/2, height/2, raius/2, mPaint);
// 設(shè)定畫筆顏色
mPaint.setColor(Color.WHITE);
//繪制圓(白色區(qū)域的頭)
canvas.drawCircle(width/2 + raius/2, height/2, raius/2, mPaint);
//繪制圓(白色眼睛)
canvas.drawCircle(width/2 - raius/2, height/2, raius/10, mPaint);
// 設(shè)定畫筆顏色
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>
配置效果:

image.png
運(yùn)行結(jié)果:

image.png
參考
Android開發(fā)中三個(gè)繪圖工具(Paint,Canvas,Path)的基本用法(總結(jié))
Android繪圖(2D繪圖、3D繪圖)
Android 自定義View之繪圖
Android開發(fā)--圖形圖像與動(dòng)畫(一)--Paint和Canvas類