画板的简单实现 -

LL幻

浏览: 3239 次
性别:
来自: 青岛

最近访客更多访客>>

梳子不爱头发

全站唯一管_理员

yummyyoung

土豆-.-

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

画板的简单实现

博客分类：

Android开发

今天学习了Android的画板的设计，涉及的内容有Android的Touch事件、Spinner组件的应用，当然还有画板的画布，画笔等相关的知识，下面来说说我的设计过程。

本文的设计主要参照另外一个博主的代码，在他的基础上进行了修改，链接：http://429899791.iteye.com/blog/2196928。

由于原来的博主的代码比较详细，我主要讲的是自己增加或者更改的东西。

更改一：

原来的画板只能在画板上绘制一条线，即提笔之后再次下笔原来的内容就会消失，更改之后可以重复绘制多个线条。

如下代码：

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);  
            }

问题找到了，就此更改，我们把这个的语句去掉，仅仅去掉还不行，我们还要在第二次按下的时候设置一个断点来判定是第二次落笔，如此便能多次绘制线条。主要更改是：

去掉pointall=new ArrayList<Point>();
新建断点 p=new Point(0,0);
新增 if(first.x==0||last.x==0) //判定为断点，用continue语句跳出连接下一个点的语句。

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){    //当按下  
               p=new Point(0,0);//设置断点，来绘制新的线条
                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();    //不停下指  
                if(first.x==0||last.x==0)   //判定为断点，用continue语句跳出连接下一个点的语句
					continue; 
               
                canvas.drawLine(first.x, first.y, last.x, last.y,p);      
                      
                }  
            }  
        }  
    }

更改二：新增画笔颜色和画笔粗细的功能

首先讲一下Spinning下拉框的使用（因为学习的时候上网查这个，感觉很多是混合着其他东西的，看起来比较复杂）：

1.设计页面用Spinning标签：

<Spinner
            android:id="@+id/colortext"
            android:layout_width="97dp"
            android:layout_height="match_parent"
            android:entries="@array/data"
            android:spinnerMode="dialog" />

2.在res包的values里面新建一个xml文件来存放下拉框内容的数组，data是颜色的内容，data1是笔大小的内容，代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <string-array name="data">
        <item>红色</item>
        <item>蓝色</item>
        <item>黑色</item>
    </string-array>
    <string-array name="data1">
        <item>细</item>
        <item>中</item>
        <item>粗</item>
    </string-array>
</resources>

3.新建监听事件：

 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=-1;
				else if(color1.equals("黑色"))
					paintview.color1=0;
				else if(color1.equals("蓝色"))
					paintview.color1=-2;
			}
			@Override
			public void onNothingSelected(AdapterView<?> parent) {
				// TODO Auto-generated method stub
				
			}  
			  
		        });

弄完了相关准备工作，然后就是在原理的代码里面要把颜色和笔大小的属性进行设置，考虑到每次更换笔颜色和大小都会停笔更改，所以把这些属性赋值给断点这里处理，因为前面设置了x坐标来判定是否断点，所以我们利用y坐标来判定设置了什么颜色和大小。

新设置断点信息：

if(e.getAction()==e.ACTION_DOWN){    //当按下
					p=new Point(0,color1);//color1是下拉框选择的颜色的值
					pointall.add(p);
					p=new Point(0,pen);//pen是画笔大小的值
					pointall.add(p);
			//	pointall =new ArrayList<Point>();
				
			}

增加判断笔颜色和设置大小：

//判断笔的颜色
				if(first.y==0)p.setColor(Color.BLACK);//设置为黑色
				else if(first.y==-1)p.setColor(Color.RED);//设置为红色
				else if(first.y==-2)p.setColor(Color.BLUE);//设置为蓝色
				
				//判断笔大小
				 if(first.y==-10)p.setStrokeWidth(10);//设置笔大小为10
				else if(first.y==-20)p.setStrokeWidth(20);//设置笔大小为20
				else if(first.y==-30)p.setStrokeWidth(30);//设置笔大小为30

最终paintview代码如下：

public class paintview extends View{
	private List<Point> pointall=new ArrayList<Point>();
	static int color1=-1;
	static int pen=-10;
	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){    //当按下
					p=new Point(0,color1);//color1是下拉框选择的颜色的值
					pointall.add(p);
					p=new Point(0,pen);//pen是画笔大小的值
					pointall.add(p);
			//	pointall =new ArrayList<Point>();			
			}
			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();        //定义画笔
		//定义颜色
	
		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==0)p.setColor(Color.BLACK);//设置为黑色
				else if(first.y==-1)p.setColor(Color.RED);//设置为红色
				else if(first.y==-2)p.setColor(Color.BLUE);//设置为蓝色
				
				//判断笔大小
				 if(first.y==-10)p.setStrokeWidth(10);//设置笔大小为10
				else if(first.y==-20)p.setStrokeWidth(20);//设置笔大小为20
				else if(first.y==-30)p.setStrokeWidth(30);//设置笔大小为30
				if(first.x==0||last.x==0)
					continue;
//					p.setStrokeWidth(10);
					 	
				canvas.drawLine(first.x, first.y, last.x, last.y,p);
				
				
				}
				
			}
			
			
			
		}
	}

	
}

MainActivity代码如下：

public class MainActivity extends Activity {
	private Spinner color;
	private Spinner pen;
	public String color1="红色";
	private String pen1="细";
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//监听得到画笔的颜色
        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=-1;
				else if(color1.equals("黑色"))
					paintview.color1=0;
				else if(color1.equals("蓝色"))
					paintview.color1=-2;
			}
			@Override
			public void onNothingSelected(AdapterView<?> parent) {		
			}  		        });
		
		//监听得到画笔的大小
        pen=(Spinner)findViewById(R.id.pentext);
		pen.setOnItemSelectedListener(new OnItemSelectedListener() {

			@Override
			public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
				// TODO Auto-generated method stub
				pen1= (String) pen.getSelectedItem();
				if(pen1.equals("细"))
				paintview.pen=-10;
				else if(pen1.equals("中"))
					paintview.pen=-20;
				else if(pen1.equals("粗"))
					paintview.pen=-30;	}
			@Override
			public void onNothingSelected(AdapterView<?> parent) {
				// TODO Auto-generated method stub
				}  		  
		        });}

最终效果如下：

最后提一下这次新学的一个知识，就是paintview的类可以直接嵌入MainActivity里面，这样画板会填充到主页面里面，这样不需要这个类新建一个xml文件来做页面，只要在activity_main加上如下声明：

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