萌新学android之第二天—简单画板

今天学习了怎么做一个简单的画图板。

由于尝试的过程没有截图，只有最终的结果，所以中间过程的尝试截图就没有了。

 

首先把参考代码看懂，才能自己做。

“

Android中的触摸事件可是大头中的大头， 其中onTouch事件是在view中定义的，所以想要实现绘图，自己要定义一个绘图组件，这个组件一定要继承view类，同时覆盖重写view中的onDraw方法。 Android画图最基本的三个对象（Color，Paint，Canvas） 三个类都存放在 android.graphics包下 1) Color :颜色对象，相当于现实生活中的 ‘调料’ 2) Paint : 画笔对象，相当于现实生活中画图用的 ‘笔’————主要的还是对‘画笔’进行设置 3) Canvas : 画布对象，相当于现实生活中画图用的 ‘纸 或 布’

”

根据指导，新建一个java类，写上代码

 

public class paintview extends View{
	private List<Point> pointall=new ArrayList<Point>();
	public paintview(Context context, AttributeSet attrs) {
		super(context, attrs);
		super.setBackgroundColor(Color.WHITE);
		super.setOnTouchListener(new Touch());
	}
	private class Touch implements OnTouchListener{
		@Override
		public boolean onTouch(View v, MotionEvent e) {
			// TODO Auto-generated method stub
			Point p=new Point((int)e.getX(),(int)e.getY());
			if(e.getAction()==e.ACTION_DOWN){    //当按下
				pointall=new ArrayList<Point>();
				pointall.add(p);
			}
			else if(e.getAction()==e.ACTION_UP){//当抬起
				pointall.add(p);
				paintview.this.postInvalidate();   //重绘
			}
			else if(e.getAction()==e.ACTION_MOVE){
				pointall.add(p);                   //移动时候
				paintview.this.postInvalidate();   //重绘
			}
			return true;
		}
	}
	protected void onDraw(Canvas canvas){
		Paint p=new Paint();        //定义画笔
		p.setColor(Color.RED);      //定义颜色
		if(pointall.size()>1){
			Iterator<Point> iter=pointall.iterator();// 现在有坐标点保存的时候可以开始进行绘图
			Point first=null;
			Point last=null;
			while(iter.hasNext()){
				if(first==null){
					first=(Point)iter.next();
				}
				else{ 
					if(last!=null){
					first=last;    //将下一个坐标点赋给上面的
				   }
				last=(Point)iter.next();	//不停下指
				canvas.drawLine(first.x, first.y, last.x, last.y,p);	
					
				}
			}
		}
	}
}

 
 之后配置好activity_main.xml

 

加上这段：

<com.example.paint.paintview
        android:id="@+id/paintview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

现在，参考代码已经全部导入我们的工程了，运行一下看看效果。

 
试试结果，能画出一条一个像素宽度的线条，并且只有红色，而且再次点击绘制的时候原来线条消失了。

 

所以尝试对其进行改进，试想加入画笔颜色，画笔粗细。最重要的，可以画多条线。

首先分析代码，线条的绘制方式。其使用迭代器，循环遍历集合并根据相邻点的位置进行连线，达到绘图的效果。

但是发现在按下事件中：

if(e.getAction()==e.ACTION_DOWN){    //当按下

pointall=new ArrayList<Point>();

pointall.add(p);

 

}

每一次迭代器都被重置了，导致前面的信息丢失。为了解决这个问题，可以设置参数进行判断，当只有在第一次画的时候，重置迭代器，之后的绘制，不会重置迭代器：

if(e.getAction()==e.ACTION_DOWN){    //当按下

if(f==false){

f=true;

pointall=new ArrayList<Point>();

p=new Point(0,-2001);

 

 

}

尝试一下。好的，现在我们可以一直绘制了。但是也有问题。

绘制的线条并不是分开的，新线条的起点和旧线条的终点连接在了一起？

 

问题就在与渲染方式，其遍历集合，把前一个点和后一个点进行连接，而新线条的起点就是和旧线条的终点相邻。怎么办呢？

其实只要进行判断，当遇到终点或起点的时候，不要把他们连接就可以了。

但是如何在集合里面保存起点终点信息？集合里面只有 点 ，要保存起点终点信息，也只能通过点进行保存。

 

那么可以把起点终点的坐标设置为一个特殊值，当遇到的时候，就知道他们是起点和终点了。

if(e.getAction()==e.ACTION_DOWN){    //当按下

if(f==false){

f=true;

pointall=new ArrayList<Point>();

}

p=new Point(0,0);

 

pointall.add(p);

起点坐标被强制设置为0。同样的，对终点进行标记。

 

然后在渲染的方法的前面加上：

if(first.x==0||last.x==0)continue;

canvas.drawLine(first.x, first.y, last.x, last.y,p);

这样，如果遇到起点终点，就会跳过，不渲染。

 

尝试一下！好的，成功把线条断开了！

 

颜色怎么办？首先在面板设置组件，点击的时候获取信息，判断选择了什么颜色。

这个组件随便什么都可以，我使用的是Spinner。怎么获取信息并且传入我们之前新建的java类里面，这里就不多说了。

 

好，现在我们可以从面板中获取颜色信息了，但是怎么改变线条颜色呢？

 

由于我们只有一个迭代器，需要保存不同线条的信息，同理，我们也只能使用点坐标进行信息保存。仔细看上面的代码，发现我只用了起点终点的x坐标来判断是否渲染，现在，我们把它的y坐标利用上，用它来保存颜色信息！

if(e.getAction()==e.ACTION_DOWN){    //当按下
				if(f==false){
					f=true;
					pointall=new ArrayList<Point>();
					}
				p=new Point(0,color1);
				pointall.add(p);
			}

 参数color1是一个整数，我用来保存颜色信息，需要自己建立面板传入的参数和颜色代表的整数之间的对应！

并且在绘制之前，进行判断当前线条的颜色。

if(first.y==1000)p.setColor(Color.BLACK);//黑
				else if(first.y==-1001)p.setColor(Color.RED);//红
				else if(first.y==-1002)p.setColor(Color.rgb(255, 150, 0));//橙
				else if(first.y==-1003)p.setColor(Color.YELLOW);//黄
				else if(first.y==-1004)p.setColor(Color.GREEN);//绿
				else if(first.y==-1005)p.setColor(Color.CYAN);//青
				else if(first.y==-1006)p.setColor(Color.BLUE);//蓝
				else if(first.y==-1007)p.setColor(Color.MAGENTA);//紫
				else if(first.y==-1008)p.setColor(Color.GRAY);//灰
				//断线跳过
				if(first.x==0||last.x==0)continue;
				canvas.drawLine(first.x, first.y, last.x, last.y,p);

 尝试一下！成功了，我们可以切换不同颜色了！而且不同的线条也显示出不同的颜色了！

 

接下来是更换线条粗细。使用同样的思想，用点来保存信息，但是，起点终点的x和y坐标都被我们利用完了，怎么办？很简单！它们只是记录信息的点，不要要参加绘制，所以可以再来一个点进行记录粗细的信息。

if(e.getAction()==e.ACTION_DOWN){    //当按下
				if(f==false){
					f=true;
					pointall=new ArrayList<Point>();
					p=new Point(0,-2001);
					pointall.add(p);
					}
				p=new Point(0,linewight);
				pointall.add(p);
				p=new Point(0,color1);
				pointall.add(p);
			}

 linewight这个参数被我用来存放粗细的信息，同样的要自己建立面板传入的参数和信息的整数对应关系。

由于是携带信息的点，所以干脆就和起点放在一起，“两个起点”。

 

但是！这里要注意一下，我们要给整个集合的第一个点设置一个粗细的参数，不然的话，后面改变线条粗细的时候，会因为第一条线没有起点携带了粗细信息而会跟着被改变

（其实读者可以自己试一试，如果把我上面代码的p=new Point(0,-2001);pointall.add(p);给删掉，会是什么效果）。

 

接下来，渲染的地方就最终变成这个样子了：

                                last=(Point)iter.next();	//不停下指
				//判断线条颜色
				if(first.y==1000)p.setColor(Color.BLACK);//黑
				else if(first.y==-1001)p.setColor(Color.RED);//红
				else if(first.y==-1002)p.setColor(Color.rgb(255, 150, 0));//橙
				else if(first.y==-1003)p.setColor(Color.YELLOW);//黄
				else if(first.y==-1004)p.setColor(Color.GREEN);//绿
				else if(first.y==-1005)p.setColor(Color.CYAN);//青
				else if(first.y==-1006)p.setColor(Color.BLUE);//蓝
				else if(first.y==-1007)p.setColor(Color.MAGENTA);//紫
				else if(first.y==-1008)p.setColor(Color.GRAY);//灰
				//判断线条粗细
				if(first.y==-2001)p.setStrokeWidth(1);
				else if(first.y==-2002)p.setStrokeWidth(2);
				else if(first.y==-2003)p.setStrokeWidth(3);
				else if(first.y==-2004)p.setStrokeWidth(4);
				else if(first.y==-2006)p.setStrokeWidth(6);
				else if(first.y==-2008)p.setStrokeWidth(8);
				//断线跳过
				if(first.x==0||last.x==0)continue;
				canvas.drawLine(first.x, first.y, last.x, last.y,p);

 我选用的选择线条粗细的组件是图片按钮。

好的，现在我今天的最终版也就做出来了，我们来试试效果。

记住，目标：绘制多条线，不同颜色的线，不同粗细的线！

 

 最后的最后，给上代码：

Main.Activity.java:


public class MainActivity extends Activity {
private ImageButton px01;
private ImageButton px02;
private ImageButton px03;
private ImageButton px04;
private ImageButton px06;
private ImageButton px08;
private Spinner color;
private String color1;
private Spinner lwight;
private String lwight1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        px01=(ImageButton)findViewById(R.id.imageButton1);
        px01.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v)
			{
				paintview.linewight=-2001;
			}
		});
        px02=(ImageButton)findViewById(R.id.imageButton2);
        px02.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v)
			{
				paintview.linewight=-2002;
			}
		});
        px03=(ImageButton)findViewById(R.id.imageButton3);
        px03.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v)
			{
				paintview.linewight=-2003;
			}
		});
        px04=(ImageButton)findViewById(R.id.imageButton4);
        px04.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v)
			{
				paintview.linewight=-2004;
			}
		});
        px06=(ImageButton)findViewById(R.id.imageButton5);
        px06.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v)
			{
				paintview.linewight=-2006;
			}
		});
        px08=(ImageButton)findViewById(R.id.imageButton6);
        px08.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v)
			{
				paintview.linewight=-2008;
			}
		});
        color=(Spinner)findViewById(R.id.colortext);
		color.setOnItemSelectedListener(new OnItemSelectedListener() {
			@Override
			public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
				// TODO Auto-generated method stub
				color1= (String) color.getSelectedItem();
				if(color1.equals("红色"))
					paintview.color1=-1001;
				else if(color1.equals("橙色"))
					paintview.color1=-1002;
				else if(color1.equals("黄色"))
					paintview.color1=-1003;
				else if(color1.equals("绿色"))
					paintview.color1=-1004;
				else if(color1.equals("青色"))
					paintview.color1=-1005;
				else if(color1.equals("蓝色"))
					paintview.color1=-1006;
				else if(color1.equals("紫色"))
					paintview.color1=-1007;
				else if(color1.equals("灰色"))
					paintview.color1=-1008;
				else
				paintview.color1=1000;
			}
			@Override
			public void onNothingSelected(AdapterView<?> parent) {}  
		});
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

 

