Android:视图绘制(一) ------基本的绘图操作Paint和Canvas

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010635353/article/details/52587852

大家都知道Android的UI很强大,各种系统控件和自定义控件,实现了很多绚丽的效果。而这些都离不开我们这篇文章讲到的Paint和Canvas。

Android提供了Canvas(画布)和Paint(画笔)用来实现视图的绘制工作。

之所以把Paint和Canvas放到一起讲,是因为这两个东西本身就是一体的,只有在一起才能画出各种图形。

作为画笔来讲,Paint可以设置各种属性,来达到画出不同线条的作用。就拿平时素描来讲,我会用到2B,4B,1H等不同的铅笔,那Paint,画笔类就是通过设置不同的属性来达到这一效果的。

Canvas,可以理解为在手机屏幕上的一块可供绘制的区域,用Paint可以画出各种图形。其提供了很多绘制的方法,可以和Paint一起画出各种图形。

先贴一段代码

    // 画圆用到的paint
    mPaintCircle = new Paint();
    mPaintCircle.setStyle(Paint.Style.STROKE); // 描边
    mPaintCircle.setStrokeWidth(1); // 宽度
    mPaintCircle.setAlpha(100); // 透明度
    mPaintCircle.setAntiAlias(true); // 抗锯齿
    mPaintCircle.setColor(Color.parseColor("#B0C4DE")); // 设置颜色 亮钢兰色

这是我上一篇文章《Android:自定义view 实现雷达扫描效果》中所用到的画笔。有兴趣的可以移步。

可知Paint是通过new关键字来获得实例的。并且提供了一系列的setxxx()方法来设置属性。

这里先贴出几种常用的方法,具体的我会单独开出一篇文章来讲。


setStyle(Style style) 用来设置填充样式

Paint类中的枚举类型 Style, 提供了三种可供选择的值。STROKE , FILL , FILL_AND_STROKE

这里写图片描述

STROKE 的区别还是很明显的,我愿意把他叫做描边。

Fill 填充 ,FILL_AND_STROKE 填充和描边 。这两个从前边的圆上看不是很明显,但是从后边的字,就会发现,相同字号,FILL_AND_STROKE 要比 Fill 方式粗一些,其实就是在填充的基础上,外边加了一圈描边。


setStrokeWidth(float width) 用来设置Stroke的宽度

setAlpha(int a) 用来设置透明度

setAntiAlias(boolean aa) 用来设置抗锯齿
如果不设置,加载位图的时候可能会出现锯齿状的边界,如果设置,边界就会变的稍微有点模糊,锯齿就看不到了。

setColor(@ColorInt int color) 用来设置颜色

后面的这几个方法,我相信大家看见名就知道怎么用了,所以就不详细说明了。


上面我们看见都是对Paint的一些属性设置,并没有执行绘制动作。那么,Android是怎样用Paint画出各种图形的呢,这就需要用到Canvas。

Canvas中我们常用的方法都是以 draw 开头的,意思是在画布上画各种图形
这里先贴出一些常用的方法


drawLine (float startX, float startY, float stopX, float stopY, Paint paint) 画直线

startX:开始点X坐标
startY:开始点Y坐标
stopX:结束点X坐标
stopY:结束点Y坐标
paint:画笔


drawLines (float[] pts, Paint paint)
drawLines (float[] pts, int offset, int count, Paint paint) 画多条直线

上述两个方法可以绘制多条直线,pts是x,y坐标的数组,值得注意的是如果这里的坐标是(x1,y1,x2,y2,x3,y3,x4,y4)那么绘制的直线将是点(x1,y1),(x2,y2)的连线以及(x3,y3),(x4,y4)的连线,总共两条连线。

offset 跳过的数据数,count 实际参与绘制的数据数。

 // 起点为100,100 终点为100,500 画一条线
 canvas.drawLine(100, 100, 100, 500, mPaintLine);

 // 两个数据为一个点,两个点为一组话一条线。所以是起点为200,200 终点为300,300 一条线, 起点为400,400 终点为500,500 一条线
 float[] pts = new float[]{200, 200, 300, 300, 400, 400, 500, 500};
 mPaintLine.setColor(Color.parseColor("#DEB887")); // 实木色
 canvas.drawLines(pts, mPaintLine);

 // 这里跳过了2个数据,参与绘制了四个数据,所以是 起点为400,300 终点为500,400 一条线
 pts = new float[]{300, 200, 400, 300, 500, 400, 600, 500};
 mPaintLine.setColor(Color.parseColor("#FF4500")); // 橘红色.
 canvas.drawLines(pts, 2, 4, mPaintLine);

所以是下图的效果

这里写图片描述

drawPoint (float x, float y, Paint paint) 画点

在坐标 x y 处,绘制一个点。


drawPoints (float[] pts, Paint paint)
drawPoints (float[] pts, int offset, int count, Paint paint) 画多个点

绘制多个点,方法和drawLines差不多,就不赘述了。


drawRect (float left, float top, float right, float bottom, Paint paint)
drawRect (RectF rect, Paint paint)
drawRect (Rect r, Paint paint) 画矩形

第一个方法,传入了四个点,这个很容易理解。其实就是两个点 left和top为左上的点,right和bottom为右下的点
第二个和第三个方法,传入了两个参数,RectF和Rect

RectF和Rect 是矩形的辅助类,他们都提供了通过传入四个点的坐标来构建矩形的构造方法。这里我们需要注意RectF类的构造方法传入的是Float类型的参数,而Rect传入的是int类型的

RectF(float left, float top, float right, float bottom)
Rect(int left, int top, int right, int bottom)

// 声明了一个Rect的对象
Rect rect = new Rect(100, 600, 500, 800);
canvas.drawRect(rect, mPaintLine);

// 声明了一个RectF的对象
RectF rectf = new RectF(600, 600, 1000, 800);
// 这里设置了Paint为填充方式,所以矩形应该为一个实心的矩形
mPaintLine.setStyle(Paint.Style.FILL);
canvas.drawRect(rectf, mPaintLine);

这里写图片描述


drawRoundRect(RectF rect, float rx, float ry, Paint paint)
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 画圆角矩形

通过传入四个点坐标或者RectF来画一个矩形,其中 rx 和 ry 是X轴上和Y轴上的圆角半径。(其实这个圆角可以看成是一个椭圆,通过调整x轴和y轴的坐标来调整圆角的大小)


drawOval(RectF oval, Paint paint)
drawOval(float left, float top, float right, float bottom, Paint paint) 画椭圆

可以看见画椭圆的方法传入的是一个矩形,其实这个椭圆是这个矩形的内切椭圆

RectF rectf = new RectF(600, 600, 1000, 800);
canvas.drawRoundRect(rectf, 10, 30, mPaintLine);
canvas.drawOval(rectf, mPaintLine);

原谅我的懒惰,我把圆角矩形和椭圆放在一起了,可以看到椭圆确实是矩形的内切圆

这里写图片描述


drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter,Paint paint) 画圆弧

跟椭圆一样,也是传入了一个矩形,然后通过startAngle和sweepAngle来控制圆弧的角度

startAngle:开始的角度
sweepAngle:圆弧扫过的角度
userCenter:是否吧圆心包括在内

注意这个角度是从最右边为0度,以顺时针开始计算的。

RectF rectf = new RectF(600, 600, 1000, 800);
canvas.drawArc(rectf, 0, 80, false, mPaintLine);
rectf = new RectF(100, 600, 500, 800);
canvas.drawArc(rectf, 0, 80, true, mPaintLine);

这里写图片描述

下面附上Demo的下载链接

猜你喜欢

转载自blog.csdn.net/u010635353/article/details/52587852