一個帶有反射frp的svg元素

Question

我正在嘗試在reflex FRP中編寫單個SVG元素

import Reflex.Dom
import qualified Data.Map as Map

main = mainWidget $ myDiv

myDiv = el "svg" $ do
  elAttr "circle"  $ Map.fromList [ ("cx" , "50") , ("cy", "50"), ("r" , "40"), ("stroke" , "green"), ("fill",  "yellow" )]

這不編譯。 希望Data.Map是正確的。 我從quickref知道類型簽名是：

elAttr     :: String ->          Map String String  -> m a -> m a

稍微好奇monad m與mainWidget相關聯，但主要是開始工作。

這是使用反射附帶的沙箱編譯的。

Answer 1

這里有兩件事需要解決。

首先，你想要返回一些東西，通常基本的return ()將允許你編譯。

其次，elAttr采用2種輸入類型，所以在“圓圈”之后你想把第二個參數放在括號中而不是$ 。

這就是它的樣子：

import Reflex.Dom
import qualified Data.Map as Map

main = mainWidget $ myDiv

myDiv = el "svg" $ do
  elAttr "circle"  (Map.fromList [ ("cx" , "50") , ("cy", "50"), ("r" , "40"), ("stroke" , "green"), ("fill",  "yellow" )]) $ return ()

編譯后，您應該能夠在瀏覽器的元素檢查器中看到這一點。

<html>
  <head>
    <script language="javascript" src="rts.js"></script>
    <script language="javascript" src="lib.js"></script>
    <script language="javascript" src="out.js"></script>
  </head>
  <body>
    <svg>
     <circle cx="50" cy="50" fill="yellow" r="40" stroke="green"></circle>
    </svg>
  </body>
</html>

如果你想看到它出現在瀏覽器中，請確保在你的svg元素中使用elDynAttrNS'定義此屬性xmlns="http://www.w3.org/20000/svg" ：

main = mainWidget $ myDiv

myDiv = do
  let attrs = constDyn $ fromList
               [ ("width" , "500")
               , ("height" , "250")
               ]
  let cAttrs = constDyn $ fromList
               [ ("cx", "50")
               , ("cy", "50")
               , ("r", "40")
               , ("stroke", "green")
               , ("stroke-width", "3")
               , ("fill",  "yellow" )
               ]

  s <- elSvg "svg" attrs (elSvg "circle" cAttrs (return ()))
  return ()

elSvg tag a1 a2 = do
  elDynAttrNS' ns tag a1 a2
  return ()

ns :: Maybe String
ns = Just "http://www.w3.org/2000/svg"

一個帶有反射frp的svg元素

問題描述

1 個解決方案

解決方案1
6 已采納 2016-07-08 15:31:11

一個帶有反射frp的svg元素

問題描述

1 個解決方案

解決方案1 6 已采納 2016-07-08 15:31:11

解決方案1
6 已采納 2016-07-08 15:31:11