画图-drawpoint and drawpath

版权声明：本文因海牛宝宝童鞋才疏学浅，可能晦涩难懂，但也是呕心沥血之作，麻烦转载的时候留个申明。 https://blog.csdn.net/u012321815/article/details/26018163

        嗯，又是半个月没更新了，由于近期才考完试。事实上这个是月头就做好的项目的一部分。一直没把它写出来，事实上也不难。

       事实上就是绘图，我这里讲两种方式，当然，事实上有非常多方式，我主要是依照做得项目来学习的，事实上我最初考虑是用drawpath的方法来绘图，后来发现给我的数据点足够多，所以就用drawpoint方法，画出来的图显示出来也是像我们看到的那样是连续的一幅。

       首先，谈谈要做成什么效果。由于我要画的是铁轨的轨廓图，已有的是一个标准轨廓的CAD图上取下来的点，是一个txt文件，坐标是一个二维的(x，y)。我要做的就是用这些点，来画出廓形图，当然事实上还有其它的要求。那是项目要求的，和我们说的主题不是非常有关。所以就不说了。

        从这个我们就能够看出来。第一。我们要能把这个txt文件的数据读取出来，最好能依照我们想要的方式读取。其次，我们选用什么方式画，我这里两种我都说。由于我认为都非常easy的操作，主要就是重写一个onDraw()的方法。和实例化一个自己的view来继承view类。然后更新我们的view。

       嗯，首先说下怎么得到我要的点吧。毫无疑问就是读文件操作，可是，我们怎么把这些点获取呢？这里用的就是切割，(split)。取到的点是x，y坐标，中间有一个逗号，利用这个逗号把x，y坐标提取出来。然后提取出来的数据。存在一个Hash表中，这样能够方便我们查找这张表，从而来得到点的坐标。

public void dealFile(String path){
		File file = new File(path);//得到文件
		String i=null;
	if(file.exists()){
		try{
			FileReader reader = new FileReader(file);
			BufferedReader bRreader = new BufferedReader(reader);
			String line = null;
			while((line = bRreader.readLine()) != null)//读操作
				{
					a = line.split(",");
					idList.add(i);
					map = new HashMap<String,Object>();
					map.put("x", a[0]);
					map.put("y", a[1]);
					//map.put("z", a[2]);
					listItem.add(map);
				}
		}catch(Exception e){
		}
	}

       切割每行。得到两个数据。分别存在了数组a里面，然后把这条记录写进表里面，运行完这个文件操作，就能够得到一个hash表。里面存的就是我们x，y坐标。并且方便我们读取。

       有了这些点，我们要做的就是绘图。

由于我这里取的点密度非常大，所以我能够直接drawpoint方法就能够把这些点作出来。而用户看到的效果却不是单个的点，而是连续的一个弧线。

至于drawpoint方法，首先要做的是写一个继承view的类，显示的时候载入的不是.xml文件，而是这个类的一个实例。而在这个实例中，重写了onDraw这种方法，而drawpoint也就是在这种方法中被调用。

至于drawpoint这方法的參数，有三个，两个是坐标，最后一个是画笔。(paint)，画笔是设置这个绘制的属性的，这画点的时候不是非常好理解，假设说画线，线的颜色、粗细等，这都是设置画笔来实现的。当然，我一直忘记说画布(canvas)了。画布的作用就是绘图的画板。你的图是在画布上绘制的，所以重写的onDraw这种方法的传入參数就是这个画布。还有bitmap，这个的概念事实上就是自己定义一个图片，裁剪它得到我们想显示出来的部分。

        直接给出drawpoint方法和drawpath方法代码，非常好理解。

protected void onDraw(Canvas canvas){
			super.onDraw(canvas);

			//设置区域
			//canvas.clipRect(0, 300, 720, 800);
			canvas.clipRect(0, 200, 480, 500);
			canvas.drawColor(Color.BLACK);
			canvas.save();

			//绘图
			mpaint.setAntiAlias(true);
			mpaint.setColor(Color.WHITE);
			mpaint.setStyle(Paint.Style.STROKE);
			mpaint.setStrokeWidth(3);//线宽

			//文字显示
			String familyName = "宋体";
	        Typeface font = Typeface.create(familyName, Typeface.BOLD);
	        pword.setTypeface(font);
	        pword.setColor(Color.WHITE);
	        pword.setTextSize(22);

	        //红线
	        pshowred.setColor(Color.RED);
	        pshowred.setStyle(Paint.Style.STROKE);
	        pshowred.setStrokeWidth(3);//线宽

	        //黄线
	        pshowyellow.setColor(Color.YELLOW);
	        pshowyellow.setStyle(Paint.Style.STROKE);
	        pshowyellow.setStrokeWidth(3);//线宽

	        //绘图
			for (HashMap<String, Object> map : listItem) {
				Object objectx = map.get("x");
				Object objecty = map.get("y");
				float x = Float.parseFloat(objectx.toString());
				float y = Float.parseFloat(objecty.toString());

				canvas.drawPoint(translate_x(x), translate_y(y), mpaint);
            }

			//固定文字
	        //canvas.drawText("设计轨廓", 300, 700, pword);
			canvas.drawText("设计轨廓", 200, 450, pword);
	        canvas.drawTextOnPath("非工作边", pathword, 0, 0, pword);

			//不固定部分
	        //第一个点
	        canvas.drawPath(path1r,pshowred);
	        canvas.drawPath(path1, pshowyellow);
	        canvas.drawPath(path1y, pshowyellow);
	        //canvas.drawText("第一", translate_x(13)-30, translate_y(33.0486)-230, pword);
	        canvas.drawText("第一", translate_x(13)-30, translate_y(33.0486)-130, pword);

	      //第二个点
	        canvas.drawPath(path2r,pshowred);
	        canvas.drawPath(path2, pshowyellow);
	        canvas.drawPath(path2y, pshowyellow);
	       // canvas.drawText("第二", translate_x(25)-30, translate_y(34.5339)-230, pword);
	        canvas.drawText("第二", translate_x(25)-30, translate_y(34.5339)-130, pword);

	      //第三个点
	        canvas.drawPath(path3r,pshowred);
	        canvas.drawPath(path3, pshowyellow);
	        canvas.drawPath(path3y, pshowyellow);
	        //canvas.drawText("第三", translate_x(36.5)-30, translate_y(34.8134)-230, pword);
	        canvas.drawText("第三", translate_x(36.5)-30, translate_y(34.8134)-130, pword);

	      //第四个点
	        canvas.drawPath(path4r,pshowred);
	        canvas.drawPath(path4, pshowyellow);
	        canvas.drawPath(path4y, pshowyellow);
	        //canvas.drawText("第四", translate_x(65)-30, translate_y(31.4158)-230, pword);
	        canvas.drawText("第四", translate_x(65)-30, translate_y(31.4158)-130, pword);

		}
	}

       我这里直接贴出来的是项目里面的代码，不想自己重写一段画点的代码。事实上里面包含了画点、沿路径作图、写字、沿路径写字等等方法。这里面有对坐标进行变换。由于CAD取到的点坐标是实际的坐标。而我们显示在手机上的须要缩放，并且还有对y轴进行取反。

       大致的效果图例如以下。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlzaHVjYWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />