android学习之绘图和触摸事件结合的小例子

如下图，你点击哪一块区域，程序就会提示你。

里面主要是有MyCircle类完成，MyCircle继承View类，并重写其onDraw函数，onTouchEvent函数。当MyCircle显示时，调用其onDraw()函数，当用户点击时，调用onTouchEvent(MotionEvent event),动作事件中包含了点击的位置信息。根据点击的位置和画圆的位置之间的关系，做出相应的判断。

主界面DrawSimpleCircle的代码：

[java] view plain copy print ?

1. package com.example.com.njupt.zhb.drawcircle;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. import android.util.DisplayMetrics;  
5. public class DrawSimpleCircle extends Activity {  
6.     @Override  
7.     public void onCreate(Bundle savedInstanceState) {  
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.activity_draw_simple_circle);  
10.         DisplayMetrics metrics = new DisplayMetrics();  
11.         this.getWindowManager().getDefaultDisplay().getMetrics(metrics);  
12.         // 屏幕的分辨率  
13.         int width = metrics.widthPixels;  
14.         int height = metrics.heightPixels;  
15.         setContentView(new MyCircle(this, width, height));  
16.     }  
17. }  

package com.example.com.njupt.zhb.drawcircle;
import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
public class DrawSimpleCircle extends Activity {
    @Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_draw_simple_circle);
		DisplayMetrics metrics = new DisplayMetrics();
		this.getWindowManager().getDefaultDisplay().getMetrics(metrics);
		// 屏幕的分辨率
		int width = metrics.widthPixels;
		int height = metrics.heightPixels;
		setContentView(new MyCircle(this, width, height));
	}
}

MyCircle类的代码

[java] view plain copy print ?

1. package com.example.com.njupt.zhb.drawcircle;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.graphics.Rect;  
8. import android.graphics.RectF;  
9. import android.view.MotionEvent;  
10. import android.view.View;  
11. import android.widget.Toast;  
12. /*MyCircle继承View类，并重写其onDraw函数，onTouchEvent函数*/  
13. class MyCircle extends View {  
14.       
15.     private Context context;  
16.       
17.     /** 
18.      * 屏幕的宽 
19.      */  
20.     private int width;  
21.       
22.     /** 
23.      * 屏幕的高 
24.      */  
25.     private int height;  
26.       
27.     /** 
28.      *  颜色区分区域 
29.      */  
30.     private int[] colors = new int[] { Color.BLACK, Color.BLUE, Color.CYAN,  
31.             Color.GREEN, Color.GRAY, Color.MAGENTA, Color.RED, Color.LTGRAY};  
32.     private String[] colorStrs = new String[] {  
33.             "黑色", "蓝色", "青绿色", "绿色", "灰色", "洋红色", "红色", "浅灰色"};  
34.       
35.     /** 
36.      * 大园半径 
37.      */  
38.     private float bigR;  
39.       
40.     /** 
41.      * 小圆半径 
42.      */  
43.     private float litterR;  
44.       
45.     /** 
46.      * 屏幕中间点的X坐标 
47.      */  
48.     private float centerX;  
49.       
50.     /** 
51.      * 屏幕中间点的Y坐标 
52.      */  
53.     private float centerY;  
54.       
55.     public MyCircle(Context context, int width, int height) {  
56.         super(context);  
57.         this.context = context;  
58.         this.width = width;  
59.         this.height = height;  
60.         setFocusable(true);  
61.           
62.         System.out.println("width="+width+"<---->height="+height);  
63.         // 设置两个圆的半径  
64.         bigR = (width - 20)/2;  
65.         litterR = bigR/2;  
66.           
67.         centerX = width/2;  
68.         centerY = height/2;  
69.     }  
70.   
71.     @Override  
72.     protected void onDraw(Canvas canvas) {  
73.         // 画背景颜色  
74.         Paint bg = new Paint();  
75.         bg.setColor(Color.WHITE);  
76.         Rect bgR = new Rect(0, 0, width, height);  
77.         canvas.drawRect(bgR, bg);  
78.           
79.         float start = 0F;  
80.         Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  
81.         for(int i = 0; i < 4; i ++) {  
82.             //注意一定要先画大圆，再画小圆，不然看不到效果，小圆在下面会被大圆覆盖  
83.             // 画大圆  
84.             RectF bigOval = new RectF(centerX - bigR, centerY - bigR,   
85.                     centerX + bigR, centerY + bigR);  
86.             paint.setColor(colors[i]);  
87.             canvas.drawArc(bigOval, start, 90, true, paint);  
88.               
89.             // 画小圆  
90.             RectF litterOval = new RectF(centerX - litterR, centerY - litterR,   
91.                     centerX + litterR, centerY + litterR);  
92.             paint.setColor(colors[i+2]);  
93.             canvas.drawArc(litterOval, start, 90, true, paint);  
94.               
95.             start += 90F;  
96.         }  
97.           
98.         super.onDraw(canvas);  
99.     }  
100.       
101.     @Override  
102.     public boolean onTouchEvent(MotionEvent event) {  
103.         // 获取点击屏幕时的点的坐标  
104.         float x = event.getX();  
105.         float y = event.getY();  
106.         whichCircle(x, y);  
107.         return super.onTouchEvent(event);  
108.     }  
109.   
110.     /** 
111.      * 确定点击的点在哪个圆内 
112.      * @param x 
113.      * @param y 
114.      */  
115.     private void whichCircle(float x, float y) {  
116.         // 将屏幕中的点转换成以屏幕中心为原点的坐标点  
117.         float mx = x - centerX;  
118.         float my = y - centerY;  
119.         float result = mx * mx + my * my;  
120.           
121.         StringBuilder tip = new StringBuilder();  
122.         tip.append("您点击了");  
123.         // 高中的解析几何  
124.         if(result <= litterR*litterR) {// 点击的点在小圆内  
125.             tip.append("小圆的");  
126.             tip.append(colorStrs[whichZone(mx, my)+2]);  
127.             tip.append("区域");  
128.         } else if(result <= bigR * bigR) {// 点击的点在大圆内  
129.             tip.append("大圆的");  
130.             tip.append(colorStrs[whichZone(mx, my)]);  
131.             tip.append("区域");  
132.         } else {// 点不在作作区域  
133.             tip.append("作用区域以外的区域");  
134.         }  
135.           
136.         Toast.makeText(context, tip, Toast.LENGTH_SHORT).show();  
137.     }  
138.       
139.     /** 
140.      * 判断点击了圆的哪个区域 
141.      * @param x 
142.      * @param y 
143.      * @return 
144.      */  
145.     private int whichZone(float x, float y) {  
146.         // 简单的象限点处理  
147.         // 第一象限在右下角，第二象限在左下角，代数里面的是逆时针，这里是顺时针  
148.         if(x > 0 && y > 0) {  
149.             return 0;  
150.         } else if(x > 0 && y < 0) {  
151.             return 3;  
152.         } else if(x < 0 && y < 0) {  
153.             return 2;  
154.         } else if(x < 0 && y > 0) {  
155.             return 1;  
156.         }  
157.           
158.         return -1;  
159.     }  
160.       
161. }  

