java - 如何在执行事件时创建动态 android Path 对象？

Question

我正在尝试使用由带有 Socket.io 的 Node.js 服务器提供支持的 Android 构建一个实时协作绘图板应用程序.我用过 Socket.io Java client对于android端。我能够绘制一条路径，并将坐标发送到服务器，并几乎实时地从服务器获取广播。整个概念几乎完成了，但我遇到了一个大问题。

我是 Android 的新手，这实际上是我的第一个 Android 应用程序，我创建它完全是为了学习目的。所以，问题是，在与服务器的每个新连接上，我都需要一个新的 Path 对象。我的单路径对象现在发生了什么，当响应来自服务器并且我尝试绘制路径时，它使用相同的路径对象，因此，加入我绘制的线，线坐标我从服务器收到的。此问题导致需要为与服务器的每个新连接创建一个新的 Path 对象。请注意，我所说的新连接是指通过打开应用程序连接到服务器的新设备。那个新人和你至少可以参与协作绘图体验，这就是我想要构建的。我认为可行的是，在每个新连接上，我将创建一个新的 Path 对象并将其放入 ArrayList 中，然后根据需要引用相应的 Path 对象。但是，然后我发现了一个新问题，即在 onDraw() 重写方法中实际创建 View 时路径被初始化。

所以，我的最后一个问题是:

在 Android 中，如何在执行事件时创建动态路径对象？

这里是自定义View

package com.example.thisisppn.drawtogether;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import com.github.nkzawa.emitter.Emitter;
import com.github.nkzawa.socketio.client.Socket;
import com.github.nkzawa.socketio.client.IO;

import org.json.JSONException;
import org.json.JSONObject;
import java.net.URISyntaxException;

public class MainDrawingView extends View {
    private Paint paint = new Paint();
    private Path path = new Path();
    private Socket mSocket;

    public MainDrawingView(Context context, AttributeSet attrs) {

        super(context, attrs);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(5f);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);

        try {
            mSocket = IO.socket("http://192.168.0.4:3000");
        } catch (URISyntaxException e) {
            e.printStackTrace();
        }
        mSocket.on("touch", onTouchEvent);
        mSocket.on("move", onMoveEvent);
        mSocket.on("connected", onConnectEvent);
        mSocket.connect();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path, paint);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // Get the coordinates of the touch event.
        float eventX = event.getX();
        float eventY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // Set a new starting point
                path.moveTo(eventX, eventY);
//                mSocket.emit("touch", "{"+eventX+", "+eventY+"}");
                mSocket.emit("touch", eventX,eventY);
                return true;
            case MotionEvent.ACTION_MOVE:
                // Connect the points
                path.lineTo(eventX, eventY);
                mSocket.emit("move", eventX,eventY);
                break;
            default:
                return false;
        }

        // Makes our view repaint and call onDraw
        invalidate();
        return true;
    }


    public Emitter.Listener onConnectEvent = new Emitter.Listener() {
        @Override
        public void call(Object... args) {
            ((Activity)getContext()).runOnUiThread(new Runnable() {
                @Override
                public void run() {

                }
            });
        }
    };

    public Emitter.Listener onTouchEvent = new Emitter.Listener() {
        @Override
        public void call(final Object... args) {
            ((Activity)getContext()).runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    //Code for the UiThread
                    JSONObject data = (JSONObject) args[0];
                    String x = null;
                    String y = null;
                    try {
                        x = data.getString("touchX");
                        y = data.getString("touchY");
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                    Log.v("Touch", x+", "+y);
                    float touchX = Float.parseFloat(x);
                    float touchY = Float.parseFloat(y);

                    path.moveTo(touchX + 200, touchY + 200);
                    invalidate();
                }
            });
        }
    };

    public Emitter.Listener onMoveEvent = new Emitter.Listener() {
        @Override
        public void call(final Object... args) {
            ((Activity)getContext()).runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    JSONObject data = (JSONObject) args[0];
                    String x = null;
                    String y = null;
                    try {
                        x = data.getString("touchX");
                        y = data.getString("touchY");
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                    Log.v("Move", x+", "+y);
                    float touchX = Float.parseFloat(x);
                    float touchY = Float.parseFloat(y);
                    path.lineTo(touchX+200, touchY+200);
                    invalidate();
                }
            });
        }
    };


}

MainActivity.java 只有 onCreate 方法，没有别的。

以下是我用来接收和广播触摸事件的非常基本的 Node.js 服务器。它基本上采用触摸坐标并将其广播给所有连接的客户端。

// Setup basic express server
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;

server.listen(port, function () {
    console.log('Server listening at port %d', port);
});

var numUsers = 0;

io.on('connection', function (socket) {
    console.log("Someone connected");

    socket.emit("connected");

    socket.on("touch", function (x, y){
        console.log("Touch event happened somewhere");
        console.log(x+", "+y);
        socket.broadcast.emit("touch", {
            touchX: x,
            touchY: y
        });
    });


    socket.on("move", function (x, y){
        console.log("Move event happened somewhere");
        console.log(x+", "+y);
        socket.emit("move", {
            touchX: x,
            touchY: y 
        });
    });
});

如果我遗漏了任何必需的信息，请告诉我。如果有人能帮我解决这个问题，我将不胜感激。我在谷歌搜索中找不到任何解决方案。预先感谢您抽出宝贵时间。

Answer 1

您应该尝试唯一标识连接到服务器的任何新设备。这可以通过分配某种类型的 DeviceID 来完成。对于连接的每个设备，服务器端。看here以供引用。在 Android 中，为每个连接的新设备创建一个新的 Path目的。并创建一个数据结构来映射 DeviceID至 Path像对象

HashMap<String, Path> map = new HashMap<String, Path>();

每当连接新设备时，添加相应的 DeviceID和 new Path()至 map

public Emitter.Listener onConnectEvent = new Emitter.Listener() {
    @Override
    public void call(Object... args) {
         JSONObject data = (JSONObject) args[0];
         String deviceId = data.getString("DeviceID");
         map.put(deviceId, new Path());
    }
};

通过引用 DeviceID 更新相应的 Path 对象在onTouchEvent和 onMoveEvent

public Emitter.Listener onTouchEvent = new Emitter.Listener() {
    @Override
    public void call(final Object... args) {
        ((Activity)getContext()).runOnUiThread(new Runnable() {
            @Override
            public void run() {
                //Code for the UiThread
                JSONObject data = (JSONObject) args[0];
                String x = null;
                String y = null;
                String deviceId = data.getString("DeviceID");
                try {
                    x = data.getString("touchX");
                    y = data.getString("touchY");
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                Log.v("Touch", x+", "+y);
                float touchX = Float.parseFloat(x);
                float touchY = Float.parseFloat(y);

                map.get(deviceId).moveTo(touchX + 200, touchY + 200);
                invalidate();
            }
        });
    }
};

对 onMoveEvent 应用类似的逻辑.里面onDraw()方法

@Override
protected void onDraw(Canvas canvas) {
    for (String key : map.keySet()) {
        Path path = map.get(key);
        canvas.drawPath(path, paint);
    }
}