disegno collaborativo/disegno dal vivo

Question

Non sapevo in quale parte del mondo avrei potuto postare questo ... Quindi ho un'idea per fare un piccolo disegno giocattolo, ma non sono sicuro su come implementarlo (su un livello di struttura dei dati) ...

Mi piacerebbe avere una finestra 1920 x 1080 in cui posso avere un pennello e tracciare linee (proprio come la vernice), ma qui è il kicker. Voglio essere in grado di salvare questo disegno in tempo reale. L'idea è che posso aprire un browser web e guardarmi disegnare da un'altra finestra ... essenzialmente vernice collaborativa.

È stato fatto e ci sono progetti in cui qualcuno può indicarmi come iniziare a sviluppare questo?

C'era un post simile a questo, ma aveva tre anni e vorrei alcuni input recenti.

La più grande domanda è particolarmente la migliore struttura dati che ho potuto usare per conservare questo in un database per l'editing in tempo reale (o se questo è anche una buona soluzione)

grazie !! :)

Answer 1

Questo sarebbe relativamente semplice da fare.

Dal punto di vista basato sul web ...

Si potrebbe usare qualcosa di simile a un HTML5 Canvas.

Quindi è possibile utilizzare JavaScript e fare qualcosa di simile:

document.onmousemove = function(event){ 
xcoor = event.pageX; 
ycoor = event.pageY; 
} 

per catturare i movimenti del mouse ogni volta che si sposta il mouse.

È inoltre possibile utilizzare il codice per mettere un cerchio o un quadrato (quadrato, in questo caso, ma è possibile utilizzare un cerchio facilmente) come segue:

document.onmousemove = function(event){ 
xcoor = event.pageX; 
ycoor = event.pageY; 
mapcan.fillStyle = "#000000"; 
mapcan.fillRect(-1*(11617845.3461), -1*(8093417.14653), 10, 10); 
} 

Ora è possibile utilizzare PHP o qualche altra lingua da inserire le coordinate in un database.

Cercare di eseguire l'editing dal vivo con più utenti è complicato al meglio. Suggerirei invece di applicare una visualizzazione live.

Mentre questo è ad uso intensivo di risorse, funzionerà.

Spero che questo aiuti se si decide di costruirlo!