Android 2D繪圖初步

来源:http://www.cnblogs.com/chenkailw/archive/2016/01/08/5113888.html
-Advertisement-
Play Games

Android是通過graphics類來顯示2D圖形的。其中graphics中包括了Canvas、Paint、Color、Bitmap等類。graphics具有繪製點、線、顏色、2D幾何圖形、圖像處理等功能。其中Color和Bitmap是很常用的類，我要講的是Canvas和Paint。顧名思義...


      Android是通過graphics類來顯示2D圖形的。其中graphics中包括了Canvas、Paint、Color、Bitmap等類。graphics具有繪製點、線、顏色、2D幾何圖形、圖像處理等功能。其中Color和Bitmap是很常用的類，我要講的是Canvas和Paint。顧名思義就是畫布和畫筆。接下來我將通過繪製太極圖來學習Android繪圖機制。 

      Paint類 
　　和日常繪圖一樣，要繪製圖形，首先得選擇合適的畫筆。那麼同理android中繪圖首先得調整畫筆，按照自己的需要設置畫筆的相關屬性，系統給我提供的常用API如下： 
　　setColor(); //設置畫筆的顏色 
　　setAntiAlias(); //設置畫筆的鋸齒效果 
　　setARGB(); //設置畫筆的A、R、G、B值 
　　setAlpha(); //設置畫筆的Alpha值 
　　setTextSize(); //設置字體的尺寸 
　　setStyle(); //設置畫筆的風格（空心或實心） 
　　setStrokeWidth(); //設置空心邊框的寬度 
　　getColor(); //獲取畫筆的顏色

　　Canvas 
　　Canvas即畫布，我們需要做的就是使用之前設置好的Paint來繪製圖形。那麼我們先看看系統給我們提供的方法： 
　　canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint);//繪製直線 
　　canvas.drawRect(float left, float top, float right, float bottom, Paint paint);//繪製矩形 
　　canvas.drawCircle(float cx, float cy, float radius, Paint paint);//繪製圓 
　　canvas.drawArc(float cx, float cy, float radius, Paint paint);//繪製弧形、和扇形 
　   canvas.drawText(String text, float x, float y, Paint paint);//　繪製字元 
　　canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint);//繪製Bitmap

      介紹完這些函數，下麵通過繪製太極圖來看看怎麼使用它們： 
　　先看看太極圖： 

                           

     現在就要開始一步一步的將他畫出來， 我們可以借鑒圖層的概念。首先繪製最底部的圖層，為了方便我們將其左，右兩邊分別設置白色和黑色： 

           

     圖中（x，y）是圓心坐標。這裡我設置的x=getWidth() / 2；y=getHeight() / 2；半徑r=getHeight() / 2； 
　　現在我們就來看看代碼，在定義View的OnDraw（Canvas canvas）方法中： 

 

//繪製最外層大圓
        mPaint.setColor(Color.BLACK);//設置畫筆顏色為黑色
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//設置畫筆style實心
        RectF rect= new RectF(getWidth() / 2 - getHeight() / 2,
                0, getWidth() / 2 + getHeight() / 2, getHeight());//圓弧的外接矩形
        canvas.drawArc(rect, 270, 180, false, mPaint);
        mPaint.setColor(Color.WHITE);//設置畫筆顏色為白色
        canvas.drawArc(rect, 90, 180, false, mPaint);

      代碼中rect即圓的外接四邊形，其構造函數RectF(float left, float top, float right, float bottom)的四個參數分別對應四邊形最左邊的x坐標值；左上邊的y坐標值；最右邊的x坐標值；最下邊的y坐標值。可以看出代碼中： 
      left=getWidth() / 2 - getHeight() / 2； 
      top=0； 
      right=getWidth() / 2 + getHeight() / 2； 
      bottom=getHeight()； 
      四個值確定了圓的外接四邊形。 
　　canvas.drawArc(rect, 90, 180, false, mPaint);第一個參數即是我們上邊確定的區域，第二個參數是開始繪製的角度（90度，ｘ軸方向順時針旋轉），第三個參數掃描的度數，第四個參數設置好的畫筆Paint。 
　　接下來我們要著手繪製中間圖層，中間圖層可以看做是兩個上下外切的半圓，上邊白色右半圓，下邊黑色左半圓： 

                           

      同理，我們應該也是先確定外接四邊形的區域，然後在畫圓弧這裡就不再詳述。 

//繪製中間層上邊圓
        mPaint.setColor(Color.BLACK);
        rect= new RectF(getWidth()/2-getHeight()/4,0,getWidth() / 2 + getHeight() / 4, getHeight() /2);
        canvas.drawArc(rect, 90, 180, false, mPaint);
        //繪製中間層下邊圓
        mPaint.setColor(Color.WHITE);
        rect= new RectF(getWidth()/2-getHeight() / 4, getHeight() / 2, getWidth() / 2 + getHeight() / 4, getHeight());
        canvas.drawArc(rect, 270, 180, false, mPaint);

      最後，最上邊圖層上下兩個小圓 

//繪製最上層白色小圓
        mPaint.setColor(Color.WHITE);
        canvas.drawCircle(getWidth() / 2, getHeight() / 4, getHeight() / 10, mPaint);
        //繪製最上層黑色小圓
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(getWidth() / 2, getHeight() * 3 / 4, getHeight() / 10, mPaint);

      canvas.drawCircle是用來畫圓的，第一個參數是圓心x坐標值，第二個參數是y坐標值，第三個坐標是圓的半徑，第四個是設置的畫筆。 
