javascript - 协作绘图/现场绘图

Question

我不确定我可以在世界上什么地方发布这个...所以我有一个制作一个小绘图玩具的想法，但我不确定我将如何实现它(在数据结构级别上) ...

我可能想要一个 1920 x 1080 的窗口，我可以在其中使用画笔和画线(就像画画一样)，但这里是关键。我希望能够实时保存这张图。我的想法是，我可以打开一个网络浏览器，然后看着自己从另一个窗口画画……本质上是协作绘画。

这已经完成了吗？有没有任何人可以指出我如何开始开发它的项目？

有一个与此类似的帖子，但它已经三年了，我想要一些最近的输入。

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

谢谢!! :)

Answer 1

这样做相对简单。

从基于网络的方面...

您可以使用类似 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 或其他语言将坐标插入数据库。

尝试与多个用户一起进行实时编辑充其量也很复杂。我建议坚持使用实时取景。

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

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