如何剪辑动态图像？

Question

我在用 C# (wpf/silverlight) 剪辑图像时遇到问题。我正在使用 640x960 分辨率的图像这样做：

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

但是上面的代码甚至没有正确地裁剪图像。有什么想法吗？

我的第二个问题是，如果 Image 的参数来自某些 Web API（例如图像的高度和宽度）。然后如何绑定/计算中心和半径。

谢谢。

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>