package com.example.com.njupt.zhb.drawcircle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
/*MyCircle继承View类，并重写其onDraw函数，onTouchEvent函数*/
class MyCircle extends View {
	
	private Context context;
	
	/**
	 * 屏幕的宽
	 */
	private int width;
	
	/**
	 * 屏幕的高
	 */
	private int height;
	
	/**
	 *  颜色区分区域
	 */
	private int[] colors = new int[] { Color.BLACK, Color.BLUE, Color.CYAN,
			Color.GREEN, Color.GRAY, Color.MAGENTA, Color.RED, Color.LTGRAY};
	private String[] colorStrs = new String[] {
			"黑色", "蓝色", "青绿色", "绿色", "灰色", "洋红色", "红色", "浅灰色"};
	
	/**
	 * 大园半径
	 */
	private float bigR;
	
	/**
	 * 小圆半径
	 */
	private float litterR;
	
	/**
	 * 屏幕中间点的X坐标
	 */
	private float centerX;
	
	/**
	 * 屏幕中间点的Y坐标
	 */
	private float centerY;
	
	public MyCircle(Context context, int width, int height) {
		super(context);
		this.context = context;
		this.width = width;
		this.height = height;
		setFocusable(true);
		
		System.out.println("width="+width+"<---->height="+height);
		// 设置两个圆的半径
		bigR = (width - 20)/2;
		litterR = bigR/2;
		
		centerX = width/2;
		centerY = height/2;
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// 画背景颜色
		Paint bg = new Paint();
		bg.setColor(Color.WHITE);
		Rect bgR = new Rect(0, 0, width, height);
		canvas.drawRect(bgR, bg);
		
		float start = 0F;
		Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
		for(int i = 0; i < 4; i ++) {
			//注意一定要先画大圆，再画小圆，不然看不到效果，小圆在下面会被大圆覆盖
			// 画大圆
			RectF bigOval = new RectF(centerX - bigR, centerY - bigR, 
					centerX + bigR, centerY + bigR);
			paint.setColor(colors[i]);
			canvas.drawArc(bigOval, start, 90, true, paint);
			
			// 画小圆
			RectF litterOval = new RectF(centerX - litterR, centerY - litterR, 
					centerX + litterR, centerY + litterR);
			paint.setColor(colors[i+2]);
			canvas.drawArc(litterOval, start, 90, true, paint);
			
			start += 90F;
		}
		
		super.onDraw(canvas);
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// 获取点击屏幕时的点的坐标
		float x = event.getX();
		float y = event.getY();
		whichCircle(x, y);
		return super.onTouchEvent(event);
	}

	/**
	 * 确定点击的点在哪个圆内
	 * @param x
	 * @param y
	 */
	private void whichCircle(float x, float y) {
		// 将屏幕中的点转换成以屏幕中心为原点的坐标点
		float mx = x - centerX;
		float my = y - centerY;
		float result = mx * mx + my * my;
		
		StringBuilder tip = new StringBuilder();
		tip.append("您点击了");
		// 高中的解析几何
		if(result <= litterR*litterR) {// 点击的点在小圆内
			tip.append("小圆的");
			tip.append(colorStrs[whichZone(mx, my)+2]);
			tip.append("区域");
		} else if(result <= bigR * bigR) {// 点击的点在大圆内
			tip.append("大圆的");
			tip.append(colorStrs[whichZone(mx, my)]);
			tip.append("区域");
		} else {// 点不在作作区域
			tip.append("作用区域以外的区域");
		}
		
		Toast.makeText(context, tip, Toast.LENGTH_SHORT).show();
	}
	
	/**
	 * 判断点击了圆的哪个区域
	 * @param x
	 * @param y
	 * @return
	 */
	private int whichZone(float x, float y) {
		// 简单的象限点处理
		// 第一象限在右下角，第二象限在左下角，代数里面的是逆时针，这里是顺时针
		if(x > 0 && y > 0) {
			return 0;
		} else if(x > 0 && y < 0) {
			return 3;
		} else if(x < 0 && y < 0) {
			return 2;
		} else if(x < 0 && y > 0) {
			return 1;
		}
		
		return -1;
	}
	
}