两个图像层和 OpacityMask答案

【问题标题】：Two Image Layers and OpacityMask两个图像层和 OpacityMask
【发布时间】：2013-08-14 18:15:48
【问题描述】：

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

圆的圆心随着鼠标的移动而变化，需要动态限定。

我尝试将两张图片放在一起，并使用我实时绘制的第三张图片作为不透明蒙版。

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

【问题讨论】：

只是几个 SolidBrush 对象，还是比这更复杂？

标签： c# wpf image xaml opacitymask

【解决方案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 的任何后代。

【讨论】：