绘制榆树中的点列表

时间:2016-07-16 16:24:37

标签: javascript elm

所以我对榆树来说是全新的,我想知道如何在榆树中绘制网格:

我有一个点列表,比如说[(1,1),(2,2),(3,3),...,(9,9)],我想绘制9次9"网格"每个"点"是一个正方形(比如说10乘10像素),这样,列表中相应坐标的正方形就是黑色(注意我不需要任何分隔列或行的行)。

因此,在这种情况下的结果应该只是一个"楼梯"从左下角到右上角对角线运行。output

  

这样做的最佳方式是什么?

谷歌搜索我发现也许svg可能是一个可能的解决方案,但不幸的是我不知道svg是如何工作的。

我将不胜感激。

1 个答案:

答案 0 :(得分:1)

Svg库可以正常使用。

import Html
import Svg exposing (..)
import Svg.Attributes exposing (..)

plotSquares : List (Int, Int) -> Html.Html msg
plotSquares =
  let
    toSquare (a, b) =
      rect
        [ x (toString (a * 10))
        , y (toString (100 - (b * 10)))
        , width "10"
        , height "10" ] []
  in
    svg [ width "100", height "100" ] << List.map toSquare

main =
  plotSquares <| List.map (\x -> (x, x)) [1..9]

此示例绘制您描述的楼梯,从左下角开始,向右上方上升。您可以将代码粘贴到http://elm-lang.org/try中以使其旋转。