从HTML5画布中获取值到Javascript

Question

从HTML5画布中获取值到Javascript

3

我正在谷歌应用引擎上开发一个小项目。使用HTML5画布，我需要向用户展示一个画布，以便用户可以绘制节点和连接边缘。我需要使用Dijkstra算法找到最短路径。

我的问题是，我想在单击提交按钮时从画布中获取值。这些值是节点和相应边缘的坐标。它将是一个可以存储列表的JSON数据结构。主要问题是如何将画布中的值传递给JavaScript并将其存储在JSON中。 我的正文部分包含：

<body>
<div>
<canvas id="canvas" height="500" width="1000" style="border:1px solid #c3c3c3;"></canvas>
</div>

<div>
<input type="button" value="Submit" onclick="submit()">
</div>

</body>

在提交函数中应该写什么？

- Ajay Soman

1

你无法从画布中获取那些信息。画布只是一个位图，它不知道你在上面绘制了什么，更别提“节点”和“边缘”了。因为是你在上面绘制，所以你需要自己存储数据。 - RoToRa

尝试使用像fabric.js这样的画布抽象库，它将为您提供对象模型和序列化支持。 - kangax

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Sarris · Accepted Answer

如果使用SVG，这将变得非常容易。但不幸的是，画布是一个即时绘图表面，这意味着当你绘制一些东西时，画布不会记住任何已经绘制过的信息。

在绘制阶段中，您必须自己跟踪所有必要的信息（节点和边缘），否则该信息就不存在了。