Xamarin Forms FFImageLoading 角转换

Question

我的 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>

Answer 1

我是 FFImageLoading 库的初学者，但是根据官方文档（你可以在这里找到：enter link description here），我不确定你能不能达到你的效果......在我看来，最好的选择是你有：

• 使用看起来像您的转换，但实际上并不相同（我假设您已经这样做了）。例如，您可以使用CornersTransformation，但您的图片底部中心仍然会有一个直线形段...
• 或我心目中的最佳解决方案：使用普通的方形图像（您的标题图像）并仅使用 另一个作为顶层（具有透明度的 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 图像的步骤：