Question

我的应用程序中有一个图像，该图像周围带有框架，以使图像成为一个圆圈。我想为框架添加自定义形状，但无法弄清楚如何获得此精确形状。

（请忽略图形中的房子，它只是在Xamarin中表示图像而已，我只需要轮廓即可。）

我也不要求框架具有彩色边框，只需具有形状即可。

任何帮助将不胜感激！

这是我现在的“框架+图片”代码：

<Frame x:Name="PictureFrame" Padding="0" Margin="0" HorizontalOptions="Center" BorderColor="Transparent" WidthRequest="80" HeightRequest="80" HasShadow="False">
    <Image x:Name="Picture" Source="picture" Margin="0,0,0,0" Aspect="AspectFill"/>
</Frame>

Answer 1

您可能必须创建一个自定义渲染器才能实现所需的功能。例如，在Android上，框架遮罩实际上是使用bezier路径实现的，如果您更深入地研究代码，则可以根据自己的喜好进行控制。

看看FreshEssentials AdvancedFrame视图，它几乎可以满足您的需求。他们所做的修改是，您可以在左侧或右侧的两个角上都具有90度的锐角。您只需要稍微修改一下此代码即可在除左上角以外的所有地方都具有圆角。

您需要修改的内容如下：

AdvancedFrame（如果您希望拐角半径可以单独配置或其他设置。这是从Xamarin.Forms中的原始Frame控件继承的基础）
AdvancedFrameRendererDroid
AdvancedFrameRendereriOS
AdvancedFrameRendererUWP（仅在需要UWP支持的情况下）

提示：

在Android上，框架的背景遮罩是通过Path类定义的。

在iOS上，使用了UIKit框架中的UIBezierPath类。

Answer 2

现在使用Xamarin.Forms可以使用Shapes。路径数据就是带有点的圆。

<AbsoluteLayout
    BackgroundColor="AliceBlue"
    >
    <Path
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        Margin="8"
        Data="M142.798828,0 C221.365114,0.164668482 285,63.9009723 285,142.5 C285,221.200577 221.200577,285 142.5,285 C63.7994232,285 0,221.200577 0,142.5 C0,139.784357 0.0759637392,137.086456 0.225882227,134.408306 L0,133.828125 L0,0 L142.798828,0 Z"
        Stroke="LightBlue"
        StrokeThickness="2"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        />
    <Image
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        Aspect="AspectFit"
        Source="brigadeiro"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="94"
        HeightRequest="94"
        />
</AbsoluteLayout>

Xamarin在图像周围形成自定义框架形状

2 个答案: