如何在安卓应用中用手指绘制并保存到网络上。

Question

**这个问题已经得到了成功回答并成为博客文章 <- 点击 **

大家好，我是一名PHP开发者。我想做一件简单的事情——在安卓手机上用手指（带有较大的“仿真笔尖”）在空白页面上画一些东西，并通过HTTP POST将位图存储为JPEG格式的文件到服务器上。

目前，我已经有了一些代码，但它是从一个教程中复制来的，该教程与编写游戏精灵有关，我无法进行适应。

package com.my.example;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.View.OnTouchListener;

public class DrawCapture extends Activity implements OnTouchListener{

    OurView v;
    Bitmap ball;
    float x,y;

    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.draw_capture);
        v = new OurView(this);
        v.setOnTouchListener(this);
        ball = BitmapFactory.decodeResource(getResources(), R.drawable.blueball);
        x = y = 0;
        setContentView(v);
    }

    @Override
    protected void onPause(){
        super.onPause();
        v.pause();
    }

    protected void onResume(){
        super.onResume();
        v.resume();
    }

    public class OurView extends SurfaceView implements Runnable{
        Thread t = null;
        SurfaceHolder holder;
        boolean isItOK = false;

        public OurView(Context context) {
            super(context);
            holder = getHolder();
        }

        public void run() {
            while (isItOK == true){

                try {
                    Thread.sleep(50);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

                //perform canvas drawing
                if (!holder.getSurface().isValid()){
                    continue;
                }
                Canvas c = holder.lockCanvas();
                onDraw(c);
                holder.unlockCanvasAndPost(c);
            }       
        }

        public void onDraw(Canvas c){
            c.drawARGB(255, 210, 210, 210);
            c.drawBitmap(ball, x - (ball.getWidth()/2), y - (ball.getHeight()/2), null);
        }

        public void pause(){
            isItOK = false;
            while(true){
                try{
                    t.join();
                } catch(InterruptedException e){
                    e.printStackTrace();
                }
                break;
            }
            t = null;
        }

        public void resume(){
            isItOK = true;
            t = new Thread(this);
            t.start();
        }
    }

    public boolean onTouch(View v, MotionEvent me){

        switch (me.getAction()){
            case MotionEvent.ACTION_DOWN : 
                x = me.getX();
                y = me.getY();              
                break;
            case MotionEvent.ACTION_UP : 
                x = me.getX();
                y = me.getY();              
                break;
            case MotionEvent.ACTION_MOVE : 
                x = me.getX();
                y = me.getY();              
                break;
        }
        return true;
    }
}

以下是XML代码：

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


</SurfaceView>

请问有人能帮我吗？我觉得我离成功很近了——我使用blueball作为钢笔尖，我只想“保存”它，可能我需要在XML页面上添加一个按钮（或菜单）来实现这个功能？我知道这有点困难，但有很多在线上的人们都在询问如何用手指绘制并将其保存到“云”中，如果人们能用示例代码（而不是参考文献）回复，我保证将把它编译成一个适用于所有人的教程。包括我已经非常满意的PHP服务器端代码。

- conners

Answer 1

你可以尝试使用Google提出的手势对象，尝试执行以下代码：

Activity1 xml:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF" >

        <android.gesture.GestureOverlayView
            android:id="@+id/gestures"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:fadeEnabled="false"
            android:fadeOffset="5000000000"
            android:gestureColor="#000000"
            android:gestureStrokeType="multiple"
            android:gestureStrokeWidth="1"
            android:uncertainGestureColor="#000000"
            android:layout_above="@+id/save_button" />

        <Button
            android:id="@id/save_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20sp"
            android:paddingLeft="20sp"
            android:paddingRight="20sp"
            android:text="Save"
            android:textSize="22sp" />

    </RelativeLayout>

package com.testandroidproject;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;

public class Activity2 extends Activity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity2);

        byte[] byteArray = getIntent().getByteArrayExtra("draw");
        Bitmap bmp = BitmapFactory.decodeByteArray(byteArray, 0, byteArray.length);

        imageView = (ImageView) findViewById(R.id.imageView1);
        imageView.setImageBitmap(bmp);
    }

}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/image_saved"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

Activity2 java :

->

Activity2的Java代码：

package com.testandroidproject;

import java.io.ByteArrayInputStream;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;


public class Activity2 extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.display_image);

        ImageView image = (ImageView) findViewById(R.id.image_saved);

        ByteArrayInputStream imageStreamClient = new ByteArrayInputStream(
                getIntent().getExtras().getByteArray("draw"));
        image.setImageBitmap(BitmapFactory.decodeStream(imageStreamClient));
    }

}

希望你会觉得这个有用。

- grattmandu03

---

谢谢，我明天会研究一下并回复你。看起来你建议我重写，但没关系。我会尽快更新。（约24小时内） - conners

我没有时间尝试你的代码来检查出错在哪里，但我知道我已经使用我的解决方案在一个安卓应用程序中保存客户签名，并且它非常有效 :). 所以如果有用的话，我会分享给你。 - grattmandu03

停止新闻* 我已经按照我的需求使它工作了（虽然进行了大量更改，但基本上仍然使用了您的代码），我能够完全删除“Activity2”，并使用单击侦听器通过内部存储发布手势图像。一旦整理好，我将发布“如何操作”。 - conners

嗨，我已经将我从这里得出的答案上传到了这个博客：http://wiki.nofolder.com/how-to-draw-something-with-your-finger-in-an-android-app-and-save-it-to-the-web。 - conners

Answer 2

我不确定你想要实现“保存”的哪个部分，但我假设你想知道如何将画布上的内容存储到位图中。首先，创建一个位图来绘制，比如canvasBitmap。然后：

c.setBitmap(canvasBitmap);

这将把所有绘制在“canvasBitmap”中的内容存储起来。当用户按下保存按钮时：

savedBitmap = Bitmap.copy(canvasBitmap.getConfig(), true);

现在，将savedBitmap发送到云端。希望这能帮到你。

- TerryTate

---

是的，这看起来很棒，我会在明天仔细查看并做出适当的回应。我需要道歉，还有一个关于onTouch MotionEvent的问题 - 它不能“绘制”，只能拖动画布上的“光标blueball” - 我还需要它“留下痕迹”。 - conners

@conners，你只能在屏幕上拖动光标的原因是每帧都会重新绘制画布的背景。你需要做的是只调用一次c.drawARGB(255, 210, 210, 210);，而不是每帧都调用。如果你删除那行代码，你应该能看到你想要的绘图结果。 - TerryTate