如何剪輯動態圖像？

Question

我在C＃（wpf/silverlight）中剪裁圖像時遇到問題。我做這樣的具有640×960分辨率的圖像：

<Image Source="/someImage.png"> 
<Image.Clip> 
     <EllipseGeometry Center="320,480" RadiusX="120" RadiusY="120" /> 
    </Image.Clip> 
</Image> 

但上面的代碼不正確，甚至裁剪圖像。任何想法 ？

我的第二個問題是，如果圖像的參數來自某些web API（例如圖像的高度和寬度）。然後如何綁定/計算Center和Radius。

謝謝。

Answer 1

1）由於未指定Width和Height屬性（默認情況下，它們的值設置爲0），因此不會看到圖像內容。
2）要綁定Center，RadiusX，RadiusY屬性，你應該創建視圖模型（你應該熟悉MVVM模式），然後將其設置爲你的形象DataContext屬性：

public class ImageViewModel : INotifyPropertyChanged 
{ 
    private Point _center; 
    private int _radiusX; 
    private int _radiusY; 


    public Point Center 
    { 
     get 
     { 
      return _center; 
     } 
     set 
     { 
      if (_center != value) 
      { 
       _center = value; 
       OnPropertyChanged(); 
      } 
     } 
    } 

    public int RadiusX 
    { 
     get 
     { 
      return _radiusX; 
     } 
     set 
     { 
      if (_radiusX != value) 
      { 
       _radiusX = value; 
       OnPropertyChanged(); 
      } 
     } 
    } 

    public int RadiusY 
    { 
     get 
     { 
      return _radiusY; 
     } 
     set 
     { 
      if (_radiusY != value) 
      { 
       _radiusY = value; 
       OnPropertyChanged(); 
      } 
     } 
    } 


    public event PropertyChangedEventHandler PropertyChanged; 


    public void OnUpdate(Point center, int radiusX, int radiusY) 
    { 
     Center = center; 
     RadiusX = radiusX; 
     RadiusY = radiusY; 
    } 


    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
    } 
} 

當您收到新值，通話視圖模型上的OnUpdate會設置新值，引發PropertyChanged事件，並且視圖將更新。
3）後面的代碼：

myImage.DataContext = new ImageViewModel { Center = new Point(320,480), RadiusX = 120, RadiusY = 120 } 

4）XAML：

<Image x:Name="myImage" Source="/someImage.png"> 
    <Image.Clip> 
     <EllipseGeometry Center="{Binding Point}" RadiusX="{Binding RadiusX}" RadiusY="{Binding RadiusY}" /> 
    </Image.Clip> 
</Image>