协同绘图/现场绘图

时间:2016-03-18 23:32:07

标签: javascript

我不确定世界上哪里可以发布这个...所以我有一个想法制作一个小玩具,但我不确定如何实现这个(在数据结构上)电平)...

我想要一个1920 x 1080的窗口,我可以在那里画一个画笔和画线(就像画画一样),但这里是踢球者。我希望能够实时保存这张图。我的想法是,我可以打开一个网络浏览器,看自己从另一个窗口画画...基本上是协作画。

这是否已经完成,是否有任何项目可以指出我如何开始开发这个项目?

有一个类似的帖子,但它已经三年了,我想最近的一些意见。

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

谢谢! :)

1 个答案:

答案 0 :(得分:5)

这样做比较直接。

从基于网络的方面......

您可以使用类似HTML5 Canvas的内容。

然后您可以使用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或其他语言将cordinates插入数据库。

尝试与多个用户进行实时编辑最多也很复杂。我建议坚持使用实时视图。

虽然这是资源密集型的,但它会起作用。

希望如果你自己建造它会有帮助!