圈的图像不是正圆

我这里使用的代码有一个形象的渲染：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" 
           } 
          } 
         } 
        } 
       } 

      } 

     }; 

    }

不幸的是，结果是这样的：

我怎样才能让这幅画一个完美的圆？我看不出唉原因为什么这是行不通的......

我设置相同的宽度和高度，并应填写作为图像的纵横属性定义的可用空间，同时保持长宽比。

我错过了什么？

谢谢！

编辑：我尝试使用ImageCircle插件詹姆斯Montemagno，同样的事情发生了。我猜这可能是我的布局有问题？

来源

2016-11-28 nmdias

这只能与方形图像。在您链接到的网站上，它表示：“这里的关键是确保您为图片请求相同的宽度和高度，并将方面设置为AspectFill，以确保完美的方形可以减少您的圈子。” – Meyer

图像占位符实际上是一个完美的广场。我使用的是120x120图片，然后是240x240的2x资源和360x360的3x资源。 – nmdias

你说得对，对不起。我看到你已经发现了这个问题。 – Meyer

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

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

我重构填充到一个变量：

int padding = 15;

然后，配置ViewCell的高度时，我会采取考虑到图像的高度+所需的填充。

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现在是一个完美的圆。

编辑：

一些重构后：

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") 
}

来源

2016-11-28 10:55:02 nmdias

圈的图像不是正圆

回答

相关问题