c# - 两个图像层和 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您想要分层的任何后代。