八木日記

いろいろなこと

elm svgで扇型をかく

前回のつづき
ygnb0605.hatenablog.com

今度は、扇型をかいてみました
まずelm reactorで「elm install Spaxe/svg-pathd」を実行し
「import Svg.PathD exposing (..)」を記述できるようにする

コードは以下のようにする

import Svg exposing (..)
import Svg.Attributes exposing (..)
import Svg.PathD exposing (..)

main =
  svg
    [ width "1200"
    , height "1200"
    , viewBox "0 0 1200 1200"
    ]
    [ rect
        [ x "10"
        , y "10"
        , width "100"
        , height "100"
        , rx "15"
        , ry "15"
        , fill "green"
        ]
        []
    , circle
        [ cx "50"
        , cy "50"
        , r "50"
        , fill "pink"
        ]
        []
    , Svg.path
         [ d <| pathD
            [ M (200, 200)
            , A (100, 100)  90 False False (300,100) 
            , L (200, 100)  
            , Z
            ]
            , fill "blue"
         ]
        []
    ]

実行結果をみてみると青い扇型が描画されている
f:id:ygnb0605:20190918213535p:plain


扇型の描画の仕方について、以下を参考にさせていただきました
developer.mozilla.org
www.solima.net


dタグ難しい