paintview.java:


public class paintview extends View{
	static int color1;
	static int linewight;
	static int linewight2;
	private List<Point> pointall=new ArrayList<Point>();
	private boolean f=false;
	public paintview(Context context, AttributeSet attrs) {
		super(context, attrs);
		super.setBackgroundColor(Color.rgb(250, 245, 220));
		super.setOnTouchListener(new Touch());
	}
	private class Touch implements OnTouchListener{
		@Override
		public boolean onTouch(View v, MotionEvent e) {
			// TODO Auto-generated method stub
			Point p=new Point((int)e.getX(),(int)e.getY());
			if(e.getAction()==e.ACTION_DOWN){    //当按下
				if(f==false){
					f=true;
					pointall=new ArrayList<Point>();
					p=new Point(0,-2001);
					pointall.add(p);
					}
				p=new Point(0,linewight);
				pointall.add(p);
				p=new Point(0,color1);
				pointall.add(p);
			}
			else if(e.getAction()==e.ACTION_UP){//当抬起
				pointall.add(p);
				paintview.this.postInvalidate();   //重绘
			}
			else if(e.getAction()==e.ACTION_MOVE){
				pointall.add(p);                   //移动时候
				paintview.this.postInvalidate();   //重绘
			}
			return true;
		}
	}
	protected void onDraw(Canvas canvas){
		Paint p=new Paint();        //定义画笔
		p.setColor(Color.BLACK);      //定义颜色
		if(pointall.size()>1){
			Iterator<Point> iter=pointall.iterator();// 现在有坐标点保存的时候可以开始进行绘图
			Point first=null;
			Point last=null;
			while(iter.hasNext()){
				if(first==null){
					first=(Point)iter.next();
				}
				else{ 
					if(last!=null){
					first=last;    //将下一个坐标点赋给上面的
				   }
				last=(Point)iter.next();	//不停下指
				//判断线条颜色
				if(first.y==1000)p.setColor(Color.BLACK);//黑
				else if(first.y==-1001)p.setColor(Color.RED);//红
				else if(first.y==-1002)p.setColor(Color.rgb(255, 150, 0));//橙
				else if(first.y==-1003)p.setColor(Color.YELLOW);//黄
				else if(first.y==-1004)p.setColor(Color.GREEN);//绿
				else if(first.y==-1005)p.setColor(Color.CYAN);//青
				else if(first.y==-1006)p.setColor(Color.BLUE);//蓝
				else if(first.y==-1007)p.setColor(Color.MAGENTA);//紫
				else if(first.y==-1008)p.setColor(Color.GRAY);//灰
				//判断线条粗细
				if(first.y==-2001)p.setStrokeWidth(1);
				else if(first.y==-2002)p.setStrokeWidth(2);
				else if(first.y==-2003)p.setStrokeWidth(3);
				else if(first.y==-2004)p.setStrokeWidth(4);
				else if(first.y==-2006)p.setStrokeWidth(6);
				else if(first.y==-2008)p.setStrokeWidth(8);
				//断线跳过
				if(first.x==0||last.x==0)continue;
				canvas.drawLine(first.x, first.y, last.x, last.y,p);
				}
			}
		}
	}
}

 

