如何用elm-ui在elm中显示圆形图像？

Question

我正在研究 elm-ui，我正在尝试完成一项（在我看来）简单的任务，但我正在努力。
我想显示一个圆形图像，就像我们在 iOS 或其他几个平台上的联系表格中都知道的那样。

据我所知，有两个库名为 elm-ui:
- mdgriffith/elm-ui
- gdotdesign/elm-ui
我用的是第一个。

我在玩 Element.Border，但只是在背景中添加了一个边框。

import Element exposing (image)
import Element.Border as Border

image
  [ Border.rounded 50
  , Border.width 5
  ]
  { src = "img.png"
  , description = "Some text..."
  }

我还尝试使用 svg 来显示一个圆圈并用图像作为背景填充它。但是现在我很难将背景设置为颜色以外的任何东西。

import Element exposing (html)
import Svg exposing (svg)
import Svg.Attributes exposing (cx, cy, fill, height, r, width)

html
  (svg
      [ width "100"
      , height "100"
      ]
      [ circle
          [ cx "50"
          , cy "50"
          , r "50"
          , fill "orange" -- That´s where I would like to insert my image.
          ]
          []
      ]
  )

我来自 .Net 世界并且使用 WPF XAML 我会使用 svg 作为图像上的不透明蒙版。

如何在 ELM 中实现该目标？
感谢您的帮助！

Answer 1

我在 Elm Discourse 上得到了问题的答案。

这很简单，只需添加一个 Border.rounded 和 clip。

image
    [ centerX
    , centerY
    , Border.rounded 50 
    , clip
    ]
    { src = "https://cdn.cnn.com/cnnnext/dam/assets/191024091949-02-foster-cat-large-169.jpg"
    , description = "A Cat"
    }

回答的人还提供了 Ellie Example。

如何用elm-ui在elm中显示圆形图像？

How to display a round image in elm with elm-ui?

svg

elm

elm-ui