Android画板

最近Android刚刚上手，还没有很熟练，只写了一个小小的画板。Android画板其实实现方法跟以前的Java中的画板也差不太多，只是具体细节有所差异，思想还是一样的。

先来了解一下要用到的几个重要的类，跟Java画板一个graphics类不太一样。

1、Bitmap，字面意思是位图，相当于一个图片用来存放要画的东西，也就是图片的存储空间。

2、Canvas，意思是画布，一直不太理解这个的作用所以特地百度了一下。意思是可以把它看做一种处理过程，运用各种方法来管理Bitmap，跟Bitmap联系十分紧密，所以实例化canvas对象的时候一般要传bitmap参数进去。

3、Paint，画笔。这个应该是比较好理解的，就是笔刷啊，画笔之类的工具，可见也是不可或缺的。

首先这个画板是有用自定义组件来实现的，因为直接用Android里的组件的话触屏的坐标是不准的，原因不详。自定义组件首先定义一个DrawView类，让它继承View类，在类里面把View 的三个构造方法都要重写一遍，然后在里面定义上面三个类的对象，这里三个构造方法最好是在前两个里面调用第三个。然后在类里面重写onDraw和onTouchEvent两个方法，onDraw函数是用来绘制图形界面的，onTouchEvent函数是用来处理手机屏幕事件的。所以在onTouchEvent函数里面处理完手机屏幕事件要加上this.invalidate()，也就是调用onDraw方法。

package com.example.drawview;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;public class DrawView extends View {private Bitmap bitmap;private Canvas canvas;public Paint paint;public String shape ="直线";private float x1, x2, y1, y2;// 构造方法public DrawView(Context context) {this(context,null,0);}public DrawView(Context context, AttributeSet attrs) {this(context, attrs,0);paint = new Paint();}public DrawView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.GRAY);// 判读bitmap是否为nullif (bitmap == null) {// 创建bitmap对象bitmap = Bitmap.createBitmap(getWidth(), getHeight(),Config.ARGB_8888);//实例化canvas对象this.canvas = new Canvas(bitmap);}canvas.drawBitmap(bitmap, 0, 0, paint);}public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN://按下x1 = event.getX();y1 = event.getY();break;case MotionEvent.ACTION_UP://松开x2 = event.getX();y2 = event.getY();if(shape.equals("直线")){canvas.drawLine(x1, y1, x2, y2, paint);}else if (shape.equals("矩形")){canvas.drawRect(x1,y1,x2,y2, paint);}else if (shape.equals("圆")){canvas.drawCircle(x1, y1, Math.abs(x1-x2), paint);} break;case MotionEvent.ACTION_MOVE://移动x2 = event.getX();y2 = event.getY();if(shape.equals("曲线")){this.canvas.drawLine(x1, y1, x2, y2, paint);x1 = x2;y1 = y2;}break;}this.invalidate();//调用onDraw方法return true;}}

然后可以添加菜单来提供颜色、图形、画笔粗细等选项。

先找到res文件夹，然后找到values文件夹下的strings.xml文件，添加窗体中显示的文本值。

<?xml version="1.0" encoding="utf-8"?><resources>    <string name="app_name">DrawView</string>    <string name="action_settings">Settings</string>    <string name="hello_world">Hello world!</string>            <string name="color">颜色选择</string>    <string name="color_red">红色</string>    <string name="color_green">绿色</string>    <string name="color_blue">蓝色</string>        <string name="shape">图形选择</string>    <string name="shape_line">直线</string>     <string name="shape_curve">曲线</string>    <string name="shape_circle">园</string>    <string name="shape_rect">矩形</string>        <string name="stroke">线条粗细</string>    <string name="stroke_1">1个像素</string>    <string name="stroke_3">3个像素</string>    <string name="stroke_5">5个像素</string></resources>

然后在menu文件夹下的main.xml文件里就可以添加菜单了。

<menu xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:id="@+id/color" android:enabled="true"        android:title="@string/color">        <menu>            <group android:checkableBehavior="single" android:enabled="true">                <item android:id="@+id/color_red"                      android:title="@string/color_red"/>                <item android:id="@+id/color_green"                      android:title="@string/color_green"/>                <item android:id="@+id/color_blue"                      android:title="@string/color_blue"/>            </group>        </menu>    </item>        <item android:id="@+id/shape" android:title="@string/shape">        <menu>            <group android:checkableBehavior="single" android:enabled="true">                <item android:id="@+id/shape_line"                      android:title="@string/shape_line"/>                <item android:id="@+id/shape_circle"                      android:title="@string/shape_circle"/>                <item android:id="@+id/shape_rect" android:checkable="true"                                          android:title="@string/shape_rect"/>                <item android:id="@+id/shape_curve"                      android:title="@string/shape_curve"/>            </group>        </menu>    </item>      <item android:id="@+id/stroke" android:title="@string/stroke">        <menu>            <group android:checkableBehavior="single" android:enabled="true">                <item android:id="@+id/stroke_1"                      android:title="@string/stroke_1"/>                <item android:id="@+id/stroke_3"                      android:title="@string/stroke_3"/>                <item android:id="@+id/stroke_5"                      android:title="@string/stroke_5"/>            </group>        </menu>    </item>    </menu>

最后在MainActivity里调用onMenuItemSelected函数来实现对菜单选择的操作。

package com.example.drawview;import android.os.Bundle;import android.app.Activity;import android.graphics.Color;import android.view.Menu;import android.view.MenuItem;public class MainActivity extends Activity {private DrawView dv;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);dv = (DrawView) this.findViewById(R.id.drawView1);}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;}public boolean onMenuItemSelected(int featureId, MenuItem item) {//System.out.println("item.getItemId()"+item.getItemId());switch(item.getItemId()){case R.id.color_blue:dv.paint.setColor(Color.BLUE);break;case R.id.color_green:dv.paint.setColor(Color.GREEN);break;case R.id.color_red:dv.paint.setColor(Color.RED);break;case R.id.shape_circle:dv.shape = "圆";break;case R.id.shape_line:dv.shape = "直线";break;case R.id.shape_curve:dv.shape = "曲线";break;case R.id.shape_rect:dv.shape = "矩形";break;case R.id.stroke_1:dv.paint.setStrokeWidth(1);break;case R.id.stroke_3:dv.paint.setStrokeWidth(3);break;case R.id.stroke_5:dv.paint.setStrokeWidth(5);break;}return super.onMenuItemSelected(featureId, item);}}

更多相关文章

随机推荐