logo标签列表

不透明度掩码会忽略ClipToBounds为True

c#wpfimagegraphicswpf-controls
3
我有一个“遮罩画布”，我正在上面绘画，将其用作我的主要绘画画布的OpacityMask的源。
我的两个画布大小相同，但是当我开始在画布边界附近绘画时，出现了一些意外的结果。
我创建了一个gif来说明我的问题： enter image description here 在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绑定在嵌套集合的画布内部。
编辑： 所以我的假设是正确的。当我靠近边界时，它会扭曲图像，因为绘画画布的宽度增加了（如果你靠近左/右边界），高度也增加了（如果你靠近顶部/底部边界），所以蒙版被拉伸了。有任何解决方案或解决方法吗？ 这里还有一个gif。我删除了不透明度蒙版，所以现在我只是在画布上画画。我还在我的绘画画布上设置了ClipToBounds=False。无论ClipToBounds是false还是true，不透明度蒙版都应用于此未剪辑的绘画画布。
添加一些边框以帮助您了解正在发生的情况。 - Robert Levy
@RobertLevy 是针对绘图画布还是我正在绘制的图像？ - Deniz Cetinalp
1
边框应用于所有元素，颜色不同。 - Robert Levy
1个回答
0
我解决了。我只需要将 OpacityMask 应用于 Canvas 的任何父级即可。OpacityMask 可以看到画布上的所有内容，即使超出边界（ClipToBounds 设置为 True 或 False 都无关紧要）。Canvas 的父级（在我的情况下是实际的 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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接