是否可以使用 Elm 的标准库裁剪元素?如果没有,是否有第 3 方库?
Is it possible to crop an Element using Elm's std library? If not, is there a 3rd party lib for this?
我经常 运行 在构建 Element
或 Form
并希望将视图缩小到给定区域(即在较小的范围内滚动)的情况下rectangle) 尽管我在它们各自的模块中找不到任何方法。
是否可以使用 Elm 的标准库来做到这一点?如果没有,是否有任何第 3 方库能够执行此操作?
否则,也许有更好的方法来实现这一点?
感谢任何帮助或建议!
没有滚动条(使用标准库)
我找不到裁剪方法,但 current Graphics.Element
有滚动条。 是 可能的是在没有滚动条的情况下进行裁剪,通过小于其内容的 container
或使用 size
调整元素大小。我认为容器方式更健壮,因为调整图像大小实际上会使图像变形。
这是一个例子:
import Graphics.Element exposing (..)
import Text
string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est."
main : Element
main =
let element =
leftAligned (Text.fromString string)
|> container 400 300 topLeft
in container 205 200 topLeft element
滚动条(通过“第 3 方”库)
如果你想要滚动条,你可能至少需要从 elm-html
. Note that the author of the library is also the author of Elm, so it's not quite 3rd party :P . You can keep it minimal by using conversions 到 html 和 html 的 html 一点点并将其包装在div
具有定义较小尺寸和右侧溢出的样式属性 属性。只要 div 的大小已知,就应该很容易转换回 Element
。
我经常 运行 在构建 Element
或 Form
并希望将视图缩小到给定区域(即在较小的范围内滚动)的情况下rectangle) 尽管我在它们各自的模块中找不到任何方法。
是否可以使用 Elm 的标准库来做到这一点?如果没有,是否有任何第 3 方库能够执行此操作?
否则,也许有更好的方法来实现这一点?
感谢任何帮助或建议!
没有滚动条(使用标准库)
我找不到裁剪方法,但 current Graphics.Element
有滚动条。 是 可能的是在没有滚动条的情况下进行裁剪,通过小于其内容的 container
或使用 size
调整元素大小。我认为容器方式更健壮,因为调整图像大小实际上会使图像变形。
这是一个例子:
import Graphics.Element exposing (..)
import Text
string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est."
main : Element
main =
let element =
leftAligned (Text.fromString string)
|> container 400 300 topLeft
in container 205 200 topLeft element
滚动条(通过“第 3 方”库)
如果你想要滚动条,你可能至少需要从 elm-html
. Note that the author of the library is also the author of Elm, so it's not quite 3rd party :P . You can keep it minimal by using conversions 到 html 和 html 的 html 一点点并将其包装在div
具有定义较小尺寸和右侧溢出的样式属性 属性。只要 div 的大小已知,就应该很容易转换回 Element
。