8

我正在学习 Haskell，并想开发一个婴儿项目来玩它。我正在处理模型和控制器组件，但视图很难。我想渲染基于 Web 的动画（识别鼠标点击、移动对象等）。查看了各种包（Spock、Reflex 等）。似乎 [too?] 很多，但我发现他们要么需要更多的努力（因为它们是 RFP，这需要我首先学习这些概念）要么看起来很简单（例如 Spock），但是我找不到简单的网络动画教程（只是一个“Hello World”。 )

有人可以推荐一个简单的方法吗？再说一次，我只想用一种快速简单的方法来渲染东西。我的重点是学习 Haskell 基础知识，而不是 Web 编程。

4

1 回答 1

3

对我有用的方法是使用Reflex来渲染 SVG 。Reflex 使得将 DOM 对象呈现到网页并响应鼠标单击这些对象变得相当容易。使用 SVG（而不是 canvas）允许在初始显示后访问渲染的对象，用于选择和编辑（调整大小、移动、更改颜色、删除）。

下面是三个使用 reflex/svg 的“入门”示例。其中每一个都包含一个工作演示（链接到自述文件中）。

在由 circle-packing 包确定的位置渲染圆圈

交互式骑士巡回动画。

旋转 3D 立方体

鉴于这些示例是基于反射的，它们都是使用 FRP 编码风格编写的，但我试图最小化每个程序中专门使用 FRP 技术的部分。

例如，骑士之旅和旋转立方体都有一个递归执行代码块，只包含对查看和更新​​的调用。在这两种情况下，此代码块都支持从视图到状态变化累积的反馈（ foldDyn 更新）

从旋转立方体示例：

rec
    view modelOrientation
    modelOrientation <- foldDyn update initialOrientation tick

来自骑士之旅的例子：

rec
    startEvent <- view width height rowCount colCount board tour
    tour <- foldDyn (update board) [] $ leftmost [startEvent, advanceEvent]

我发现开始使用 reflex 的最简单方法是克隆reflex-platform github 存储库并运行该存储库中包含的 try-reflex 脚本 - 完全按照 reflex-platform 自述文件中的说明

circle-packing 示例需要circle-packing 包。旋转 3d 立方体示例需要matrix 包。要启用这些包的使用，请在运行 try-reflex 之前将它们包含在 reflex-platform 的 packages.nix 中 - 再次按照 reflex-platform 自述文件中的说明。

于 2016-08-16T14:47:33.543 回答