不透明掩模无视ClipToBounds是真实的

Question

我有一个“面具画布”，我正在用它作为我的主要绘画画布的OpacityMask的来源。

我的两个画布都是一样大小，但我得到一些意想不到的结果，当我开始绘画的边界附近的画布。

我创建了一个gif来说明我的问题：

​

在影片中，我首先画了面具(黑色)。然后，在另一个画布上，它的OpacityMask被绑定到面具帆布上，我开始用草的纹理来绘画。如果我在画布内作画的话，效果会很好，但如果我靠近画布的边界，它就会翻译和刻度这幅画。

我认为当我接近边缘时，画布的尺寸会发生变化，这会使图像倾斜。我如何解决这个问题，我已经为两个画布设置了ClipToBounds="True“。我如何保持面具帆布与绘画画布成比例？

编辑-这是两个画布背后的代码。面具帆布：

<ItemsControl Name="maskDataBinding" Background="Transparent" Panel.ZIndex="-1" ClipToBounds="True" Height="512" Width="512" HorizontalAlignment="Center" VerticalAlignment="Center">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Background="Transparent"  
                        Height="512" 
                        Width="512" 
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center"
                        ClipToBounds="True">
                </Canvas>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding Name}"
                            Width="{Binding Width}"
                            Height="{Binding Height}"
                            Opacity="{Binding Opacity}">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform X="{Binding OffsetX}" Y="{Binding OffsetY}"/>
                            <RotateTransform CenterX="{Binding CenterX}" CenterY="{Binding CenterY}" Angle="{Binding Angle}"/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

画布：

<!--Outer collection-->
<ItemsControl Name="canvasDataBinding"
            Focusable="True"
            HorizontalAlignment="Center" 
            Height="512"
            Width="512" 
            VerticalAlignment="Center" 
            ClipToBounds="True">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas MouseMove="Canvas_MouseMove"
                    MouseEnter="Canvas_MouseEnter"
                    MouseLeave="Canvas_MouseLeave"
                    MouseDown="Canvas_MouseDown"
                    MouseUp="Canvas_MouseUp"
                    Background="Transparent"
                    ClipToBounds="True">

            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>

            <!--nested collection-->
            <ItemsControl Height="512" Width="512" HorizontalAlignment="Center" VerticalAlignment="Center" ItemsSource="{Binding ImageSource}" ClipToBounds="True">

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Background="Transparent"  
                                Height="512" 
                                Width="512" 
                                HorizontalAlignment="Center" 
                                VerticalAlignment="Center"
                                ClipToBounds="True">
                            <Canvas.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=maskDataBinding}"/>
                            </Canvas.OpacityMask>
                        </Canvas>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Name}"
                        Width="{Binding Width}"
                        Height="{Binding Height}"
                        Opacity="{Binding Opacity}">
                            <Image.RenderTransform>
                                <TransformGroup>
                                    <TranslateTransform X="{Binding OffsetX}" Y="{Binding OffsetY}"/>
                                    <RotateTransform CenterX="{Binding CenterX}" CenterY="{Binding CenterY}" Angle="{Binding Angle}"/>
                                </TransformGroup>
                            </Image.RenderTransform>
                        </Image>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我的画布实际上只是一组画布(每个画布模拟一层)。每个画布都有一组图像。您可以看到，我在嵌套集合的画布中绑定了OpacityMask。

编辑：所以我的假设是正确的。当我接近边框时，它会使图像倾斜，因为画布的宽度(如果你靠近左右边框)和高度(如果你靠近顶部/底部边框)会变宽，所以面具会被拉伸。对解决方案/解决办法有什么想法吗？

这是另一个礼物。我去掉了不透明的面具，所以现在我只是在画布上画画。我还把ClipToBounds=False放在我的画布上。不透明遮罩被应用在这个未剪裁的画布上，不管ClipToBounds是假的还是真的。

​

Answer 1

我想通了。我只需要将OpacityMask应用于画布的任何父级。OpacityMask可以看到画布上的所有东西，甚至是赏金之外的东西(ClipToBounds设置为真假与此无关)。画布的父(在我的例子中是实际的ItemsControl)消除了画布边界之外的任何信息，这就是为什么将掩码应用于父工作的原因。

<!--nested collection-->
<ItemsControl Height="512" Width="512" HorizontalAlignment="Center" VerticalAlignment="Center" ItemsSource="{Binding ImageSource}" >

    <ItemsControl.ItemsPanel>

        <ItemsPanelTemplate>

            <Canvas Name="paintingCanvas"
                    Background="Transparent"  
                    Height="512" 
                    Width="512" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center"
                    ClipToBounds="True">
            </Canvas>
        </ItemsPanelTemplate>

    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Name}"
        Width="{Binding Width}"
        Height="{Binding Height}"
        Opacity="{Binding Opacity}">
                <Image.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{Binding OffsetX}" Y="{Binding OffsetY}"/>
                        <RotateTransform CenterX="{Binding CenterX}" CenterY="{Binding CenterY}" Angle="{Binding Angle}"/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=maskDataBinding}"/>
    </ItemsControl.OpacityMask>
</ItemsControl>