1. 程式人生 > >【android】繪製圓環的三種方式

【android】繪製圓環的三種方式

在android中要繪製圓環,暫時知道有三種方式。分別是:

一、設定畫筆的style為stoke,繪製圓

這裡是先繪製內圓,然後繪製圓環(圓環的寬度就是paint設定的paint.setStrokeWidth的寬度),最後繪製外圓。

請看核心原始碼:

[java] view plaincopyprint?
  1. <span xmlns="http://www.w3.org/1999/xhtml" style="">package yan.guoqi.rectphoto;  
  2. import android.content.Context;  
  3. import android.graphics.Canvas;  
  4. import android.graphics.Color;  
  5. import android.graphics.Paint;  
  6. import android.graphics.Paint.Style;  
  7. import android.graphics.RectF;  
  8. import android.util.AttributeSet;  
  9. import android.widget.ImageView;  
  10. publicclass DrawImageView extends ImageView {  
  11.     privatefinal Paint paint;  
  12.     private
    final Context context;   
  13.     public DrawImageView(Context context, AttributeSet attrs) {  
  14.         super(context, attrs);  
  15.         // TODO Auto-generated constructor stub
  16.         this.context = context;  
  17.         this.paint = new Paint();  
  18.         this.paint.setAntiAlias(true); //消除鋸齒 
  19.                 this
    .paint.setStyle(Style.STROKE);  //繪製空心圓或 空心矩形 
  20.               }   
  21.         @Override
  22.     protectedvoid onDraw(Canvas canvas) {  
  23.         // TODO Auto-generated method stub
  24.         int center = getWidth()/2;  
  25.         int innerCircle = dip2px(context, 83); //內圓半徑
  26.         int ringWidth = dip2px(context, 10);   //圓環寬度
  27.         // 第一種方法繪製圓環
  28.         //繪製內圓 
  29.                 this.paint.setARGB(25513843226);  
  30.         this.paint.setStrokeWidth(2);  
  31.         canvas.drawCircle(center, center, innerCircle, this.paint);          
  32.                 //繪製圓環 
  33.                this.paint.setARGB(25513843226);  
  34.         this.paint.setStrokeWidth(ringWidth);  
  35.         canvas.drawCircle(center, center, innerCircle + 1 +ringWidth/2this.paint);         
  36.                //繪製外圓 
  37.         this.paint.setARGB(25513843226);  
  38.         this.paint.setStrokeWidth(2);  
  39.         canvas.drawCircle(center, center, innerCircle + ringWidth, this.paint);         
  40.                 super.onDraw(canvas);  
  41.     }  
  42.     /* 根據手機的解析度從 dp 的單位 轉成為 px(畫素) */
  43.     publicstaticint dip2px(Context context, float dpValue) {    
  44.         finalfloat scale = context.getResources().getDisplayMetrics().density;    
  45.         return (int) (dpValue * scale + 0.5f);    
  46.     }    
  47. }  
  48. </span>  
總結:

1,這種分三次來繪製的方法,可以將圓環的內圓 圓環 和外圓的顏色設成不一樣的,對paint進行三次設定。還可以將繪製圓環的paint透明度設成10左右就會有圓環透明的效果。

2,三次繪製時的canvas.drawCircle圓心都是(center,center),但三次半徑確實不一樣的。尤其是第二次繪製圓環的時候,半徑是innerCircle + 1 +ringWidth/2。這裡的加1是第一次外圓paint.setStrokeWidth(2);寬度設成2,也就是說單條線的寬度1。後面的ringWidth/2也是同理。

示例如下(底色是預覽攝像頭的視訊):

上文已經繪製了圓環,但仔細分析就知,如果只需要圓環的話,那麼只繪製圓環就可以,不用畫內圓和外圓了。事實證明也是如此。

        但是要做成和下面的圓環透明度不一的效果上面的方法還是達不中:

用drawCircle不中了,經查android提供了繪製圓弧的函式drawArc,參考http://zhidao.baidu.com/question/469977150.html,也可以看這裡http://blog.chinaunix.net/uid-23392298-id-3345789.html

