Canvas 的drawRect 几个参数理解

摘自博客地址：http://blog.csdn.net/show214/article/details/8922597

昨天写了一个View视图，在上面画了一个矩形，这个视图的最后效果如图：

主要代码如下：

package com.view;


import com.example.testsql.R;


import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.view.View;


public class MyView extends View {


MyView(Context context) {
super(context);
}


@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);


// 首先定义一个paint
Paint paint = new Paint();


paint.setColor(Color.RED);
// 设置样式-空心矩形
paint.setStyle(Style.STROKE);
// 绘制一个矩形
canvas.drawRect(150, 75, 250, 120, paint);


paint.setColor(Color.YELLOW);
canvas.drawRect(250, 75, 350, 120, paint);


paint.setColor(Color.GREEN);


canvas.drawRect(150, 120, 250, 170, paint);


paint.setColor(Color.CYAN);
canvas.drawRect(250, 120, 350, 170, paint);


// 绘文字
// 设置颜色
paint.setColor(Color.BLACK);
// 绘文字
canvas.drawText("Hello1", 200, 90, paint);
canvas.drawText("Hello2", 300, 100, paint);
canvas.drawText("Hello3", 200, 150, paint);
canvas.drawText("Hello4", 300, 170, paint);


// 绘图
// 从资源文件中生成位图
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.back);


// 绘图
canvas.drawBitmap(bitmap, 270, 140, paint);
}


}

其中关于canvas.drawRect(150, 75, 250, 120, paint);　的这个方法，我想说一下关于Canvas 的 drawRect 几个参数理解，

其实网上大部分的解释是

left：矩形的左边位置。

top：矩形的上边位置。

right：矩形的右边位置。

bottom：矩形的下边位置。

但是我个人怎么看都不是很懂，于是我就开始问自己一个问题，如果要两个点来确定一个矩形，那这两个点应该怎样放呢？不用多想，一定是对角！那确定了对角关系后，我就开始尝试画四方格，实际上也就是四个矩形拼凑而成。　于是我自己在纸上画了一下，如下图：

canvas.drawRect(150, 75, 250, 120, paint);　　A1     A2
canvas.drawRect(250, 75, 350, 120, paint);        B1    B2
canvas.drawRect(150, 120, 250, 170, paint);     C1    C2
canvas.drawRect(250, 120, 350, 170, paint);     D1    D2

只要先确认第一个矩形，那么B1的坐标就是于A1同Y轴与A2同x轴。以此类推。

canvas.drawText("Hello1", 200, 90, paint);

canvas.drawText("Hello2", 300, 100, paint);

canvas.drawText("Hello3", 200, 150, paint);

canvas.drawText("Hello4", 300, 170, paint);

而文字hello1，只要x轴只要在A1和B1的x轴之间，Y轴在B1和A2的Y轴之间，文字就不会出边框，其它以此类推。

 

而这个类的调用方法也很简单：

1. package com.view;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.app.Activity;  
5. import android.os.Bundle;  
6.   
7. @SuppressLint("WrongCall")  
8. public class DisplayView extends Activity{  
9.   
10.     @Override  
11.     protected void onCreate(Bundle savedInstanceState) {  
12.           
13.         super.onCreate(savedInstanceState);  
14.       
15.          setContentView(new MyView(this));  
16.       
17.     }     
18.       
19. }  

package com.view;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;

@SuppressLint("WrongCall")
public class DisplayView extends Activity{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
	
		 setContentView(new MyView(this));
	
	}	
	
}

最后，加上一点个人理解。drawrect()中的四个参数分别代表距离左边，上边，右边和下边的位置距离坐标。

在绘制矩形时我们一般都会这样写：

startX 起始X坐标

stopX 结束X坐标

startY起始Y坐标

stopY 结束Y坐标

然后直接调用canvas.drawRect(startX, startY, stopX, stopY, paint);进行绘制一般情况下绘制时没有问题的。因此不会发现存在的一个问题，即当所给的终点坐标有值为负数时将绘制不出矩形了。同理椭圆 绘制时也会存在这个问题，因为你看椭圆绘制canvas.drawOval(new RectF(startX, startY, stopX, stopY), paint);就可以知道了。

对于矩形我们改进的方法有两个，如果找不到原因的话，可以直接将矩形拆分为画线的方式来绘制。画四条线， 但是椭圆就难了，我暂时没找到方法。

上面的只是权宜之计，我们忘了一个规则才导致出现上面的这个情况。

既是在绘制矩形时必须这样规定起始点和终点，起始点与你坐标定义的（0，0）位置保持一致，终点在其的对角线上。比如你定义的其实点在左上角，那么你绘制图形时必须保证你的绘制起点在左上角。

下边是改进后的代码，

 if(startX > stopX && startY > stopY){ // 往左上
canvas.drawRect(new RectF(stopX, stopY, startX, startY), paint);
}else if(startX < stopX && startY > stopY){// 往右上
canvas.drawRect(new RectF(startX, stopY, stopX, startY), paint);
}else if(startX > stopX && startY < stopY){// 往左下
canvas.drawRect(new RectF(stopX, startY, startX, stopY), paint);
}else if(startX < stopX && startY < stopY){// 往右下
canvas.drawRect(new RectF(startX, startY, stopX, stopY), paint);
}