如何在 Web 应用程序中显示和操作视觉对象？答案

【问题标题】：How to display and manipulate visual objects in a web app?如何在 Web 应用程序中显示和操作视觉对象？
【发布时间】：2012-05-13 21:29:17
【问题描述】：

仅使用 HTML、CSS、JavaScript 和具有服务器端脚本语言（例如 PHP 和 MySQL）的关系数据库，您如何检索和显示数据对象并直观地操作它们？

我所说的操作是指创建新对象、检索存储的对象、可视化它们的属性（例如，使圆直径变大或变小），以及基于拖放调用方法和设置字段值（改变大小、形状和位置）。

一个使用示例是带有磁性计数器的物理办公室白板的在线表示，用于问题监控和跟踪。一个表包含指定问题所有者的行，以及代表业务工作流程的列，例如一个 4 阶段的“分配”、“调查”、“实施”、“同意关闭”流程（或其他，只是一个示例）。

用户将单击一个按钮来创建一个新的问题对象，该对象具有自己的唯一 ID 号。它的形状取决于它的问题类型、它的颜色和它的状态（红色、琥珀色、绿色，例如没有计划，落后但恢复计划，计划中）。将其拖到相关的表格单元格将根据其行索引将其分配给所有者，并根据列索引设置生命周期状态。每次拖放或更改对象时，视觉上的更改都会反映在数据库中的对象属性中。

我在使用 HTML5 画布元素或带有一些巧妙 CSS 的 SVG 之间纠结。我可以弄清楚如何将数据库中已有的东西放到屏幕上，但不知道如何通过屏幕操作和存储更改。我还假设这可以在 HTML/CSS/JavaScript/PHP/MySQL 中完成，但是可以使用哪些其他技术？

【问题讨论】：

你试过什么？
我猜你有疯狂的老板/客户，或者你有不值得的工作和金钱的远大梦想......无论如何，它可以通过 Javascript 和 HTML5 canvas 来完成，但是所有的前端将在画布中完成，因此 JS 将非常消耗 CPU（我猜可能比 Flash 还多），所有拖放操作都会导致 JS 调用 PHP 方法来操作数据（在 AJAX 请求中）。但是我（和其他人）会给你代码，SE 不是关于这个的......
我最近answered a similar question，读了。重点在于呈现为 PDF，但这也可能对您有用，而且听起来您无论如何都会从矢量方法中受益。

标签： php javascript mysql html5-canvas data-visualization

【解决方案1】：

这听起来最适合作为客户端中心 ajax 的东西。这意味着：

用 Javascript 编写整个 UI。是使用 canvas、svg 还是纯 HTML5 + CSS3，取决于您的个人偏好、浏览器支持和功能要求。
服务器有两个工作：为 javascript 应用程序提供服务，以及响应 ajax 请求。

拖放可以完全在 Javascript 中完成；您可能想使用一个为您实现细节的 javascript 库（您可以使用一些 jQuery 扩展）；您只需订阅正确的事件，并触发 ajax 请求来更新和查询您的数据。例如，如果用户将一个项目拖到一个表格单元格中，您将获得该项目的 ID、表格单元格的 ID，并触发一个 ajax 请求，告诉服务器“项目 X 现在分配给单元格 Y”，服务器响应“OK”（在这种情况下，您可以在 UI 中永久更改更改）或错误消息（在这种情况下，您可能想要弹出通知或类似的东西）。

最好的通信协议是 JSON；它内置于 jQuery 以及大多数 javascript 实现中，它可以轻松通过防火墙和 Web 浏览器，并且大多数编程生态系统（包括 PHP）都内置了 JSON 编码和解码。此外，与基于 XML 的替代方案相比，JSON 的开销非常低。

无论哪种方式，这都不容易，没有灵丹妙药让它只需点击几下就可以工作，你必须问是否值得付出努力。另外，考虑到很明显，当脚本被阻止或在没有足够支持它们的平台上时，大量 javascript 的界面将无法正常工作（或根本无法工作）——想想 CPU 较弱的移动设备和不合标准的网络浏览器等。

【讨论】：

感谢您的建议。这是一个附带项目，旨在将我的编码技能提升一个档次，我只是想检查一下我是否正在考虑使用正确的技术。想我现在会放弃拖放的想法，以实现更简单的基于表单的交互，也许将来会增强它以拖放（可能在离婚之后）。该示例的想法来自于“T 卡”及其板变得越来越普遍的工作，感觉就像 1960 年代的某些日子。