canvas.drawArc(new RectF(0, 0, 128, 128), 0, 360, true, new Paint(
Paint.ANTI_ALIAS_FLAG));
引數1:圓的範圍大小
引數2:起始角度
引數3:圓心角角度,360為圓,180為半圓
引數4:中心
引數5:畫筆Paint,可以設定畫線or填充,設定顏色,設定線的粗細等等第四個引數

最關鍵的是第一個引數RectF,在什麼地方繪製圓弧就是由這個矩形的位置確定的。根據上文,這個RectF應該是內切圓弧的外圓(儘管沒畫,但還是有)。所以其左上點及右下點座標為:

        RectF rect2 = new RectF(center-(innerCircle + 1 +ringWidth/2),center-(innerCircle + 1 +ringWidth/2), center+(innerCircle + 1 +ringWidth/2), center+(innerCircle + 1 +ringWidth/2));

     為了繪製出透明度不同的圓環分兩部來繪製:

this.paint.setARGB(200, 127, 255, 212);
        this.paint.setStrokeWidth(ringWidth);
        //繪製不透明部分
        canvas.drawArc(rect2, 180+startAngle, 90, false, paint);
        canvas.drawArc(rect2, 0+startAngle, 90, false, paint);
        //繪製透明部分
        this.paint.setARGB(30, 127, 255, 212);
        canvas.drawArc(rect2, 90+startAngle, 90, false, paint);
        canvas.drawArc(rect2, 270+startAngle, 90, false, paint);

上面的程式碼當startAngle = 0時,繪製的是一個靜態的透明度交替的圓弧。接著要讓它轉起來。增加程式碼:       

     startAngle+=10;
        if(startAngle == 180)
            startAngle = 0;   
 

事實上後兩句也可以不增加,仿照前文SurfaceView繪製旋轉動畫的例子用這種求餘的思想,(rotate += 48) % 360,把上面角度也弄個%360,也是可以的。

剩下的事就是讓這個東西迴圈執行了。在super.onDraw(canvas);這句程式碼後面加 invalidate();就可以了!透明圓環就轉起來了。

三、先繪製外圓,再把外圓中內圓所佔的區域擦除
					canvas.drawCircle(mCirX, mCirY, mRadius, paint);
					paint.setAlpha(0);
					paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));				
					canvas.drawCircle(mCirX, mCirY, mRadius-mRingWidth, paint);


參考:http://blog.csdn.net/yanzi1225627/article/details/8581840 http://blog.csdn.net/yanzi1225627/article/details/8581897



相關推薦

android繪製方式

