2

我有一个如下图所示的 UI 设计。我正在使用 FFImageLoading 插件和角变换，但我无法在图像底部制作椭圆形。我怎样才能做到这一点 ？

我正在尝试以下代码，但它不起作用。

<ffimg:CachedImage HeightRequest="225" 
                   Aspect="AspectFill" 
                   Source="https://www.ashmolean.org/sites/default/files/styles/listing_landscape_textoverlay_left_bottom_image/public/ashmolean/images/media/cafe1.jpg?itok=RRq3Tds5">
                        <ffimg:CachedImage.Transformations>
                            <ffimgtr:CornersTransformation  
                                     BottomLeftCornerSize="40" 
                                     BottomRightCornerSize="40" />
                        </ffimg:CachedImage.Transformations>
                    </ffimg:CachedImage>

在此处输入图像描述

4

1 回答 1

1

我是 FFImageLoading 库的初学者，但是根据官方文档（您可以在此处找到：在此处输入链接描述），我不确定您是否可以达到您的效果......在我看来，您拥有的最佳选择：

  • 使用看起来像您的转换，但实际上并不相同（我假设您已经这样做了）。例如，您可以使用 aCornersTransformation但在图片的底部中心仍然会有一个直线形段...
  • 或我认为最好的解决方案：使用普通的方形图像（您的标题图像）并仅使用另一个作为顶层（具有透明度的 png），这将模拟“白色”底部椭圆形（参见下面的图像示例）。

底部椭圆形

在您的情况下，灰色部分应该是白色的！

XAML 应该是这样的：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinitions Height="255" />
        <RowDefinitions Height="*" />
    </Grid.RowDefinitions>

    <!-- your header on row 0 -->
    <Grid Grid.Row="0">

        <!-- HEADER Squared background image -->
        <ffimg:CachedImage HeightRequest="225" Aspect="AspectFill" Source="https://www.ashmolean..." />

        <!-- Top layer OVER image (the one you have to generate as PNG for the transparency) -->
        <ffimg:CachedImage 
            HeightRequest="40
            Aspect="AspectFill" 
            VerticalOrientation="End"
            Source="myOvalShape.png"
            />

        <!-- your list of header buttons inside this panel -->
        <StackLayout VerticalOrientation="Start" ... />

    </Grid>

...

希望能给大家一些思路...

编辑：重现顶层 MASK 图像的步骤：

1-你的页面背景背景标题椭圆形图像形状要制作的图像结果

于 2018-05-14T13:13:18.240 回答