　　到此就畫出了一個太極圖。 

      附上自定義View的代碼 ：

package com.chuck.mobile.changecountview.widget;

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

/**
 * 項目名稱：changecountview
 * 類描述：
 * 創建人：Administrator
 * 創建時間：2015/12/11 16:37
 * 修改人：Administrator
 * 修改時間：2015/12/11 16:37
 * 修改備註：
 */
public class CustomeView extends View{
    private Paint mPaint=new Paint();
    private Path path=new Path();
    private float degress=90;
    public CustomeView(Context context) {
        super(context);
    }

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

    public CustomeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //繪製最外層大圓
        mPaint.setColor(Color.BLACK);//設置畫筆顏色為黑色
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//設置畫筆style實心
        RectF rect= new RectF(getWidth() / 2 - getHeight() / 2,
                0, getWidth() / 2 + getHeight() / 2, getHeight());//圓弧的外接矩形
        canvas.drawArc(rect, 270, 180, false, mPaint);
        mPaint.setColor(Color.WHITE);//設置畫筆顏色為白色
        canvas.drawArc(rect, 90, 180, false, mPaint);
        //繪製中間層上邊圓
        mPaint.setColor(Color.BLACK);
        rect= new RectF(getWidth()/2-getHeight()/4,0,getWidth() / 2 + getHeight() / 4, getHeight() /2);
        canvas.drawArc(rect, 90, 180, false, mPaint);
        //繪製中間層下邊圓
        mPaint.setColor(Color.WHITE);
        rect= new RectF(getWidth()/2-getHeight() / 4, getHeight() / 2, getWidth() / 2 + getHeight() / 4, getHeight());
        canvas.drawArc(rect, 270, 180, false, mPaint);
        //繪製最上層白色小圓
        mPaint.setColor(Color.WHITE);
        canvas.drawCircle(getWidth() / 2, getHeight() / 4, getHeight() / 10, mPaint);
        //繪製最上層黑色小圓
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(getWidth() / 2, getHeight() * 3 / 4, getHeight() / 10, mPaint);
    }
}

     然後在佈局文件中使用自定義View

<com.chuck.mobile.changecountview.widget.CustomeView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@color/gray"/>

     如果想讓這個太極圖轉起來，方法有很多，可以使用動畫也可以通過旋轉畫布的方式實現。我自己使用了通過線程在旋轉畫布的方法。大家掌握了Android 2D繪圖技巧就可以繪製自己感興趣的圖案。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • IOS之UIView的tag學習
    tag是UIView的一個屬性，而且要求tag值唯一。父視圖可以通過tag來找到一個子視圖1 UIView *redView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.window.frame), ...
  • android基本控制項學習-----RadioButton&CheckBox
    RadioButton（單選框）和CheckBox（覆選框）講解:一、基本用法和事件處理（1）RadioButton單選框，就是只能選擇其中的一個，我們在使用的時候需要將RadioButton放到RadioGroup中使用，同時我們還可以在RadioGroup中設置 orientation屬性來控制...
  • [軟體]利用Appicon and Launchimage Maker生成並配置iOSApp的圖標和啟動頁
    一．先來研究下這個軟體－》Appicon and Launchimage Maker首先打開你電腦上的AppStore，然後搜索：AppIcon然後回車：這裡我們先使用免費版的點擊下載。（左上角那個）然後打開軟體，應該是這樣的：軟體好人性化，給我們標註了1，2，3該幹啥。1選圖片唄。2.選是要給什麼...
  • 常用的adb命令
    在平時的工作中，會經常用到adb命令，在這裡稍微整理了一下。一.概要1.什麼是adb？adb全稱為Android Debug Bridge，就是起到調試橋的作用。顧名思義，adb就是一個debug工具。2.adb工作原理不是很理解？那就來看看它的工作原理吧。上圖是一個簡單的adb工作原理圖。adb客...
  • 分析自定義view的實現過程-實現雪花飛舞效果（轉載有改動）
    聲明：本文源碼出自實現雪花飛舞效果（有改動）主要通過這篇文來分析自定義view的實現過程。沒事時，比較喜歡上網看看一些新的東西，泡在網上的日子就是一個很不錯的網站。下麵開始了，哈哈。^_^ 大家都知道，自定義view分成三個類型，1、是完全自定義，自己繪製，例如本文講的例子。2、是Groupvie....
  • Gradle在Windows環境與Linux上配置有哪些不同？
    下文中的Linux只表示公司72 CI伺服器配置，基它Linux伺服器和Mac電腦可供參考。
  • Android-現場保護
    現場保護當一個活動進入到了停止的狀態，是有可能被系統回收的，我們都學過Activity的生命周期當活動處於onPause() ，onStop() ，onDestroy() 三種狀態時程式可能會被Android系統回收掉，這時如果之前未進行保護操作把數據保存的話就會造成用戶在程式當中的數據或者修改丟失...
  • 演算法導論之線上找女朋友問題
    問題：假設你需要找一個女朋友。你先前的尋找嘗試都以失敗告終，所以你決定找一個相親代理。相親代理每天給你推薦一個女孩紙。你會面談此人，然後決定要不要與她交往。你必須付給相親代理一小筆費用來面談。要真正地找到一個女朋友則要花更多的錢，因為你必須和目前的女朋友分手，還要付一大筆中介費給相親代理。你的諾言是...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類