在android中要繪製圓環,暫時知道有三種方式。分別是: 一、設定畫筆的style為stoke,繪製圓 這裡是先繪製內圓,然後繪製圓環(圓環的寬度就是paint設定的paint.setStrokeWidth的寬度),最後繪製外圓。 請看核心原始碼: [ja

Linux安裝軟體的方式--rpm、yum、原始碼包

說明:此文首發於本人原創公眾號【媛測】中,如有轉載,請著明出處! 在windows系統下安裝軟體很簡單,下載軟體包後雙擊.exe檔案,點選下一步即可。然而在linux安裝軟體就沒那麼容易了,不同的Linux發行版有所差異,下面以centos7系統為例說明,如何在linux下安裝軟體

dubbo服務執行的方式

    dubbo服務的執行方式有三種,分別為:       1. 使用Servlet容器執行(Tomcat、Jetty等)       2. 自建Main方法類來執行(Spring容器)       3. 使用Dubbo框架提供的Main方法類來執行

框架[Spring]AOP攔截-方式實現自動代理

這裡的自動代理,我講的是自動代理bean物件,其實就是在xml中讓我們不用配置代理工廠,也就是不用配置class為org.springframework.aop.framework.ProxyFactoryBean的bean。 總結了一下自己目前所學的知識

eclipsemyeclipse10安裝外掛方式

本文講解MyEclipse(MyEclipse10)的三種方法,以SVN為例   一、通過MyEclipse Configuration Center線上安裝     1. 開啟MyEclipse10,在選單欄選擇MyEclipse→MyEclipse Co

Android獲取Bitmap的幾方式總結

ApplicationInfo appInfo = getApplicationInfo(); //得到該圖片的id(name 是該圖片的名字,"drawable" 是該圖片存放的目錄,appInfo.packageName是應用程式的包) int resID = getResources().getIde

VMware虛擬機網絡模式詳解

童鞋 tro 修改 遠程連接 www 學習交流 退出 con 現在 由於Linux目前很熱門,越來越多的人在學習Linux,但是買一臺服務放家裏來學習,實在是很浪費。那麽如何解決這個問題?虛擬機軟件是很好的選擇,常用的虛擬機軟件有VMware Workstations和

VMware虛擬機網絡模式超詳解

編輯器 網卡 host 子網 什麽 script network 如何解決 技術 【原文】https://www.toutiao.com/i6596228488666022403/ 由於Linux目前很熱門,越來越多的人在學習Linux,但是買一臺服務放家裏來學習,實在是很

請說出減少頁面載入時間的方法。

    1.優化圖片  2.影象格式的選擇(GIF:提供的顏色較少,可用在一些對顏色要求不高的地方)  3.優化CSS(壓縮合並css,如margin-top,margin-left...)  4.網址後加斜槓(如ww

請說出減少頁面加載時間的方法。

www com 無法 如果 壓縮合並 class 是什麽 .com 高度 1.優化圖片 2.圖像格式的選擇(GIF:提供的顏色較少,可用在一些對顏色要求不高的地方) 3.優化CSS(壓縮合並css,如margin-top,margin-left...) 4.網

0077-Linux--for迴圈的使用方法

一 常用for迴圈結構 #語法一 for 變數 in 值1 值2 值3.. do 程式塊兒 done # #語法二 for 變數 `命令` do 程式塊兒

機器學習線性迴歸梯度下降的方式(BGD+SGD+MSGD)以及調優方法(加快收斂速度)

1.梯度下降演算法梯度下降演算法的核心思路和公式推導,可以詳見前面的文章:梯度下降演算法的核心思路和公式推導如果代價函式是凸函式,用梯度下降演算法一定可以求得最優解。2.梯度下降的三種方式在ML中,梯度下降有三種方式:1)批量梯度下降(Batch Gradient  Desc

[C++]友元的宣告及注意事項

class A{     friend void fri_fun(A); private:     int a=9; }; void fri_fun(A aa){     cout<<aa.a<<endl; }   在程

Android之——ContentResolver查詢的方式

popu com 耗時 封裝 target 最適 token res 數據庫 轉載請註明出處:http://blog.csdn.net/l1028386804/article/details/47785491 今天做到一個小項目。查詢手機中短信的信息,當然得去系

springmvc傳值的幾方式&&postman接口測試

red ews 參數 一點 名稱 each comment PQ 分享圖片 最近在用postman測試postman接口,對於springmvc傳值這一塊,測試了幾種常用方式,總結一下。對於postman這個工具的使用也增加了了解。p

9.10 路由控制之反向解析--別名html和views兩方式實現

com 反向 技術分享 http mage login gin bsp 分享圖片 1. 在html裏反向解析 給路徑起別名,修改路徑時,不用每個地方都修改。 {% url ‘Log‘ %} : 就會去找別名為Log的URL,找到 "login/"後把"logi

SSM檔案下載的兩方式

檔案下載的兩種方式 第一種:檔名和大小都是固定的 第二種:檔案有很多,檔名不固定 今天專案中用到了一個檔案下載的方式,將一個app放在伺服器上,可以直接下載,剛開始想到了使用輸出檔案流的方式,思路有了,就直接上手寫了,參考網上的資料,整理出來了一

Android自定義View的方式:繼承佈局,繼承原生控制元件,繼承View

 自定義View非常的常用,也是Android開發的一項基本技能,自定義View有三種方式:繼承佈局,繼承原生控制元件,繼承View。一、繼承佈局先看效果圖:程式碼實現:1.在layout資料夾中建立佈局title_view.xml,這一步根據自己需要寫,本例中的佈局如下:佈

Android-ListView優化常見的方式

優化原理 使用ListView時儘可能的少去執行Layout的Inflate,只渲染和佈置那些在可視範圍內,或者即將出現在可視範圍內的Item 第一 Layout的Inflate是消耗資源巨大的程式碼。即使,Layout檔案已經被高效的解析程式轉換為了二進位制程式碼。In

Android控制UI介面的方式

一、XML檔案控制UI介面 通過setContentView()方法繫結佈局檔案 import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class