activity_main.xml:


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <com.example.day2.paintview
        android:id="@+id/paintview"
        android:layout_width="465dp"
        android:layout_height="216dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

    <Spinner
        android:id="@+id/colortext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/paintview"
        android:entries="@array/datacolor" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/colortext"
        android:src="@drawable/onepx" />

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/paintview"
        android:layout_below="@+id/imageButton1"
        android:src="@drawable/twopx" />

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/paintview"
        android:layout_below="@+id/imageButton2"
        android:src="@drawable/threepx" />

    <ImageButton
        android:id="@+id/imageButton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/paintview"
        android:layout_below="@+id/imageButton3"
        android:src="@drawable/fourpx" />

    <ImageButton
        android:id="@+id/imageButton5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/paintview"
        android:layout_below="@+id/imageButton4"
        android:src="@drawable/sixpx" />

    <ImageButton
        android:id="@+id/imageButton6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/paintview"
        android:layout_below="@+id/imageButton5"
        android:src="@drawable/eighpx" />

</RelativeLayout>

 

选择框配置xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="datacolor">
        <item>黑色</item>
        <item>红色</item>
        <item>橙色</item>
        <item>黄色</item>
        <item>绿色</item>
        <item>青色</item>
        <item>蓝色</item>
        <item>紫色</item>
        <item>灰色</item>
    </string-array>
</resources>

 

谢谢欣赏，不足之处还请多多指教

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

反正我做完就这样了，也不打算改，想怎么说就怎么说吧。