Android简易画板:

刚开始学Android不久,写一个画板来熟悉事件处理和图像,以及界面。
功能:选颜色,选形状,画创意图形,选线条粗细,橡皮功能,清空功能
样式:用到菜单
这里写图片描述
分两个类来写:
DrawingActivity:
选ImageView当画板,在画板上画显示东西,画图事件源是ImageView,加监听器OnTouchListener,清空功能事件源是Button,加监听器OnClickListener

// 获取事件源对象ImageView
        ImageView ivDrawing = (ImageView) this.findViewById(R.id.ivDrawing);
        Button clearbtn=(Button)this.findViewById(R.id.clearbtn);
// 实例化DrawListener事件处理类的对象(把当前activity传过去)
        dl = new DrawingListener(this);
// 给事件源设置触屏监听方法,指定事件处理类的对象dl
        ivDrawing.setOnTouchListener(dl);
        clearbtn.setOnClickListener(dl);

加菜单:
1.在activity中的函数中添加对应menu

    //加载菜单
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.drawing, menu);//该页面会跳出该菜单
        return true;
    }

2.菜单的样子选项设置在menu.xml中设置,下面代码的效果如上图所示
让菜单显示出来:android:showAsAction=”always”
让菜单选项加上图标:android:icon=”@drawable/rect”

    <item
        android:id="@+id/item_type"
        android:title="@string/type"
        android:showAsAction="always">
        <menu>
            <item
                android:id="@+id/type_line"
                android:title="@string/type_line"
                android:icon="@drawable/line"/>
            <item
                android:id="@+id/type_rect"
                android:title="@string/type_rect"
                android:icon="@drawable/rect"/>
            <item
                android:id="@+id/type_oval"
                android:title="@string/type_oval"
                android:icon="@drawable/oval"/>
        </menu>
    </item>

3.菜单按钮上面不用添加点击事件监听器这些,菜单是系统给的系统默认给定了响应方法,只需要重写就行,重写方法onOptionsItemSelected(MenuItem item),因为点击事件响应获取是点击了哪个按钮是在acivity中重写得知,但操作却是在listener中用,所以点击menu选项要把对应的按钮的id传给listener,所以要在该方法中传参给listener
在listener中得到参数后,比对是哪个id就进行哪个操作。

//重写菜单的点击事件方法
    public boolean onOptionsItemSelected(MenuItem item){//点的是菜单哪个选项
        //点击选项把对应的itemid传过去
        dl.setItemId(item.getItemId());
        return true;        
    }

DrawingListener
先用一个函数来获取acivity那边传来的itemid,通过选了菜单中哪些选项就进行哪些操作

    public void setItemId(int itemId) {
        switch (itemId) {
        // 颜色
        case R.id.color_red:
            paint.setColor(Color.RED);
            break;
。。。
        // 形状
        case R.id.type_line:
            type = "line";
            break;
        case R.id.type_oval:
            type = "oval";
            break;
。。。
        // 线条粗细
        case R.id.line_big:
            paint.setStrokeWidth(50);
            break;
。。。
        // 分型
        case R.id.shape_one:
            type = "shape_one";
            break;
。。。
        }
    }

现在就可以开始画了,
先在构造方法里实例化画笔对象

    public DrawingListener(DrawingActivity d) {
        da = d;
        // 实例化Paint画笔对象要放在前面,否则没法设置颜色
        paint = new Paint();
    }

在OnTouchListener的onTouch实现画图:
先实例化位图、canvas

    public boolean onTouch(View v, MotionEvent event) {

        if (bm == null) {
            ivDraw = (ImageView) v;
            // 创建一个和ImageView一样大小的32位真彩色位图对象。
            bm = Bitmap.createBitmap(v.getWidth(), v.getHeight(),
                    Bitmap.Config.ARGB_8888);
            // 根据bm位图对象实例化一个Canvas对象
            canvas = new Canvas(bm);
        }

按下鼠标:获取起始点,

    int action = event.getAction();// 获取触屏的动作
        switch (action) {
        case MotionEvent.ACTION_DOWN:
            x1 = event.getX();
            y1 = event.getY();
            break;

颜色、细条粗细:在上面的获取itemid信息中就实现了。

case R.id.color_red:
            paint.setColor(Color.RED);
            break;
case R.id.line_big:
           paint.setStrokeWidth(50);
            break;

移动鼠标里写铅笔和橡皮:
铅笔:思路:鼠标一移动都画直线(橡皮功能与铅笔一样,橡皮相当于颜色为背景色的铅笔)

case MotionEvent.ACTION_MOVE:
             if (type.equals("pencil")) {
                x2 = event.getX();
                y2 = event.getY();
                canvas.drawLine(x1, y1, x2, y2, paint);
                x1 = event.getX();
                y1 = event.getY();
                // 将bm位图对象设置成ImageView要显示的图片
                ivDraw.setImageBitmap(bm);
            }
            break;

释放鼠标:画其他各种图形(拖动效果尚未实现)

case MotionEvent.ACTION_UP:
             if (type.equals("line")) {
                x2 = event.getX();
                y2 = event.getY();
                canvas.drawLine(x1, y1, x2, y2, paint);
                // 将bm位图对象设置成ImageView要显示的图片
                ivDraw.setImageBitmap(bm);
            } else if (type.equals("rect")) {
                x2 = event.getX();
                y2 = event.getY();
                paint.setStyle(Style.STROKE);// 空心矩形框
                canvas.drawRect(new RectF(x1, y1, x2, y2), paint);
                // 将bm位图对象设置成ImageView要显示的图片
                ivDraw.setImageBitmap(bm);
            } else if (type.equals("oval")) {
                x2 = event.getX();
                y2 = event.getY();
                paint.setStyle(Style.STROKE);// 空心椭圆
                canvas.drawOval(new RectF(x1, y1, x2, y2), paint);
                // 将bm位图对象设置成ImageView要显示的图片
                ivDraw.setImageBitmap(bm);
            }

清空功能:在onclicklistener的处理方法里实现

    @Override
    public void onClick(View view) {
        //清空
        canvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
        ivDraw.setImageBitmap(bm);

    }

这里写图片描述

猜你喜欢

转载自blog.csdn.net/Findingxu/article/details/52021906