摘自博客地址: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轴之间,文字就不会出边框,其它以此类推。
而这个类的调用方法也很简单:
最后,加上一点个人理解。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);
}