Xamarin Forms中的圆形图像不是一个完美的圆圈-Java 学习之路

我有一个图像渲染器使用这里的代码：https://blog.xamarin.com/elegant-circle-images-in-xamarin-forms/

public class ImageCircleRenderer: ImageRenderer
{
    private void CreateCircle()
    {
        try
        {
            double min = Math.Min(Element.Width, Element.Height);
            Control.Layer.CornerRadius = (float)(min / 2.0);
            Control.Layer.MasksToBounds = false;
            Control.ClipsToBounds = true;
        }
        catch (Exception ex)
        {
            Debug.WriteLine("Unable to create circle image: " + ex);
        }
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null || Element == null)
        {
            return;
        }

        CreateCircle();
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == VisualElement.HeightProperty.PropertyName ||
            e.PropertyName == VisualElement.WidthProperty.PropertyName)
        {
            CreateCircle();
        }
    }
}

然后我设置了我的表视图，其中包含一个包含照片的视图单元格 .

像这样：

private void SetTableView()
    {
        int photoSize = 120;
        var photo = new ImageCircle
        {
            Source = "profile_placeholder.png",
            WidthRequest = photoSize,
            HeightRequest = photoSize,
            Aspect = Aspect.AspectFill,
            HorizontalOptions = LayoutOptions.Center,
            Scale = 1.0
        };

        Content = new TableView
        {
            HasUnevenRows = true,
            Intent = TableIntent.Menu,
            Root = new TableRoot()
            {
                new TableSection()
                {
                    new ViewCell
                    {
                        Height = photoSize,
                        View = new StackLayout
                        {
                            Orientation = StackOrientation.Horizontal,
                            HorizontalOptions = LayoutOptions.Start,
                            VerticalOptions = LayoutOptions.Start,
                            Padding = 15,
                            Children =
                            {
                                photo,
                                new Label
                                {
                                    Text = "Casa de Férias"
                                }
                            }
                        }
                    }
                }

            }

        };

    }

不幸的是，结果如下：

enter image description here

如何让这张照片成为一个完美的圆圈？我没有看到为什么这不起作用的原因......

我设置了相同的宽度和高度，它应该填充可用空间，保持纵横比在Image的Aspect属性中定义 .

我错过了什么？

谢谢！

编辑：我尝试使用James Montemagno的ImageCircle插件，同样的事情发生了 . 我猜我的布局可能有问题吗？

1 回答

关于裁剪的圆形图像，上面的代码是正确的，但是：

TableView的ViewCell中设置的高度缩小了图像，导致它失去了所需的宽高比 . 这是因为高度小于顶部和底部填充应用的图像高度：

我已经将padding重构为变量：

int padding = 15;

然后，在配置ViewCell的高度时，我会考虑Image的高度和所需的填充 .

new ViewCell
{
    Height = photoSize + padding*2,
    View = new StackLayout
    {
        Orientation = StackOrientation.Horizontal,
        HorizontalOptions = LayoutOptions.Start,
        VerticalOptions = LayoutOptions.Start,
        Padding = padding,
        Children =
        {
            photo,
            new Label
            {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                VerticalOptions = LayoutOptions.Center,
                Text = "Casa de Férias"
            }
        }
    }
}

细胞的ImageCircle现在是一个完美的圆圈 .

enter image description here

EDIT:

经过一些重构：

public class ProfileCell: ViewCell
{

    private static int photoSize = 75;
    private static int viewCellPadding = 15;

    public ProfileCell(ImageSource source, string description)
    {
        var photo = new ImageCircle
        {
            Source = source,
            WidthRequest = photoSize,
            HeightRequest = photoSize,
            HorizontalOptions = LayoutOptions.Center,
            Aspect = Aspect.AspectFill,
            Scale = 1.0
        };

        Height = photoSize + (viewCellPadding * 2);
        View = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Start,
            Padding = viewCellPadding,
            Children =
            {
                photo,
                new Label
                {
                    HorizontalOptions = LayoutOptions.StartAndExpand,
                    VerticalOptions = LayoutOptions.Center,
                    Text = description
                }
            }
        };
    }

}

现在可以将单元格放在TableView中，例如：

new TableSection()
{
    new ProfileCell(ImageSource.FromFile("profile_placeholder.png"), "Description")
}

回复于 2024-05-09T06:58:07+08:00

Xamarin Forms中的圆形图像不是一个完美的圆圈

1 回答

相关问题