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>

如何剪辑动态图像？

1 个答案: