Как создать маску изображения в Xamarin Form?

Question

Позвольте мне быть более конкретным: я нашел в Интернете много примеров изображений, обрезанных по рамкам или другим фигурам, но мне нужно создать своего рода шаблон, созданный из png-изображения с отверстием в нем, и поместить изображение пользователя в это отверстие,возможно по центру. Как я могу достичь этого в формах ксамарина? Изначально я думал об обертывании изображения маски в рамке, но было бы довольно трудно добавить вторичное изображение внутри самого отверстия, поэтому я попытался позиционировать с AbsoluteLayout, но это не соответствует моим потребностям, вот код xaml, довольно простой:

  <ContentView.Content>
        <AbsoluteLayout>
            <Image Source="ftoast.jpg" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
            <Image Source="temp1.png" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1" />
        </AbsoluteLayout>
  </ContentView.Content>
</ContentView>

Вот что я на самом деле пытаюсь достичь:

Как вы видите изображение (блины)не идеально в верхней части маски, но у нее есть немного границы. Имейте в виду, что для динамического создания шаблонов мне необходимо сохранить внутреннее смещение изображения.

Answer 1

У меня нет размера вашего изображения, но у вас должно быть изображение шаблона перед пользовательским изображением.

<AbsoluteLayout>
    <Image Source="CalendarTemplate.jpg" HeightRequest="468" 
           WidthRequest="216"/>
    <FlexLayout AlignItems="Center" JustifyContent="Center" 
                HeightRequest="250" WidthRequest="176" Margin="20">
        <Image Aspect="AspectFit" Source="Pancakes.jpg" />
    </FlexLayout>
</AbsoluteLayout>

Измените шаблонный запрос на высоту и ширину на размер вашего изображения и отрегулируйте поля иWidthRequest FlexLayout к вашему предпочтительному размеру границы. (WidthRequest должен быть WidthRequest шаблона за вычетом поля * 2). FlexLayout будет центрировать изображение, если оно будет маленьким (вероятно, в большинстве случаев).

Answer 2

Вы можете попробовать это:

<AbsoluteLayout>
        <Image Source="Pancake.png"/>
        <Image Source="ProfileImage.png" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,.5,35,35" /> 
</AbsoluteLayout>