问FFImageLoading角变换
EN

Stack Overflow用户

提问于 2018-05-11 18:47:33

回答 1查看 920关注 0票数 2

我有一个用户界面设计，就像在下面的图片。我正在使用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>

ffimageloading

xamarin

xamarin.forms

回答 1

Stack Overflow用户

发布于 2018-05-14 13:13:18

我是FFImageLoading库的初学者，但是根据官方文档(你可以在这里找到：在这里输入链接描述)，我不确定你能达到你的效果.在我看来，你最好的选择是：

使用一个看起来像你的，但不会完全相同的转换(我想你已经做了)。例如，您可以使用一个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>

...

希望它能给你一些想法..。

编辑:再现顶层掩模图像的步骤