如何剪辑动态图像

本文关键字：图像 动态 何剪辑 | 更新日期: 2023-09-27 18:33:08

我在C#（wpf/silverlight）中剪切图像时遇到问题。我用640x960分辨率的图像这样做：

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

但是上面的代码甚至没有正确裁剪图像。任何想法 ？

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

谢谢。

如何剪辑动态图像

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>
相关文章：