如何在 Xamarin Form 中创建图像蒙版？答案

【问题标题】：How to create an image mask in Xamarin Form?如何在 Xamarin Form 中创建图像蒙版？
【发布时间】：2020-02-21 14:53:25
【问题描述】：

让我更具体一点：我在网上找到了许多剪辑到框架或其他形状的图像示例，但我需要创建一种由带有孔的 png 图像制成的模板，并将用户图像放入该孔中，可能居中。我怎样才能以 xamarin 形式实现这一目标？最初我考虑将蒙版图像包装在一个框架中，但在孔本身内添加辅助图像非常困难，所以我尝试使用 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>

这是我真正想要实现的目标：

如您所见，图像（煎饼）并不完美地位于蒙版顶部，但它有一点边框。请记住，我必须将内部图像偏移量保存在某处才能动态创建模板。

【问题讨论】：

能否添加您尝试过的示例 sn-p
那么 template image("temp1png") 是这个日历图像布局，您想要实现的是在该模板布局的某个特定区域放置不同的照片（例如“ftoast.jpg”）？
没错！我在网上找不到与此相关的任何内容。好吧，如果您有任何其他想法来实现相同的目标，那很好。

标签： c# xaml xamarin xamarin.forms cross-platform

【解决方案1】：

你可以试试这个：

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

【讨论】：

【解决方案2】：

我没有你的图片大小，但你应该在自定义图片之前有模板图片。

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

将 Template Height- 和 WidthRequest 更改为您的图像大小，并将 FlexLayout 的边距和 WidthRequest 调整为您喜欢的边框大小。（WidthRequest 应该是模板的 WidthRequest 减去 Margin * 2）。如果图像太小，FlexLayout 会将图像居中（可能大多数时候都是这种情况）。

【讨论】：

图像大小以像素为单位，如何将其转换为dp？
只要保持图像的比例，您就可以使用适合您的不同值。我的图片是1080 × 2340px，我除以5。