html 在HTML中嵌入Elm模块。使用`elm-make Stamper.elm`编译或只是通过指定HTML输出文件w自动生成HTML

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 在HTML中嵌入Elm模块。使用`elm-make Stamper.elm`编译或只是通过指定HTML输出文件w自动生成HTML相关的知识，希望对你有一定的参考价值。

module Stamper where

import Graphics.Collage (..)
import Graphics.Element (..)
import List
import List ((::))
import Mouse
import Signal
import Window


main : Signal Element
main =
  Signal.map2 renderStamps Window.dimensions clickLocations

clickLocations : Signal (List (Int,Int))
clickLocations =
  Signal.foldp (::) [] (Signal.sampleOn Mouse.clicks Mouse.position)

renderStamps : (Int,Int) -> List (Int,Int) -> Element
renderStamps (w,h) locs =
  let pentagon (x,y) =
        ngon 5 20
          |> filled (hsva (toFloat x) 1 1 0.7)
          |> move (toFloat x - toFloat w / 2, toFloat h / 2 - toFloat y)
          |> rotate (toFloat x)
  in
      layers
        [ collage w h (List.map pentagon locs)
        , plainText "Click to stamp a pentagon."
        ]
<html>

  <head>
    <title>Embedding Elm in HTML!</title>
    <script type="text/javascript" src="Stamper.js"></script>
  </head>

  <body>
    <h1>Stamper</h1>
    <div id="stamper" style="width:50%; height:400px;"></div>
  </body>

  <script type="text/javascript">
    var stamperDiv = document.getElementById('stamper');
    Elm.embed(Elm.Stamper, stamperDiv);
  </script>

</html>

以上是关于html 在HTML中嵌入Elm模块。使用`elm-make Stamper.elm`编译或只是通过指定HTML输出文件w自动生成HTML的主要内容，如果未能解决你的问题，请参考以下文章

Elm：如何在自己的浏览器窗口中呈现每个 elm 模块？ - 同一个应用程序中的两个模块（主模块）

如何在 Elm 中创建 HTML 数据属性？

ELM数据预测基于matlab粒子群算法优化ELM数据预测（含前后对比）含Matlab源码 449期

模块暴露在Elm 0.18中

SpaceVim 语言模块 elm

如何在 Elm 中设置焦点？