绘图-drawpoint and drawpath

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

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

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

        从这个我们就可以看出来，第一，我们要能把这个txt文件的数据读取出来，最好能按照我们想要的方式读取；其次，我们选用什么方式画，我这里两种我都说，因为我觉得都很简单的操作，主要就是重写一个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轴进行取反。

       大致的效果图如下。