Android中View图形绘制基础

Android中View图形绘制基础

Android中View图形绘制基础

Android中的2D图形的绘制主要是靠Canvas(画布)和Paint(画笔)决定，其中Canvas可以用来绘制各种形状，而Paint可以用来描绘各种效果，比如颜色。

画布(Canvas)提供了绘制各种图像形状的API

点

绘制点只要知道当前点的坐标就可以了，同样绘制多个点只要知道多个点的坐标就可以了。
绘制View的这些坐标都是以父容器的左上角为坐标原点来计算的。代码如下：

//绘制一点 蓝色
canvas.drawPoint(100, 100, mPaint); 
float[] pts = new float[]{
    
            
      200, 300,
      200, 200,//代表一个点的xy坐标
      200, 400,
      200, 500,
//其中多个点的坐标存放于float数组中，成对表示一个点的坐标比如（200,200）
      200, 600
};
mPaint.setColor(Color.RED);
         250, 200,
canvas.drawPoints(pts, mPaint);//绘制多个点——红颜色 
float[] ptsOff = new float[]{
    
    
mPaint.setColor(Color.GREEN);
         250, 300,
         250, 400,
         250, 500,
         250, 600   
};
//这个方法和上面的是重载方法。第二个参数和第三个参数的含义看效果图就明白了 
canvas.drawPoints(ptsOff,2, 4, mPaint);//绘制多个点——绿颜色

在这里插入图片描述
看上图就很容易理解参数的含义;

float[] ptsOff = new float[]{
    
    
            250, 200,
         	250, 300,
  			250, 500,
            250, 400,
            250, 600}
   mPaint.setColor(Color.GREEN);
   canvas.drawPoints(ptsOff,2, 4, mPaint);//绘制多个点——绿色

上面代码就相当于下面这样,第二个参数表示从原数组ptsOff下标为2的地方开始,4表示新形成新的数组的长度。

float[] ptsOff1 = new float[]{
    
    
            250, 300,
            250, 400};
mPaint.setColor(Color.GREEN);
canvas.drawPoints(ptsOff1, mPaint);//绘制多个点——绿色

直线

绘制线只需要知道一条线的起始坐标和终止坐标就可以，绘制多条直线要知道多条直线的起始和终止坐标

//绘制一条直线 蓝色
canvas.drawLine(100, 100, 200, 100, mPaint);
float[] pts = new float[]{
    
    
        100, 300, 200, 300,
        100, 200, 200, 200,
mPaint.setColor(Color.RED);
        100, 400, 200, 400,
};
mPaint.setColor(Color.GREEN);
canvas.drawLines(pts, mPaint);//绘制多条直线——红色
float[] ptsOff = new float[]{
    
    
        250, 400, 350, 400,
        250, 200, 350, 200,
        250, 300, 350, 300,
};
canvas.drawLines(ptsOff, 4, 8, mPaint);//绘制多条直线——绿色

在这里插入图片描述

矩形

绘制矩形只需要知道矩形左上角和右下角的坐标就可以了

   //绘制矩形 蓝色
	Rect rect = new Rect(100, 100, 300, 200);
	canvas.drawRect(rect, mPaint);
	canvas.drawRect(100, 250, 300, 350, mPaint);//绘制矩形——红色
	mPaint.setColor(Color.RED);
	
	mPaint.setColor(Color.GREEN);
	canvas.drawRect(rectF, mPaint);//绘制矩形——绿色
	RectF rectF = new RectF(100, 400, 300, 500);

在这里插入图片描述
可能你已经注意到了Rect和RectF了，使用它们都可以绘制矩形，
只是它们的精度不同罢了,Rect是以int型来计量,RectF是以float来计量,还有就是一些API也不同。

圆角矩形

绘制圆角矩形有如下两条api可用，其中第二条需要api21才添加，所以尽量使用第一条

drawRoundRect(RectF rect, float rx, float ry, Paint paint)
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)

先说上面第一个方法,第一个参数代表矩形，第二第三个参数代表矩形的x,y半径，最后是画笔
第二个方法，left top参数表示矩形的左上角xy坐标，right bottom代表矩形的左下角的坐标，这样构成一个矩形
rx ry代表矩形xy方向的半径，最后是画笔
绘制圆角矩形其实是以绘制矩形的内切圆角矩形，当rx和ry大于矩形长宽的一半时候，这是rx和ry按正好等于矩形长宽的一般来计算
下面先看看一般情况下的圆角矩形代码;

