混合 HTML5 Canvas 和 Python

Posted 2023-02-24

【中文标题】混合 HTML5 Canvas 和 Python

【英文标题】：Mixing HTML5 Canvas and Python

【发布时间】：2012-03-18 03:36:29

【问题描述】：

我已经分别使用了这两个（Python 和 html5），但是我热衷于使用 Python 在 Web 上的全部功能，使用 HTML5 来绘制事物并处理事物的客户端。我想我正在寻找实施方面的途径。如果可能，以下是我想做的一些事情：

具有交互性很强的数据，这些数据需要由 Python 在服务器端处理，但由 HTML5 Canvas 显示和本地操作。 HTML5 Canvas 上的可点击组件将与服务器端进行通信。

是否有人们可以推荐的实现？ IE。谷歌应用引擎会有什么好处。姜戈？睡衣？

谢谢 - 如果这看起来有点模糊，我们深表歉意。我在尝试一种方法之前先询问一下，看看是否有一个可以节省时间和精力的提示。

【问题讨论】：

想一想，有没有办法用python在HTML5画布上拾取事件？

想一想，有没有办法用python在HTML5画布上拾取事件？因此，例如，如果在画布绘制元素中扩展数据时间线，python 将对数据进行一些处理并将处理后的数据发送回画布元素以显示。

有人有使用睡衣的经验吗？看起来它可以处理 JS/Python 路径，但我不知道 HTML5？

【参考方案1】：

在这种情况下，服务器端比客户端更发达。 （丰富的 JS 库是一种较新的现象，仅此而已。） Django 是服务器上可接受的选择，尽管我至少会考虑 Twisted。

我对客户端的建议：

首选是paper.js，这是一个用于操作画布的库。性能卓越，允许事件绑定，丰富的图形操作，教程很棒。与类似软件相比，学习曲线似乎也很平缓。

第二个选择是 raphael 或类似的 SVG 库。性能不如 paper.js，尽管它很大程度上取决于屏幕上的内容。

您能否详细说明您将在客户端上做什么样的事情？可见对象的数量、哪些事件将绑定到哪些对象、您需要的图形过滤器类型等等，这些都在很大程度上影响了这一选择。

您可能会发现自己在努力争取在客户端上获得良好的图形性能，因此预计会在这方面花费大量时间。

编辑：根据您的 cmets，我认为您会发现任一解决方案都可行，所以我倾向于 paper.js 只是因为它更有趣，而且如果您确实去某个意想不到的地方，它也可以与你。

由于您的应用程序听起来与很多图表有关，我建议您查看HighCharts 或其他图表库，其中有几个，包括商业的和非的。 HighCharts 本身对于营利性应用程序中的所有生产用途除了都是免费的，否则价格合理。

【讨论】：

大量的用户体验将是从绘图和曲线中选择数据，因此它可能确实非常密集。良好的绑定至关重要，我们必须按照您的建议努力工作，以使图形在所有平台上都尽可能流畅地运行。

也许更好地说明我们想要做的事情与谷歌对其财务数据（即finance.google.com）所做的非常相似，但对于一个非常不同的区域，但我们需要显示时间范围相关数据。

【参考方案2】：

我完全按照您提到的在服务器端使用 Django 并在客户端使用 HTML5 canvas/javascript。我对结果非常满意，但想指出的是，您在客户端使用 Canvas 所做的事情与您在服务器端使用 Python 所做的事情没有任何关系。

【参考方案3】：

对于像这样的富客户端小部件，一种可行的方法是使用如下堆栈：

[您的 javascript 用户界面] [图形的 js 库] backbone.js 用于管理您的对象客户端 django-tastypie 用于将 django 对象包装在 RESTful API 中 django 用于定义您的后端