Xamarin形成FFImageLoading角点转换

Question

我的UI设计如下图所示。我使用FFImageLoading插件和Corner Transformations但我无法在图像底部制作椭圆形状。我怎样才能做到这一点 ？

我尝试使用代码，但它无效。

<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 with transparency），这将模拟＆＃34 ;白＆＃34;底部椭圆形（参见图像样本）。

灰色部分应该是白色的！

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图像的步骤：