//绘制矩形
mPaint.setColor(Color.GRAY);
RectF rectFf = new RectF(100, 250, 300, 350);
canvas.drawRect(rectFf, mPaint);
//绘制圆角矩形 红色
mPaint.setColor(Color.RED);
canvas.drawRoundRect(rectFf, 30, 30, mPaint);

在这里插入图片描述
可以看到四个角都有一个圆弧，它是椭圆的圆弧.
上面绘制圆角矩形的一般情形下，下面再来看看特殊情况下圆角矩形的形状：
就是当rx和ry大于矩形长宽的一半时候，这时候rx和ry按正好等于矩形长宽的一般来计算并绘制形状

//绘制矩形
mPaint.setColor(Color.GRAY);
RectF rectF = new RectF(100, 100, 300, 200);
canvas.drawRect(rectF, mPaint);
//在绘制圆角矩形
//100是矩形rectF宽的一半，如果大于这个值，也按100算，同样高度也一样
mPaint.setColor(Color.BLUE
canvas.drawRoundRect();rectF, 100, 50, mPaint);

运行效果如图：在这里插入图片描述

圆形

drawCircle(float cx, float cy, float radius, Paint paint)
cx,cy表示圆心的坐标，radius表示半径
canvas.drawCircle(200, 200, 100, mPaint);//绘制圆形——蓝色
在这里插入图片描述

椭圆

绘制椭圆使用的是如下两条api,第二个是在API21的时候加上的，以后尽量第一条

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

第一个方法oval表示椭圆的外接矩形
第二个方法前面四个参数构成一个矩形

代码：
RectF rectF = new RectF(100, 100, 300, 200);
mPaint.setColor(Color.GRAY);
//先绘制一个矩形
mPaint.setColor(Color.BLUE);
canvas.drawRect(rectF, mPaint);
//绘制椭圆
canvas.drawOval(rectF, mPaint);

运行如图
在这里插入图片描述

圆弧和扇形

绘制圆弧使用的是如下两条api,第二个是在API21的时候加上的，以后尽量第一条

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)

第一个方法的纵oval表示圆弧的外接矩形，startAngle表示圆弧的开始角度，sweepAngle表示圆弧扫过的角度，
userCenter表示是否使用中心点，paint表示画笔
第二个方法前面四个参数构成一个矩形的左上角和右下角，其余的都一样
看看代码和效果图：

//绘制一个灰色背景的矩形矩形
mPaint.setColor(Color.GRAY);
RectF rectF = new RectF(100, 100, 300, 200);
canvas.drawRect(rectF, mPaint);
//起始角度为0，偏转角度为90，并且使用中心点
mPaint.setColor(Color.BLUE);//绘制圆弧——蓝色
mPaint.setColor(Color.RED);//绘制圆弧——红色
canvas.drawArc(rectF, 0, 90, true, mPaint);
//起始角度为90，偏转角度为90，不使用中心点
canvas.drawArc(rectF, 90, 90, false, mPaint);

在这里插入图片描述
上面两个同样都是偏转了90度的角度，蓝色区域使用了中心点，
画出来的形状是扇形，而红色没有使用中心点，画出来的是圆弧，
并且绘制的圆弧都是在矩形的内部。

Path(路径)

上面形状使用特定的方法可以很容易的进行绘制，但是大多数形状我们无法绘制，比如,三角形，多边形，心形等，这个时候就用到了Path,Path有许多方法，这里只介绍几个基本的;
Path的一些函数作用;

项目	Value
moveTo()	移动下一次操作的起始位置
lineTo()	连接直线,在上一个点和当前点之间
setLastPoint()	设置当前路径下最后一个点的位置
close()	连接当前点和起始点，形成一个封闭的路径

使用colse()的时候，如果当前点没能形成一个闭合的路径,那么close()将不会有效果.

mPaint.setStyle(Paint.Style.STROKE);
Path path = new Path();
path.lineTo(300, 200);//lineTo
path.moveTo(200, 200);//moveTO
path.lineTo(250, 500);//

在这里插入图片描述

 mPaint.setStyle(Paint.Style.STROKE);
Path path = new Path();
path.lineTo(300, 200);
path.moveTo(200, 200);
path.lineTo(250, 500);
path.moveTo(300, 300);//移动下次操作的起始点
path.close();//闭合路径
path.setLastPoint(250,600);//移动当前路径最后一点的位置
canvas.drawPath(path, mPaint);

