collaborative drawing/live drawing

Question

Ich war mir nicht sicher, wo auf der Welt ich das hier posten könnte ... Also habe ich eine Idee, ein kleines Zeichenspielzeug zu machen, aber ich bin mir nicht sicher, wie ich das umsetzen würde ein Datenstrukturlevel) ...

Ich möchte vielleicht ein 1920 x 1080 Fenster haben, wo ich einen Pinsel haben und Linien zeichnen kann (genau wie Farbe), aber hier ist der Kicker. Ich möchte diese Zeichnung in Echtzeit speichern können. Die Idee ist, dass ich einen Webbrowser öffnen kann und sehe, wie ich aus einem anderen Fenster zeichne ... im Wesentlichen kollaborative Farbe.

Wurde dies getan und gibt es irgendwelche Projekte, auf die mir jemand hinweisen kann, wie ich mit der Entwicklung beginnen könnte?

Es gab eine ähnliche Post, aber es war drei Jahre alt, und ich hätte gerne einige neue Eingabe.

Die größte Frage ist vor allem der beste Datenstruktur Ich konnte dies für die Echtzeit-Bearbeitung in einer Datenbank verwenden zu speichern (oder, wenn dies auch eine gute Lösung)

Dank !! :)

Answer 1

Dies wäre relativ einfach zu tun.

von einem webbasierten Aspekt ...

Sie so etwas wie ein HTML5 Canvas nutzen könnten.

Dann können Sie JavaScript verwenden und so etwas tun:

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

Mausbewegungen zu erfassen, wenn Sie die Maus bewegen.

Sie können auch den Code verwenden, um einen Kreis oder ein Quadrat zu setzen (Quadrat in diesem Fall, aber Sie können einen Kreis leicht verwenden) wie folgt:

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

Jetzt können Sie PHP oder eine andere Sprache verwenden können einfügen das passt in eine Datenbank zusammen.

Der Versuch, mit mehreren Benutzern live zu bearbeiten, ist im besten Fall kompliziert. Ich würde vorschlagen, stattdessen eine Live-Ansicht beizubehalten.

Während dies ressourcenintensiv ist, wird es funktionieren.

Hoffe das hilft, wenn Sie es zu bauen!