joh*_*ual 4 svg haskell reflex
我正在尝试在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但主要是开始工作.
这是使用反射带来的沙箱编译的.
这里有两件事需要解决.
首先,你想要返回一些东西,通常基本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>
如果您希望在浏览器中看到它,请确保xmlns="http://www.w3.org/20000/svg"在svg元素中定义此属性,如下所示elDynAttrNS':
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"