浅谈android中的图片处理之基本绘图(一)

太过爱你忘了你带给我的痛 2022-07-24 06:01 164阅读 0赞

从今天开始我来聊下关于android中的图片处理以及android中绘图的基本用法。大家都知道android中的图片的巧妙使用会给UI得到一个很好的用户体验。所以掌握处理图片的基本技巧很是重要。那就开始吧。

说到图片的处理及canvas绘制技巧就不得不说下，关于android中屏幕适配的问题。大家都知道，android的手机中有很多种不同分辨率，大屏，小屏各式各样，五花八门的尺寸的屏幕，所以这也给android的开发者，带来一定的麻烦，那就是实现屏幕的适配问题。这也是android 不如ios的缺点之一。这样肯定是不行的，所以android中就定义一个标准分辨率，而各个手机产商都必须遵守这个标准.那先了解一下屏幕参数:1、屏幕大小(用"寸"来衡量)，它的指的是屏幕对角线的长度２、屏幕的分辨率720\*1280表示手机屏幕的像素点个数，宽有720个像素点，高有1280个像素点，总的有720\*1280个像素点。PPI（DPI）:它的值等于用对角线上的像素点除以屏幕大小得到。４、屏幕的密度表示相同长度上的像素点的个数不同，密度大的像素点个数越多，清晰度也越好。

针对这么多不同的分辨率的手机屏幕，android 给出了如下的标准：

现在已经如下５种的标准的系统的分辨密度及对应的密度值及相关的分辨率:  
\* ldip---------->mdip------>hdip------>xhdip---->xxhdip  
\* 120---------->160 ------>240 ------->320 ----->480  
\* 240\*320 320\*480 480\*800 720\*1280 1080\*1920

很细心会发现这正好对应了android工程中的res文件夹下对应的存放图片的文件夹，因为屏幕的密度含义就是在相同的屏幕的宽度上所含有的像素点的个数不一样  
密度大的相同宽度的屏幕的含有的像素点的个数要更多，故此在也就可以得到了，不同的分辨率的之间的换算比例即为各标准密度值之比:3:4:6:8:12

有时候，需要进行单位的之间换算，比如px---->dp,px---->sp或者dp,sp----->px等，给出如下的换算的工具类:

package com.mikyou.tools;
    
    import android.content.Context;
    import android.util.TypedValue;
    
    /**
     * @author mikyou
     * dp px sp屏幕的尺寸的单位换算工具类
     * px----->dp,dp----->px
     * px----->sp,sp------->px
     * 针对不同的手机分辨率有不同的屏幕的密度
     * 现在已经如下５种的标准的系统的分辨密度及对应的密度值及相关的分辨率:
     * ldip---------->mdip------>hdip------>xhdip---->xxhdip
     * 120---------->160  ------>240  ------->320  ----->480
     * 240*320 320*480  480*800   720*1280  1080*1920
     * 
     * 因为屏幕的密度含义就是在相同的屏幕的宽度上所含有的像素点的个数不一样
     * 密度大的相同宽度的屏幕的含有的像素点的个数要更多
     * 故此在也就可以得到了，不同的分辨率的之间的换算比例即为各标准密度值之比:3:4:6:8:12
     * */
    public class DisplayToChangeUtil {
    	//px换算成Dip(dp),保证屏尺寸大小不变
    	public static int pxChangeToDp(Context context,float px){
    		final float scale=context.getResources().getDisplayMetrics().density;//得到各个分辨率的换算比例
    		return (int)(px/scale+0.5f);//+0.5f实现了四舍五入
    	}
    	//dp换算成px,保证尺寸大小不变
    	public static int dpChangeToPx(Context context,float dp){
    		final float  scale=context.getResources().getDisplayMetrics().density;
    		return (int)(dp*scale+0.5f);//+0.5f实现了四舍五入
    	}
    	//px换算成SP保证文字大小不变
    	public static int pxToChangeSp(Context context,float px){
    		final float fontScale=context.getResources().getDisplayMetrics().scaledDensity;
    		return (int)(px/fontScale+0.5f);//+0.5f实现了四舍五入
    	}
    	//sp换算成px保证文字大小不变
    	public static int spToChangePx(Context context,float sp){
    		final float fontScale=context.getResources().getDisplayMetrics().scaledDensity;
    		return (int)(sp*fontScale+0.5f);//+0.5f实现了四舍五入
    	}
    	/**
    	 * @author mikyou
    	 * 使用TypedValue类进行单位换算
    	 * */
    	//dp---->px
    	public int dpToChangePxByTypedValue(Context context,int dp){
    		return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,context.getResources().getDisplayMetrics());
    	}
    	//sp----->px
    	public int spToChangePxByTypedValue(Context context,int sp){
    		return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp,context.getResources().getDisplayMetrics());
    	}
    }

