Xamarin Forms FFImageLoading Угловые преобразования - PullRequest
Новая
       22

Xamarin Forms FFImageLoading Угловые преобразования

0 голосов
/ 11 мая 2018

У меня есть дизайн пользовательского интерфейса, как на следующем изображении.Я использую плагин 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>

enter image description here

1 Ответ

0 голосов
/ 14 мая 2018

Я новичок с библиотекой FFImageLoading, но согласно официальной документации (вы можете найти здесь: введите описание ссылки здесь ), я не уверен, что вы сможете добиться своего эффекта ... ВНа мой взгляд, лучшие варианты у вас есть:

  • Используйте преобразование, которое выглядит как ваше, но на самом деле не будет таким (я полагаю, вы уже сделали это).Например, вы можете использовать CornersTransformation, но у вас по-прежнему будет прямолинейный сегмент внизу в центре вашего рисунка ...
  • или лучшее решение, на мой взгляд: использовать нормальное изображение в квадрате (ваше изображение заголовка) и просто используйте еще один в качестве верхнего слоя (png с прозрачностью) , который будет имитировать "белую" нижнюю овальную форму (см. образец изображения ниже).

Bottom oval shape

Серая часть должна быть белой в вашем случае!

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>

...

Надеюсь, что это может дать вам некоторые идеи ...

Редактировать: шаги по воспроизведению маскирующего изображения верхнего слоя :

1- your page background* ** 1 037 *background headerOval shape image* 1044 тысячу сорок три ** ** 1 045 1 046 ** ** 1048 одна тысяча сорок семь ** +1049 *result

...