javascript - 我如何将鼠标坐标存储在在线服务器上？

Question

我是服务器端编程的新手，我有一些问题。首先，我的项目是用 javascript 和 node.js 构建的。它的工作原理是将鼠标坐标发送到服务器，然后将它们重新绘制到其他人的客户端上。这意味着新客户无法查看之前绘制的内容。新观众怎么能看到以前画的东西？我想我会将鼠标坐标及其颜色存储在数据库中，然后加载它。我不确定从哪里开始。任何帮助，将不胜感激。谢谢大家 :)

编辑:所以我做了更多的研究，其他人说更好的选择可能是拍摄当前 Canvas 的图像，并将其上传到服务器，然后将其显示给新用户。我已经弄清楚如何保存 Canvas ，只是不知道如何在任何类型的服务器上获取它。抱歉这么无助哈哈。谢谢你们 :)

SKETCH.JS

var socket;
var color;

function setup() {
  createCanvas(1000, 800);
  background(51);
  frameRate(100);

  socket = io.connect();
  socket.on('mouse', newDrawing);

  color = {
    r: random(255),
    g: random(255),
    b: random(255),
  }
}

function newDrawing(data) {
  noStroke();
  fill(data.color.r, data.color.g, data.color.b);
  ellipse(data.x, data.y, 36, 36)
}

function mouseDragged() {
  console.log('Sending: ' + mouseX + ',' + mouseY)

  var data = {
    x: mouseX,
    y: mouseY,
    color: color
  }

  socket.emit('mouse', data);

  noStroke();
  fill(data.color.r, data.color.g, data.color.b);
  ellipse(mouseX, mouseY, 36, 36)
  ellipse(15,25,20,20);
  fill(255);
  textSize(10);
  text('your color:',10,10);


}

function draw() {}

function keyTyped() {
  if (key === 'p') {
    color = {
      r: random(255),
      g: random(255),
      b: random(255)
    }
  }
}

SERVER.JS

var express = require('express');

var app = express();
var server = app.listen(process.env.PORT || 3000);

app.use(express.static('public'));

console.log("My socket server is running");

var socket = require('socket.io');

var io = socket(server);

io.sockets.on('connection', newConnection);

function newConnection(socket) {
  console.log('new connection: ' + socket.id);

  socket.on('mouse', mouseMsg);

  function mouseMsg(data) {
    socket.broadcast.emit('mouse', data);
    console.log(data);
  }
}

对不起，我很无助。你们的帮助很棒:)

Answer 1

你可以使用 redis，它是一种内存数据结构，速度非常快，可以很好地存储你想存储的任何内容。

这是文档: https://redis.io/documentation

它支持列表、 HashMap 和其他数据结构。在您的情况下，您可以使用 HashMap 。

对于 Canvas ，您可以像这样在 Canvas 上绘制函数:

 canvas.addEventListener('mousemove',(e) =>{
  if(drag) {
    ctx.beginPath();
    let oldx = this.X;
    let oldy = this.Y;
    ctx.moveTo(oldx, oldy);
    ctx.lineCap = 'round';
    ctx.lineWidth = penWidth;
    ctx.lineTo(e.offsetX , e.offsetY );
    ctx.strokeStyle = penColor;
    ctx.stroke();
    this.X = e.offsetX;
    this.Y = e.offsetY;
 }
})

您应该存储坐标并在 socket.io 的帮助下将事件发送到服务器上的其他客户端。对于撤消和重做部分，您已经存储了完整的笔划，或者您可以为 Canvas 上的每一行说一个坐标数组以及何时你想渲染那个笔画你可以做一个这样的函数:

 function rerender(strokes){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(let i=0 ; i<strokes.length ; i++){
    console.log(strokes.length);
    for(let j=0 ; j<strokes[i].length ; j++){
        ctx.beginPath();
        ctx.moveTo(strokes[i][j].oldx,strokes[i][j].oldy);
        ctx.lineCap = 'round';
        ctx.lineWidth = strokes[i][j].width+1;
        ctx.lineTo(strokes[i][j].x,strokes[i][j].y);
        ctx.strokeStyle = strokes[i][j].color;
        ctx.stroke();
        strokes[i][j].oldx = strokes[i][j].x;
        strokes[i][j].oldy = strokes[i][j].y;
    }
}

}