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

【问题标题】：Save only clipping areas of canvas in windows store app在 Windows 商店应用程序中仅保存画布的剪切区域
【发布时间】：2014-06-27 04:29:38
【问题描述】：

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

我的 Canvas 高度和宽度是 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 也通过用黑色覆盖额外空间然后保存它来保存该部分。如何解决这个问题，我希望只保存对用户可见的部分。谢谢。

【问题讨论】：

标签： c# xaml winrt-xaml windows-8.1

【解决方案1】：

默认情况下，画布不会剪辑其子项，因此您可能需要启用相同的功能

所以在你的画布中设置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));

仅当您仅在代码中创建画布时才需要上述内容，而不是作为窗口或其他容器的可视树中的元素。

【讨论】：

你明白我要做什么吗？
没有 clipbounds 属性
还是同样的问题。
您可以发布工作样本吗？这将帮助我给你准确的答案。我了解到您只是想从画布中保存剪辑区域的图像。
请给我你的邮箱

【解决方案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>

并且只保存矩形画布，它只提供正在使用的图像。

【讨论】：

【解决方案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>

希望这对你有用

【讨论】：

上面已经回答了