Android学习2-简单的实现画图功能（改变颜色和粗细）

西狂杨过

2017-06-29

关注关注

学习android第2天~~~

实现了一个简单的画图功能（很简陋的那种....）主要用到的控件有imageview、dialog

1、activity_main.xml

每次第一步先做都是将页面的布局设置好，这次的页面布局很简单；

包括3个imageview作为按钮，button的区别在于，我们可以使用自定义的图片来作为按钮，我们可以点击其中一个来设置画笔颜色、粗细或者选择画固定的图形

Android学习2-简单的实现画图功能（改变颜色和粗细）

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="18dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="17dp"
        android:id="@+id/pen"
        android:background="@drawable/pen"/>

    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/pen"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="10dp"
    android:layout_marginEnd="10dp"
    android:id="@+id/colors"
    android:background="@drawable/color"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/shape"
        android:layout_below="@+id/colors"
        android:background="@drawable/shape"//加载背景图片
        android:layout_alignTop="@+id/colors"
        android:layout_centerHorizontal="true" />

//一下表示定义了一个画板（paintview是一个自定义的实现画图的类）
    <com.example.lainka.paint1.paintview
        android:id="@+id/paintview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/pen"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="13dp" />

2、MainActivity.java

该activity主要实现了对页面控件点击事件的获取，通俗一点就是，实现了我们怎么知道我在页面上点了哪个按钮，pen 按钮（选择画笔粗细）还是color（选择颜色）按钮或者shape（选择形状）。以及点了这三个按钮又应该做些什么；

以color为例，点击color之后弹出对话框，显示我们所有的颜色，如下：

Android学习2-简单的实现画图功能（改变颜色和粗细）
获取页面上的控件

public class MainActivity extends AppCompatActivity {
    public static final String[] C1={"红色","绿色","蓝色","黑色"};//用来表示页面上的颜色显示
    public static final int[] C2={Color.RED,Color.GREEN,Color.BLUE,Color.BLACK};
    public static final String[] P={"5","10","15","20"};//页面显示的画笔可以选择的粗细
    public static final String[] S={"圆形","正方形","长方形"};//可以选择的图形
    ImageView pen;
    ImageView shape;
    ImageView colors;
    paintview block;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pen=(ImageView)findViewById(R.id.pen);
        colors=(ImageView)findViewById(R.id.colors);
        shape=(ImageView)findViewById(R.id.shape);
        block=(paintview) findViewById(R.id.paintview);

监听color按钮，并弹出对话框，改变画笔的粗细和改变形状和这个异曲同工

colors.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
        dialog.setTitle("选择一个颜色");
        dialog.setItems(C1, new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                block.changecolor(C2[which]);//将页面上获取的到颜色传给paintview类，改变画笔的颜色
                Toast.makeText(MainActivity.this,
                        "你点击了" + C1[which],
                        Toast.LENGTH_SHORT).show();
            }
        });
        dialog.show();
    }
});

3、paintview.java 画图的实现

（1）改变颜色

public void changecolor(int str)//str对应activity中C2数组，相当于把c2数组中内容传递过来
    {
        p.setColor(str);//改变颜色
    }

（2）改变画笔粗细

public void changepen(int str)
    {
        p.setStrokeWidth(str);
    }

（3）改变形状

public void changeshape(String str)
    {
        if(str.equals("圆形"))
            s=1;
        else if(str.equals("正方形"))
            s=2;
        else if(str.equals("长方形"))
            s=3;
    }

因为我们不能在画固定形状的同时又自己绘制图形，所以设定一个s的值来判断当前画图的方式

（4）ontouch函数，定义鼠标提起落下时进行的动作

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

（5）ondraw函数，开始画图啦啦啦啦

protected void onDraw(Canvas canvas){
        //Paint p=new Paint();        //定义画笔
        //p.setColor(Color.RED);      //定义颜色
      //  p.setStrokeWidth(5);
        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(s==0)//自由画图
                    canvas.drawLine(first.x, first.y, last.x, last.y,p);
                    else if(s==1)//画圆
                       canvas.drawCircle(100f, 50f, 50f, p);
                   else if(s==2)//画正方形
                       canvas.drawRect(185, 70, 130, 120, p);
                   else if(s==3)//画长方形
                       canvas.drawRect(200, 130, 130, 180, p);

                }
            }
        }

4、have a try~~~

Android学习2-简单的实现画图功能（改变颜色和粗细）
本来想画一个萌萌哒的啥...但是我的绘画功底.....嗯，随意好啦