0

我有一张带有不透明蒙版的图像,并希望增加调整/重新定位该不透明蒙版的可能性。我是一个完整的 WPF 新手,所以可能想法是完全错误的,请随时向我提出任何想法:)

所以我有这个:

<Canvas Name="MainCanvas">
    <Rectangle Width="197.016" Height="120.896" Canvas.Left="76.119" Canvas.Top="73.134" Name="SelectionRectangle"></Rectangle>
    <Image Source="Chrysanthemum.jpg" Width="{Binding ActualWidth, ElementName=MainCanvas, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=MainCanvas, Mode=OneWay}">
        <Image.OpacityMask>
            <RadialGradientBrush MappingMode="Absolute" 
                                 Center="{Binding ElementName=SelectionRectangle, Converter={StaticResource RectangleConverter}}" 
                                 GradientOrigin="{Binding ElementName=SelectionRectangle, Converter={StaticResource RectangleConverter}}" 
                                 RadiusY="{Binding ElementName=SelectionRectangle, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/2}" 
                                 RadiusX="{Binding ElementName=SelectionRectangle, Path=ActualWidth, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/2}">
                <GradientStop Color="#7C15161F" Offset="1" />
                <GradientStop Color="#FF40499E" Offset="0.999" />
                <GradientStop Color="#FF182395" Offset="0" />
            </RadialGradientBrush>
        </Image.OpacityMask>
    </Image>
</Canvas>

所以有带有 RadialGradientBrush 蒙版的图像,我正在尝试使用此转换器将 RadialGradientBrush 中心绑定到矩形中心:

public class RectangleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var rectangle = (Rectangle)value;
        return new Point(Canvas.GetLeft(rectangle) + rectangle.ActualWidth / 2f, Canvas.GetTop(rectangle) + rectangle.ActualHeight / 2f);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

一切都编译并运行,但工作不正确,我猜是因为当 Rectangle 位置更改时,RadialGradientBrush Center 绑定不知道这一点(至少转换器中的断点不会被更改矩形位置所击中)。解决此问题的最简单/推荐的方法是什么?

4

1 回答 1

0

我发现,Multibinding可以解决这个问题:

  <Canvas Name="MainCanvas">
    <Rectangle Width="197.016" Height="120.896" Canvas.Left="76.119" Canvas.Top="73.134" Name="SelectionRectangle"></Rectangle>
    <Image Source="Chrysanthemum.jpg" Width="{Binding ActualWidth, ElementName=MainCanvas, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=MainCanvas, Mode=OneWay}">
        <Image.OpacityMask>
            <RadialGradientBrush MappingMode="Absolute"                                                                                                                                                                                          
                                 RadiusY="{Binding ElementName=SelectionRectangle, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/2}" 
                                 RadiusX="{Binding ElementName=SelectionRectangle, Path=ActualWidth, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/2}">                    
                <RadialGradientBrush.Center>
                    <MultiBinding Converter="{StaticResource RectangleConverter}">
                        <Binding ElementName="SelectionRectangle" Path="(Canvas.Left)"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="ActualWidth"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="(Canvas.Top)"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="ActualHeight"></Binding>
                    </MultiBinding>
                </RadialGradientBrush.Center>
                <RadialGradientBrush.GradientOrigin>
                    <MultiBinding Converter="{StaticResource RectangleConverter}">
                        <Binding ElementName="SelectionRectangle" Path="(Canvas.Left)"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="ActualWidth"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="(Canvas.Top)"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="ActualHeight"></Binding>
                    </MultiBinding>
                </RadialGradientBrush.GradientOrigin>
                <GradientStop Color="#7C15161F" Offset="1" />
                <GradientStop Color="#FF40499E" Offset="0.999" />
                <GradientStop Color="#FF182395" Offset="0" />
            </RadialGradientBrush>
        </Image.OpacityMask>

    </Image>
</Canvas>

和转换器:

 public class RectangleConverter : IMultiValueConverter
{
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return new Point((double)values[0] + (double)values[1] / 2d, (double)values[2] + (double)values[3] / 2d);            
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

不确定我是否正确,但我的解释是 - 有问题我绑定到整个对象,所以它不是依赖属性,所以掩码没有收到有关更改的通知。现在多重绑定让我们指定哪些属性是有趣的,并且当它们中的任何一个发生变化时,值转换器会收到通知。

于 2013-04-09T14:47:38.417 回答