由于这次形状无法闭合,所以close()会没有效果,setLastPont移动了最后一点的位置
在这里插入图片描述

文本

drawText(String text, float x, float y, Paint paint)
drawText(String text, int start, int end, float x, float y,Paint paint)
drawText(CharSequence text, int start, int end, float x, float y,Paint paint)
drawText(char[] text, int index, int count, float x, float y,Paint paint)

上面四种绘制文本的方式差不多

String text = "Android";
mPaint.setTextSize(50);
canvas.drawText(text, 100, 200, mPaint);//注意绘制文本使用的方法
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(1);
//绘制两条红色直线 也就是基线
canvas.drawLine(0, 200, 1000, 200, mPaint);
canvas.drawLine(100, 0, 100, 1000, mPaint);

运行代码效果图：
在这里插入图片描述

Paint的最基本的用法API如下：

setARGB(int a,int r,int g,int b); // 设置绘制的颜色，a代表透明度，r，g，b代表颜色值。
setAlpha(int a);// 设置绘制图形的透明度。
setColor(int color);// 设置绘制的颜色，使用颜色值来表示，该颜色值包括透明度和RGB颜色。
setAntiAlias(boolean aa);// 设置是否使用抗锯齿功能，会消耗较大资源，绘制图形速度会变慢。
setDither(boolean dither);// 设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰
setFilterBitmap(boolean filter);// 如果该项设置为true，则图像在动画进行中会滤掉对Bitmap图像的优化操作， 加快显示速度，本设置项依赖于dither和xfermode的设置
setMaskFilter(MaskFilter maskfilter);// 设置MaskFilter，可以用不同的MaskFilter实现滤镜的效果，如滤化，立体等
setColorFilter(ColorFilter colorfilter);// 设置颜色过滤器，可以在绘制颜色时实现不用颜色的变换效果
setPathEffect(PathEffect effect);// 设置绘制路径的效果，如点画线等
setShader(Shader shader);// 设置图像效果，使用Shader可以绘制出各种渐变效果
setShadowLayer(float radius ,float dx,float dy,int color);//在图形下面设置阴影层，产生阴影效果， radius为阴影的角度，dx和dy为阴影在x轴和y轴上的距离，color为阴影的颜色
setStyle(Paint.Style style); // 设置画笔的样式，为FILL，FILL_OR_STROKE，或STROKE
setStrokeCap(Paint.Cap cap); // 当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的图形样式， 如圆形样Cap.ROUND,或方形样式Cap.SQUARE
setSrokeJoin(Paint.Join join); // 设置绘制时各图形的结合方式，如平滑效果等
setStrokeWidth(float width); // 当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的粗细度
setXfermode(Xfermode xfermode); // 设置图形重叠时的处理方式，如合并，取交集或并集，经常用来制作橡皮的擦除效果
setFakeBoldText(boolean fakeBoldText); // 模拟实现粗体文字，设置在小字体上效果会非常差
setSubpixelText(boolean subpixelText); // 设置该项为true，将有助于文本在LCD屏幕上的显示效果
setTextAlign(Paint.Align align); // 设置绘制文字的对齐方向
setTextScaleX(float scaleX); // 设置绘制文字x轴的缩放比例，可以实现文字的拉伸的效果
setTextSize(float textSize); // 设置绘制文字的字号大小
setTextSkewX(float skewX); // 设置斜体文字，skewX为倾斜弧度
setTypeface(Typeface typeface); // 设置Typeface对象，即字体风格，包括粗体，斜体以及衬线体，非衬线体等
setUnderlineText(boolean underlineText); // 设置带有下划线的文字效果
setStrikeThruText(boolean strikeThruText); // 设置带有删除线的效果
setStrokeJoin(Paint.Join join); // 设置结合处的样子，Miter:结合处为锐角， Round:结合处为圆弧：BEVEL：结合处为直线
setStrokeMiter(float miter); //设置画笔倾斜度
setStrokeCap (Paint.Cap cap); //设置转弯处的风格 其他常用方法：
int breakText(char[] text, int index, int count, float maxWidth, float[] measuredWidth); // 检测一行显示多少文字
clearShadowLayer( ); //清除阴影层

文字的宽高

在这里插入图片描述

float ascent( ); //测量baseline之上至字符最高处的距离
float descent(); //baseline之下至字符最低处的距离