协同绘图/实时绘图

Question

我不知道我能把这张照片贴到哪里。所以我有一个制作一个小绘图玩具的想法，但我不确定我将如何实现它(在数据结构层面上)……

我可能想要一个1920x1080的窗口，在那里我可以有一个画笔和画线条(就像画画一样)，但这里有一个亮点。我希望能够实时保存此绘图。我的想法是，我可以打开web浏览器，从另一个窗口观看我自己的绘画……本质上是协作绘画。

这个已经完成了吗?有没有任何人可以告诉我如何开始开发这个项目？

有一个类似的帖子，但它是三年前的，我想要一些最近的意见。

最大的问题是我可以用来将其存储在数据库中以进行实时编辑的最佳数据结构(或者这是否是一个很好的解决方案)。

谢谢！！:)

Answer 1

这将是相对简单的做法。

从基于web的角度来看...

你可以使用像HTML5画布这样的东西。

然后，您可以使用JavaScript并执行以下操作：

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

无论何时移动鼠标，都可以捕获鼠标移动。

您还可以使用代码来放置圆形或正方形(本例中为正方形，但您可以很容易地使用圆形)，如下所示：

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

现在，您可以使用PHP或其他语言将协助表插入数据库中。

尝试在多个用户之间进行实时编辑充其量也是很复杂的。我建议坚持使用实时视图。

虽然这是资源密集型的，但它是可行的。

如果你决定构建它，希望这对你有所帮助！