Android Canvas繪圖詳解（圖文）
Android中使用圖形處理引擎，2D部分是android SDK內部本身提供，3D部分是用Open GL ES 1.0。今天咱們主要要了解的是2D相關的，若是你想看3D的話那麼能夠跳過這篇文章。php
大 部分2D使用的api都在android.graphics和android.graphics.drawable包中。他們提供了圖形處理相關的： Canvas、ColorFilter、Point(點)和RetcF(矩形)等，還有一些動畫相關的：AnimationDrawable、 BitmapDrawable和TransitionDrawable等。以圖形處理來講，咱們最經常使用到的就是在一個View上畫一些圖片、形狀或者自定 義的文本內容，這裏咱們都是使用Canvas來實現的。你能夠獲取View中的Canvas對象，繪製一些自定義形狀，而後調用View. invalidate方法讓View從新刷新，而後繪製一個新的形狀，這樣達到2D動畫效果。下面咱們就主要來了解下Canvas的使用方法。html
Canvas對象的獲取方式有兩種：一種咱們經過重寫View.onDraw方法，View中的Canvas對象會被當作參數傳遞過來，咱們操做這個Canvas，效果會直接反應在View中。另外一種就是當你想建立一個Canvas對象時使用的方法：java
|
1
2
|
Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas c =
new
Canvas(b);
|
上 面代碼建立了一個尺寸是100*100的Bitmap，使用它做爲Canvas操做的對象，這時候的Canvas就是使用建立的方式。當你使用建立的 Canvas在bitmap上執行繪製方法後，你還能夠將繪製的結果提交給另一個Canvas，這樣就能夠達到兩個Canvas協做完成的效果，簡化邏 輯。可是android SDK建議使用View.onDraw參數裏提供的Canvas就好，不必本身建立一個新的Canvas對象。接下來咱們看看Canvas提供咱們哪些 繪製圖形的方法。咱們建立一個自定義View對象，使用onDraw方法提供的Canvas進行繪製圖形。android
CanvasDemoActivity.java：canvas
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
package com.android777.demo.uicontroller.graphics;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
public class CanvasDemoActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new CustomView1(this));
}
/**
* 使用內部類 自定義一個簡單的View
* @author Administrator
*
*/
class CustomView1 extends View{
Paint paint;
public CustomView1(Context context) {
super(context);
paint = new Paint(); //設置一個筆刷大小是3的黃色的畫筆
paint.setColor(Color.YELLOW);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(3);
}
//在這裏咱們將測試canvas提供的繪製圖形方法
@Override
protected void onDraw(Canvas canvas) {
}
}
}
|
執行結果是一片黑色的區域，由於在自定義的CustomView1中，咱們沒有作任何的繪製操做。canvas提供的繪製圖形的方法都是以draw開頭的，咱們能夠查看api：api
從上面方法的名字看來咱們能夠知道Canvas能夠繪製的對象有：弧線(arcs)、填充顏色(argb和color)、 Bitmap、圓(circle和oval)、點(point)、線(line)、矩形(Rect)、圖片(Picture)、圓角矩形 (RoundRect)、文本(text)、頂點(Vertices)、路徑(path)。經過組合這些對象咱們能夠畫出一些簡單有趣 的界面出來，可是光有這些功能仍是不夠的，若是我要畫一個儀表盤(數字圍繞顯示在一個圓圈中)呢？ 幸虧Android還提供了一些對Canvas位置轉換的方法：rorate、scale、translate、skew(扭曲)等，並且它容許你經過獲 得它的轉換矩陣對象(getMatrix方法，不知道什麼是轉換矩陣？看這裏) 直接操做它。這些操做就像是雖然你的筆仍是原來的地方畫，可是畫紙旋轉或者移動了，因此你畫的東西的方位就產生變化。爲了方便一些轉換操做，Canvas 還提供了保存和回滾屬性的方法(save和restore)，好比你能夠先保存目前畫紙的位置(save)，而後旋轉90度，向下移動100像素後畫一些 圖形，畫完後調用restore方法返回到剛纔保存的位置。下面咱們就演示下canvas的一些簡單用法：app
|
1
2
3
4
|
protected void onDraw(Canvas canvas) {
canvas.drawCircle(100, 100, 90, paint);
}
|
效果是：ide
@Override
protected void onDraw(Canvas canvas) {
//繪製弧線區域
RectF rect = new RectF(0, 0, 100, 100);
canvas.drawArc(rect, //弧線所使用的矩形區域大小
0, //開始角度
90, //掃過的角度
false, //是否使用中心
paint);
}
使用下面的代碼：
protected void onDraw(Canvas canvas) {
//繪製弧線區域
RectF rect = new RectF(0, 0, 100, 100);
canvas.drawArc(rect, //弧線所使用的矩形區域大小
0, //開始角度
90, //掃過的角度
true, //是否使用中心
paint);
}
兩圖對比咱們能夠發現，當 drawArcs(rect,startAngel,sweepAngel,useCenter,paint)中的useCenter爲false時，弧 線區域是用弧線開始角度和結束角度直接鏈接起來的，當useCenter爲true時，是弧線開始角度和結束角度都與中心點鏈接，造成一個扇形。
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLUE);
}
canvas.drawColor是直接將View顯示區域用某個顏色填充滿。
@Override
protected void onDraw(Canvas canvas) {
//畫一條線
canvas.drawLine(10, 10, 100, 100, paint);
}
Canvas.drawOval：
@Override
protected void onDraw(Canvas canvas) {
//定義一個矩形區域
RectF oval = new RectF(0,0,200,300);
//矩形區域內切橢圓
canvas.drawOval(oval, paint);
}
canvas.drawPosText：
@Override
protected void onDraw(Canvas canvas) {
//按照既定點 繪製文本內容
canvas.drawPosText("Android777", new float[]{
10,10, //第一個字母在座標10,10
20,20, //第二個字母在座標20,20
30,30, //....
40,40,
50,50,
60,60,
70,70,
80,80,
90,90,
100,100
}, paint);
}
canvas.drawRect：@Override
protected void onDraw(Canvas canvas) {
RectF rect = new RectF(50, 50, 200, 200);
canvas.drawRect(rect, paint);
}
}
canvas.drawRoundRect：@Override
protected void onDraw(Canvas canvas) {
RectF rect = new RectF(50, 50, 200, 200);
canvas.drawRoundRect(rect,
30, //x軸的半徑
30, //y軸的半徑
paint);
}
canvas.drawPath：
@Override
protected void onDraw(Canvas canvas) {
Path path = new Path(); //定義一條路徑
path.moveTo(10, 10); //移動到 座標10,10
path.lineTo(50, 60);
path.lineTo(200,80);
path.lineTo(10, 10);
canvas.drawPath(path, paint);
}
canvas.drawTextOnPath：
@Override
protected void onDraw(Canvas canvas) {
Path path = new Path(); //定義一條路徑
path.moveTo(10, 10); //移動到 座標10,10
path.lineTo(50, 60);
path.lineTo(200,80);
path.lineTo(10, 10);
// canvas.drawPath(path, paint);
canvas.drawTextOnPath("Android777開發者博客", path, 10, 10, paint);
}
位置轉換方法，canvas.rorate和canvas.translate：
@Override
protected void onDraw(Canvas canvas) {
paint.setAntiAlias(true);
paint.setStyle(Style.STROKE);
canvas.translate(canvas.getWidth()/2, 200); //將位置移動畫紙的座標點:150,150
canvas.drawCircle(0, 0, 100, paint); //畫圓圈
//使用path繪製路徑文字
canvas.save();
canvas.translate(-75, -75);
Path path = new Path();
path.addArc(new RectF(0,0,150,150), -180, 180);
Paint citePaint = new Paint(paint);
citePaint.setTextSize(14);
citePaint.setStrokeWidth(1);
canvas.drawTextOnPath("http://www.android777.com", path, 28, 0, citePaint);
canvas.restore();
Paint tmpPaint = new Paint(paint); //小刻度畫筆對象
tmpPaint.setStrokeWidth(1);
float y=100;
int count = 60; //總刻度數
for(int i=0 ; i <count ; i++){
if(i%5 == 0){
canvas.drawLine(0f, y, 0, y+12f, paint);
canvas.drawText(String.valueOf(i/5+1), -4f, y+25f, tmpPaint);
}else{
canvas.drawLine(0f, y, 0f, y +5f, tmpPaint);
}
canvas.rotate(360/count,0f,0f); //旋轉畫紙
}
//繪製指針
tmpPaint.setColor(Color.GRAY);
tmpPaint.setStrokeWidth(4);
canvas.drawCircle(0, 0, 7, tmpPaint);
tmpPaint.setStyle(Style.FILL);
tmpPaint.setColor(Color.YELLOW);
canvas.drawCircle(0, 0, 5, tmpPaint);
canvas.drawLine(0, 10, 0, -65, paint);
}
上面幾個例子基本已經將經常使用的canvas.draw*方法測試過了，咱們結合一些事件，作一些有用戶交互的應用：測試
package com.android777.demo.uicontroller.graphics;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
public class CanvasDemoActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new CustomView1(this));
}
/**
* 使用內部類 自定義一個簡單的View
* @author Administrator
*
*/
class CustomView1 extends View{
Paint paint;
private ArrayList<PointF> graphics = new ArrayList<PointF>();
PointF point;
public CustomView1(Context context) {
super(context);
paint = new Paint(); //設置一個筆刷大小是3的黃色的畫筆
paint.setColor(Color.YELLOW);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(3);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
graphics.add(new PointF(event.getX(),event.getY()));
invalidate(); //從新繪製區域
return true;
}
//在這裏咱們將測試canvas提供的繪製圖形方法
@Override
protected void onDraw(Canvas canvas) {
for (PointF point : graphics) {
canvas.drawPoint(point.x, point.y, paint);
}
// super.onDraw(canvas);
}
}
}
當用戶點擊時將出現一個小點，拖動時將畫出一條用細點組成的虛線：動畫
- 1. [Android] Android Canvas繪圖詳解（圖文）
- 2. Android Canvas繪圖詳解（圖文）
- 3. Canvas繪圖詳解
- 4. Android 繪圖——Canvas
- 5. Android Canvas繪圖
- 6. 【HTML5】Canvas繪圖詳解-1
- 7. canvas繪圖API詳解
- 8. 繪圖——Android繪圖基礎：Canvas、Paint等
- 9. 圖形繪製 Canvas Paint Path 詳解
- 10. Canvas 繪圖
- 更多相關文章...
- • R 繪圖 - 餅圖 - R 語言教程
- • R 繪圖 - 中文支持 - R 語言教程
- • Flink 數據傳輸及反壓詳解
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策