8

私はHaskellを学んでいて、それで遊ぶための赤ちゃんプロジェクトを開発したいと思っています. モデルとコントローラーのコンポーネントを進めていますが、ビューに苦労しています。Web ベースのアニメーション (マウス クリックの認識、オブジェクトの移動など) をレンダリングしたいです。さまざまなパッケージ (Spock、Reflex など) を見てきました。より多くの労力を必要とする (RFP であるため、最初にそれらの概念を学習する必要があるため) か、単純に見える (Spock など) が、単純な Web アニメーションのチュートリアル (「Hello World」だけ) を見つけることができない. )

誰でも簡単なアプローチを推奨できますか? 繰り返しますが、すばやく簡単にレンダリングする方法が欲しいだけです。私の焦点は、Web プログラミングではなく、Haskell の基本を学ぶことです。

4

1 に答える 1

3

私にとってうまくいったアプローチは、Reflexを使用して SVG をレンダリングすることです。Reflex を使用すると、DOM オブジェクトを Web ページにレンダリングし、それらのオブジェクトでのマウス クリックに応答することが非常に簡単になります。( canvas の代わりに) SVG を使用すると、選択と編集 (サイズ変更、移動、色の変更、削除) の両方で、初期表示後にレンダリングされたオブジェクトにアクセスできます。

reflex/svg を使用する 3 つの「開始」例を次に示します。これらにはそれぞれ、動作するデモが含まれています (readme ファイルにリンクされています)。

サークル パッキング パッケージによって決定された場所に円をレンダリングします。

インタラクティブな騎士のツアー アニメーション。

回転する 3D キューブ

これらの例はリフレックス ベースであるため、すべて FRP コーディング スタイルを使用して記述されていますが、これらの各プログラムで特に FRP 技術を使用する部分を最小限に抑えようとしました。

たとえば、騎士のツアーと回転キューブの両方には、表示と更新の呼び出しのみを含む再帰的なコード ブロックがあります。どちらの場合も、このコード ブロックにより、ビューから状態変化の蓄積へのフィードバックが有効になります ( foldDyn update )。

回転立方体の例から:

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 の readme で指定されているとおりです。

サークル パッキングの例では、サークル パッキング パッケージが必要です。回転する 3D 立方体の例には、matrix パッケージが必要です。これらのパッケージの使用を有効にするには、reflex-platform の readme で指定されているように、try-reflex を実行する前に reflex-platform の packages.nix に含めます。

于 2016-08-16T14:47:33.543 に答える