Question

我正在尝试将画布保存为图像this代码

我的画布高度和宽度为500,500，其剪裁坐标也为500,500

 <Canvas x:Name="DrawCanvas"  Width="500" Grid.ColumnSpan="2" Grid.Row="1" Height="500" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="DrawCanvas_Tapped">
            <Canvas.Clip>
                <RectangleGeometry Rect="0,0,500,500"></RectangleGeometry>
            </Canvas.Clip>
        </Canvas>

但是当我将图像添加为高度和宽度为600,600的子图像然后保存时，Canvas也会通过用黑色覆盖额外的空间然后保存它来保存该部分。如何解决这个问题，我希望只保存那些对用户可见的部分。感谢。

Answer 1

默认情况下，canvas不会剪切其子节点，因此您可能需要启用相同的

所以在画布中设置ClipToBounds="True"

例如

    <Canvas ClipToBounds="True" x:Name="DrawCanvas" Width="500" Grid.ColumnSpan="2" Grid.Row="1" Height="500" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="DrawCanvas_Tapped">
        <Canvas.Clip>
            <RectangleGeometry Rect="0,0,500,500"></RectangleGeometry>
        </Canvas.Clip>
    </Canvas>

如果上述方法不足以满足您的需要，那么您可能需要在渲染到图像之前进行画布布局

    c.Measure(new Size(500, 500));
    c.Arrange(new Rect(0, 0, 500, 500));

如果您只在代码中创建画布，而不是在窗口或其他容器的可视树中创建元素，则可能只需要上面的

。

Answer 2

最后通过使用这个xaml代码解决了我自己。我创建了DrawCanvas的另一个画布父级并保存

<Canvas x:Name="Rect" HorizontalAlignment="Center" VerticalAlignment="Center" Width="auto" Height="auto" Background="{x:Null}">

            <Canvas x:Name="DrawCanvas" Width="500" Height="500" Background="White">
                <Image x:Name="MyImg" Tapped="MyImg_Tapped" ManipulationDelta="MyImg_ManipulationDelta" ManipulationMode="TranslateX,TranslateY,Scale" Width="200" Height="200" Source="Assets/8.png">
                    <Image.RenderTransform>
                        <CompositeTransform></CompositeTransform>
                    </Image.RenderTransform>
                </Image>

            </Canvas>
        </Canvas>

并且只保存rect Canvas，它只提供正在使用的图像。

Before After

Answer 3

请为DrawCanvas制作父画布：

        <Canvas x:Name="DrawCanvas" Width="500" Height="500" Background="White">
            <Image x:Name="MyImg" Tapped="MyImg_Tapped" ManipulationDelta="MyImg_ManipulationDelta" ManipulationMode="TranslateX,TranslateY,Scale" Width="200" Height="200" Source="Assets/8.png">
                <Image.RenderTransform>
                    <CompositeTransform></CompositeTransform>
                </Image.RenderTransform>
            </Image>

        </Canvas>
    </Canvas>

希望这对你有用

在Windows应用商店应用中仅保存画布的剪切区域

3 个答案: