Android學習筆記（28）--- 塗鴉使用例子

直接上代碼：

java文件

public class tuya extends Activity {
	/** Called when the activity is first created. */
	private SurfaceView surfaceView = null;
	private SurfaceHolder sfh = null;
	private ImageButton clean = null;
	private Paint mpaint = null;
	private float oldx = 0f;
	private float oldy = 0f;
	private Button penBlue = null;
	private Button penGreen = null;
	private Button penYellow = null;
	private Button penRed = null;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tuya);

		clean = (ImageButton) findViewById(R.id.qingping);
		penBlue = (Button) findViewById(R.id.penBlue);
		penGreen = (Button) findViewById(R.id.penGreen);
		penYellow = (Button) findViewById(R.id.penYellow);
		penRed = (Button) findViewById(R.id.penRed);

		surfaceView = (SurfaceView) findViewById(R.id.surfaceView);
		sfh = surfaceView.getHolder();//得到holder

		mpaint = new Paint();
		mpaint.setColor(Color.WHITE);//畫筆的
		mpaint.setStrokeWidth(8.0f);
		//下面兩句很重要，這樣纔不會出現鋸齒或者筆畫不流暢
		mpaint.setAntiAlias(true);//或： mpaint.setFlags(Paint.ANTI_ALIAS_FLAG);		
		mpaint.setStrokeCap(Paint.Cap.ROUND);// 形狀

		//藍筆
		penBlue.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mpaint.setColor(Color.BLUE);
			}
		});
		//綠筆
		penGreen.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mpaint.setColor(Color.GREEN);
			}
		});
		//黃筆
		penYellow.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mpaint.setColor(Color.YELLOW);
			}
		});
		//紅筆
		penRed.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mpaint.setColor(Color.RED);
			}
		});
		clean.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Canvas mcanvas = sfh.lockCanvas();
				mcanvas.drawColor(Color.BLACK);
				sfh.unlockCanvasAndPost(mcanvas);

				sfh.lockCanvas(new Rect(0, 0, 0, 0));
				sfh.unlockCanvasAndPost(mcanvas);
			}
		});

	}
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub

		float x = event.getX() - 20;
		float y = event.getY() - 50;

		switch (event.getAction()) {
		case MotionEvent.ACTION_MOVE:

			Canvas mcanvas = sfh.lockCanvas();
			mcanvas.drawLine(x, y, oldx, oldy, mpaint);
			sfh.unlockCanvasAndPost(mcanvas);
			sfh.lockCanvas(new Rect(0, 0, 0, 0));
			sfh.unlockCanvasAndPost(mcanvas);
			break;
		}

		oldx = x;
		oldy = y;

		return true;
	}
}

注意上面的Paint，有兩句很重要：

//下面兩句很重要，這樣纔不會出現鋸齒或者筆畫不流暢
		mpaint.setAntiAlias(true);//或： mpaint.setFlags(Paint.ANTI_ALIAS_FLAG);		
		mpaint.setStrokeCap(Paint.Cap.ROUND);// 形狀

xml文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/main_toolbar_bg"
            android:gravity="left|center_vertical"
            android:paddingLeft="10dp"
            android:text="Dict-Ideal's"
            android:textColor="#ff25150e"
            android:textSize="40dp"
            android:textStyle="bold" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/tuya_background" >

            <SurfaceView
                android:id="@+id/surfaceView"
                android:layout_width="780px"
                android:layout_height="fill_parent"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="12dp"
                android:layout_marginTop="12dp" />

            <ImageButton
                android:id="@+id/qingping"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="150dp"
                android:background="@drawable/clear_tuya"
                android:src="@drawable/clear_tuya_focus" />

        </RelativeLayout>
    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <Button
            android:id="@+id/penBlue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignTop="@+id/tip"
            android:layout_marginLeft="730dp"
            android:layout_marginTop="9dp"
            android:layout_toRightOf="@+id/tip"
            android:background="@drawable/select_pen_blue" />

        <Button
            android:id="@+id/penGreen"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="9dp"
            android:layout_toRightOf="@+id/penBlue"
            android:background="@drawable/select_pen_green" />
        <Button
            android:id="@+id/penYellow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="9dp"
            android:layout_toRightOf="@+id/penGreen"
            android:background="@drawable/select_pen_yellow" />
        <Button
            android:id="@+id/penRed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="9dp"
            android:layout_toRightOf="@+id/penYellow"
            android:background="@drawable/select_pen_red" />
    </RelativeLayout>

</FrameLayout>

佈局效果：