LowRen的部落格

如上圖所示，Android 透過 Canvas 的方式繪畫出各式各樣的圖形

以下是相關程式碼的分享

佈景 main.xml (Sorry !! 目前尚未找到如何把 xml 轉入 SyntaxHighlighter)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>

 程式碼 MainActivity.java

package com.example.test;
import android.os.Bundle;
import android.app.Activity;
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.view.View;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		LinearLayout layout=(LinearLayout) findViewById(R.id.root);
		final DrawView view=new DrawView(this); 
		view.setMinimumHeight(500);  
        view.setMinimumWidth(300);
      //通知view組件重繪    
        view.invalidate();  
        layout.addView(view); 
	}
	
	public class DrawView extends View{

		public DrawView(Context context) {
			super(context);
			// TODO Auto-generated constructor stub
		}
		@Override  
	    protected void onDraw(Canvas canvas) {  
	        super.onDraw(canvas); 
	        
	        // 建立初始畫布
	        Paint p = new Paint();								// 創建畫筆
	        p.setAntiAlias(true);									// 設置畫筆的鋸齒效果。 true是去除。
	        p.setColor(Color.RED);								// 設置紅色
	        p.setTextSize(16);										// 設置文字的大小為 16。
	        canvas.drawText("圓形：",10,20,p);		// 寫一段文字
	        canvas.drawCircle(80,20,20,p);				// 畫一個小圓
	        
	        // 直線繪畫
	        p.setColor(Color.GREEN);							// 設置綠色
	        canvas.drawText("直線：",110,20,p);			// 寫一段文字
	        canvas.drawLine(160, 20, 200, 20, p);		// 畫線 (起點X, 起點Y, 終點X, 終點Y, 線條型態)
	        
	        // 斜線繪畫
	        p.setColor(Color.parseColor("#DC143C"));							// 設置crimson
	        canvas.drawText("斜線：",210,20,p);			
	        canvas.drawLine(260, 10, 350, 20, p);
	        
	        // 弧線繪畫
	        p.setColor(Color.parseColor("#8B0000"));
	        canvas.drawText("弧線：",360,20,p);
	        p.setStyle(Paint.Style.STROKE);								//設置空心 
	        RectF oval1=new RectF(410,0,440,30); 				//繪製區域，左上座標為 (410,0) 右下座標為(440,30)
	        canvas.drawArc(oval1, 90, 220, false, p);				
	        //	畫弧，oval1是圓弧所在的區域目標
	        // 180 圓弧的起始角度
	        // 90 從開始位置依順時針測量的角度
	        // false 是否顯示半徑連線，true表示顯示圓弧與圓心的半徑連線，false表示不顯示。
	        // p 繪製時所使用的畫筆
	        
	        // 正方形繪畫
	        p.setColor(Color.parseColor("#FF1493"));
	        canvas.drawText("正方形：",450,20,p);
	        p.setStyle(Paint.Style.FILL);//設置填滿  
	        canvas.drawRect(520, 0, 540, 20, p);// 正方形 
	        // (520, 0) 左上頂點座標
	        // (540, 20) 右下頂點座標
	        
	        // 長方形繪畫
	        p.setColor(Color.parseColor("#FFA07A"));
	        canvas.drawText("長方形：",550,20,p);
	        p.setStyle(Paint.Style.FILL);
	        canvas.drawRect(620, 0, 700, 20, p);
	        
	        // 扇形繪圖
	        p.setColor(Color.parseColor("#FF7F50"));
	        canvas.drawText("扇形：",10,100,p);
	        RectF oval2 = new RectF(60, 100, 260, 300);	// 設置個新繪製區域
	        canvas.drawArc(oval2, 200, 33, true, p);
	        
	        // 橢圓繪圖
	        p.setColor(Color.parseColor("#FF4500"));
	        canvas.drawText("橢圓形：",210,100,p);
	        canvas.drawOval(new RectF(280,100,320,200),p);
	        
	        // 三角形繪圖
	        p.setColor(Color.parseColor("#FF8C00"));
	        canvas.drawText("三角形：",350,100,p);
	        Path path = new Path();  
	        path.moveTo(430, 100);// 此點為多邊形的起點  
	        path.lineTo(500, 200);  
	        path.lineTo(430, 200);  
	        path.close(); // 使這些點構成封閉的多邊形  
	        canvas.drawPath(path, p); 
	        
	        // 五角形繪圖
	        p.setColor(Color.parseColor("#BDB76B"));
	        canvas.drawText("五角形：",520,100,p);
	        p.reset();//重置  
	        p.setColor(Color.LTGRAY);  
	        // p.setStyle(Paint.Style.STROKE);//設置空心
	        Path path1=new Path();
	        path1.moveTo(650, 100);  
	        path1.lineTo(700, 145);  
	        path1.lineTo(675, 200);  
	        path1.lineTo(625, 200);  
	        path1.lineTo(600, 145); 
	        path1.close();//封閉  
	        canvas.drawPath(path1, p);
	        
	        // 圓角矩形繪圖
	        p.setTextSize(16);	
	        p.setColor(Color.parseColor("#FF00FF"));
	        p.setAntiAlias(true);// 設置畫筆的去鋸齒效果
	        canvas.drawText("圓角矩形：",10,250,p);
	        RectF oval3 = new RectF(130, 250, 400, 400); // 設置個新的長方形  
	        canvas.drawRoundRect(oval3, 20, 15, p); 
	        
	        //第二個參數是 x 方向上的圓角半徑，第三個參數是y方向上的圓角半徑
	        
	        // 曲線繪圖
	        p.setColor(Color.parseColor("#4B0082"));
	        canvas.drawText("曲線：",430,250,p);
	        p.setStyle(Paint.Style.STROKE);  
	        Path path2=new Path();  
	        path2.moveTo(450, 400);//設置Path的起點  
	        path2.quadTo(600, 380, 650, 250); //設置貝塞爾曲線的控制點坐標和終點坐標  
	        canvas.drawPath(path2, p);//畫出貝塞爾曲線     
		}
	}
}

 以上，分享給各位

如有問題，請留言告知