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 ，您可以使用 make 函数在 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;
    }
}

}