两个图像层和OpacityMask

Question

我正在尝试从一张图片中裁剪一个圆圈，并将其放在WPF中的另一张图像上。

Circle的中心根据鼠标移动而变化，需要动态界定。

我尝试将两个图像放在彼此的顶部，并使用我实时绘制的第三个图像作为不透明蒙版。

请您提供简短的代码来有效地解决这个问题？

Answer 1

以下代码介绍了使用OpacityMask可以执行的操作。这有点违反直觉，因为我们希望XAML渲染能够从底层到顶层进行图层元素。

但是，在这种情况下，你希望你的“背景”图像层叠在前景之上，因为OpacityMask将仅用于显示由VisualBrush的位置和大小描述的前景部分，使其余部分透明。它给出如下：

<Grid x:Name="MainGrid" MouseMove="Grid_MouseMove">
    <Rectangle Fill="Red" ></Rectangle>
    <Rectangle Fill="Green">
        <Rectangle.OpacityMask>
            <VisualBrush Stretch="None" >
                <VisualBrush.Visual>
                    <Ellipse Width="40" Height="40" StrokeThickness="1" Fill="Black"  />
                </VisualBrush.Visual>
                <VisualBrush.RelativeTransform>
                    <TransformGroup>
                        <TranslateTransform x:Name="OpacityFilterTransform" X="1" Y="1"/>
                    </TransformGroup>
                </VisualBrush.RelativeTransform>
            </VisualBrush>
        </Rectangle.OpacityMask>
    </Rectangle>
</Grid>

然后，此事件处理程序代码计算椭圆的位置并将其应用于OpacityFilter的TranslateTransform对象，使您可以控制图像的位置。

    private void Grid_MouseMove(object sender, MouseEventArgs e)
    {
        var position = e.GetPosition(this);
        var height = MainGrid.ActualHeight;
        var width = MainGrid.ActualWidth;
        // with the position values, interpolate a TranslateTransform for the opacity mask
        var transX = position.X / width;
        var transY = position.Y / height;
        OpacityFilterTransform.X = transX - 0.5;
        OpacityFilterTransform.Y = transY - 0.5;
    }

此解决方案适用于您关心的Visual的后代。