圈的圖像不是正圓

我這裏使用的代碼有一個形象的渲染：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

圈的圖像不是正圓

回答

相關問題