说完屏幕的单位参数之间的换算，那么接下来介绍一下关于android中的canvas中绘图的基本用法，关于canvas的高级用法将会在下篇博客给出。

package com.mikyou.canvas;
    
    import android.app.Activity;
    import android.graphics.Bitmap;
    import android.graphics.Bitmap.Config;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.graphics.Paint.Style;
    import android.graphics.RectF;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
    /**
     * @author mikyou
     * 要想绘一张图片，首先就需要如下材料:
     *  1、画纸Bitmap
     * ２、画布canvas
     * ３、画笔paint
     * */
    public class MainActivity extends Activity {
    	private Bitmap baseBitmap;
    	private Paint paint;
    	private Canvas canvas;
    	private ImageView iv;
    	/**
    	 * @author mikyou
    	 * 绘制点的原理:
    	 * 实际上绘制点就是一个非常小的矩形，可以将画笔尺寸放大会发现就是一个小矩形
    	 * 其实也很容易理解因为在android中屏幕的像素点就是矩形的，而且android中的所有的
    	 * 控件实际上都是矩形。
    	 * drawPoint(float x,float y, paint);//第一个参数就是点的Ｘ坐标，第二参数就是点的Ｙ坐标
    	 * drawPoints(pts, offset, count, paint);//第一个参数就是点的坐标的数组，里面pts[x0,y0,x1,y1,x2,y2...]
    	 * 有多少个数值即为pts.length
    	 * float[] pts:点的合集，与上面直线一直，样式为｛x1,y1,x2,y2,x3,y3,……｝
           int offset:pts数组中跳过的数值个数，注意不是点的个数！而是数值的个数一个点是两个数值；
         　count:参与绘制的数值的个数，指pts[]里数值个数，而不是点的个数，因为一个点是两个数值
    	 * offset表示从数组中的第几个点开始绘制，count表示要绘制几个点
    	 * 也可以这样理解:例如:offset为２,count为6表示在pts数组中选取下标为２的数值开始挑取后续６个
    	 * 数值作为点来绘制,6个数值即为3个点,(因为一个点有两个数值),所以也就得到了count>1，因为
    	 * 要想画一个点至少要两个数值,并且count是２的倍数
    	 * */
    	public  void point(View view){
    		//	canvas.drawPoint(200, 100, paint);
    		canvas.drawPoints(new float[]{100,100,200,200,300,300,400,400}, 2, 6, paint);
    		//canvas.drawPoints(new float[]{100,100,200,200,300,300,400,400}, paint);
    		iv.setImageBitmap(baseBitmap);
    	}
    	/**
    	 * @author mikyou
    	 * 绘制线的原理
    	 * canvas.drawLine(startX, startY, stopX, stopY, paint)//很容易理解startX, startY, stopX, stopY分别为线的起点、终点的坐标
    	 * */
    	public void line(View view){
    		canvas.drawLine(100, 100, 400, 400, paint);
    
    		iv.setImageBitmap(baseBitmap);
    	}
    	/**
    	 * @author mikyou
    	 * 绘制多条线的原理
    	 * drawLines(pts, offset, count, paint)
    	 * pts数组[x0,y0,x1,y1,x2,y2...]和画点中的pts数组一样
    	 * offset与画点中的offset意义一样都是表示pts数组中从offset大小的下标开始的数值，
    	 * count:表示从offset开始往后取count个数值，来画线，所以count必须大于３且为４的倍数
    	 * 因为一条线至少要２个点，而１个点需要两个数值，所以至少要４个数值
    	 * */
    	public void lines(View view){
    		float pts[]=new float[]{
    				100,100,200,200,300,300,400,400,500,500,600,600,700,700
    		};
    		canvas.drawLines(pts, 2, 4, paint);
    		//canvas.drawLines(pts, paint);这种方式实际上还是调用了drawLines(pts, offset, count, paint)，只不过offset为０，count为pts数组的长度
    		iv.setImageBitmap(baseBitmap);
    	}
    
    	/**
    	 * @author mikyou
    	 * 绘制圆角矩形的原理:
    	 * drawRoundRect(Rect rect,radiusX,radiusY,Paint paint)方法
    	 * 第一个参数就是rect矩形对象,第二个参数就是外接椭圆在X轴的半径
    	 * 第三个参数就是外接椭圆的在Y轴的半径，通过控制,radiusX,radiusY
    	 * 那么矩形Rect的中心点，即为椭圆的中心点
    	 * 来控制圆角矩形的圆角的倾斜程度和倾斜方向：
    	 * 若radiusX>radiusY,那么就表示该椭圆的横向的，那么radiusX越大，就表示在X方向控制的长度越多
    	 * 若radiusX＝radiusY那么就表示此时就是一个圆形了，即为矩形的外接圆。
    	 * 若radiusX<radiuY那么就表示该椭圆的竖直方向的，那么radiusY越大，就表示在Y方向控制的长度越多
    	 * * */
    	public void rectRound(View view){
    		RectF rectF=new RectF(200,200,700,500);
    		canvas.drawRoundRect(rectF, 60,60, paint);
    		iv.setImageBitmap(baseBitmap);
    	}
    	/**
    	 * @author mikyou
    	 * 画圆
    	 * drawCircle(400, 400, 300, paint);
    	 * 第一、二个参数为圆心坐标
    	 * 第三个参数为圆形的半径
    	 * */
    	public void circle(View view){
    		canvas.drawCircle(400, 400, 300, paint);
    		iv.setImageBitmap(baseBitmap);
    	}
    	/**
    	 * 
    	 * @author mikyou
    	 * 绘制圆弧和扇形的原理:
    	 * drawArc(oval, startAngle, sweepAngle, useCenter, paint)
    	 * 第一个参数就是一个RectF矩形的对象用于来定义扇形的形状和大小
    	 * startAngle开始的角度,默认以Ｘ的正半轴为０度正轴，然后顺时针为正角度，逆时针为负角度
    	 * sweepAngle扫过的角度
    	 * useCenter：是个boolean类型的变量，如果为true那就表示需要绘制出圆形到弧边的距离其实也就理解
    	 * 绘制出来的就是扇形，如果为false的那就表示不需要绘制出圆形到弧边的距离其实也就理解
    	 * 绘制出来的就是只有圆弧.
    	 * 注意:useCenter为true:绘制出来的就是扇形,useCenter为false:绘制出来的就是圆弧
    	 * */
    	public void arc(View view){
    		RectF rectF=new RectF(100, 100, 500, 500);
    		canvas.drawArc(rectF, 0, 75, false, paint);
    		iv.setImageBitmap(baseBitmap);
    	}
    	/**
    	 * @category绘制文本的原理
    	 *	canvas.drawText(text, start, end, x, y, paint)://text为文本内容，start就是字符串中的第几个字符开始，end到第几个字符结束,x,y为绘制文本的起点默认是文本内容的
    	 * 的第一个字符的左下角开始绘制，x,y也是该左下角的点的坐标
    	 * 		canvas.drawTextOnPath("hello", path, hOffset, vOffset, paint)
    	 * //第一个参数为文本内容，第二个参数为一个Path对象，hOffset参数指定水平偏移距离、vOffset指定垂直偏移距离,可以指定位置画出文本
    	 * */
    	public void text(View view){
    		String string="hello";
    		paint.setTextSize(96);
    		paint.setAntiAlias(true);
    		//canvas.drawText(string, 0, string.length(), 100, 200, paint);
    		Path path=new Path();
    		path.moveTo(200, 200);
    		path.lineTo(200, 300);
    		path.lineTo(400, 400);
    		path.lineTo(500, 500);
    		path.lineTo(600, 600);
    		canvas.drawTextOnPath("hello", path, 10, 10, paint);
    		iv.setImageBitmap(baseBitmap);
    	} 
    	/**
    	 * @author mikyou
    	 * 椭圆的绘制原理:
    	 * drawOval(oval, paint);//第一个参数就是RectF对象,即为椭圆的外接矩形，若矩形是一个正方形那么绘制出来的就是圆形了
    	 * */
    	public void oval(View view){
    		RectF oval=new RectF(100, 100,400, 200);
    		canvas.drawOval(oval, paint);
    		iv.setImageBitmap(baseBitmap);
    	}
    	/**
    	 * @author mikyou
    	 * 绘制路径的原理
    	 *  canvas.drawPath(path, paint);//第一个参数就是Path路径对象
    	 * */
    	public void path(View view){
    		Path path=new Path();
    		path.moveTo(100, 100);//首先将位置定位到(100,100),并把该点作为路径的起点
    		path.lineTo(300, 250);
    		path.lineTo(500, 280);
    		path.lineTo(390, 570);
    		path.lineTo(100, 100);
    		canvas.drawPath(path, paint);
    		iv.setImageBitmap(baseBitmap);
    	}
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		iv=(ImageView) findViewById(R.id.iv);
    		initCanvas();
    	}
    	private void initCanvas() {
    		//得到
    		baseBitmap=Bitmap.createBitmap(800, 800, Config.ARGB_8888);
    		canvas=new Canvas(baseBitmap);
    		paint=new Paint();
    		paint.setColor(Color.BLUE);
    		paint.setAntiAlias(true);
    		paint.setStyle(Style.STROKE);
    		paint.setStrokeWidth(10);
    	}
    
    }

这是绘图入门的基本用法，关于图片的处理以及绘图的一些高级用法将会在下篇博客中给出。