Question

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

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

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

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

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

我将不胜感激。

Answer 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中以使其旋转。

绘制榆树中的点列表

1 个答案: