在 WPF 中可视化多层图像答案

【问题标题】：Visualising multi-layer image in WPF在 WPF 中可视化多层图像
【发布时间】：2015-07-03 17:21:29
【问题描述】：

我的数据结构有两个字段：

* BackgroundImage (of type Bitmap/Image)
* Points (of type Point2D [])

我的用例如下：用户可以将图像加载到应用程序中。图像出现在用户屏幕上后，他们可能会向其添加点（通过单击鼠标按钮）。这些点应该在图像的顶部可视化，但是如果需要，用户应该可以重新定位它们（例如拖放）。

目前我通过每次用户添加/移动一个点时执行以下操作来解决问题： * 克隆背景图片 * 在克隆图像上绘制所有点（使用 System.Drawing.Graphics） * 返回带有点的克隆图像（将其作为属性公开并绑定到 WPF 中的图像）。

此解决方案的时间性能还可以，但它会消耗大量内存，因为每次我最终都会复制整个图像。我想知道是否有更好的方法来做到这一点（例如，通过使用图层 - 然后我的 BackgroundImage 一直保持不变，而我只修改顶层）。

我的代码很长，但如果需要，请告诉我，我会发布它。

【问题讨论】：

根据实际情况（点数、图像大小），最好将点放置在显示在图像顶部的面板（画布）中。
点数：~30。图像大小：取决于用户的资源（基本上应该能够加载他们硬盘上的任何内容）。我很快就会对你的提示进行尝试。
好的 - 我像这样使用 Canvas + ItemsControl： .... 但是有调整窗口大小时出现问题 - 图像缩放良好，这不适用于画布。有没有办法让它们保持同步（即将画布位置/比例/大小绑定到图像）？
要等量缩放多个元素，您可以将它们全部放在一个网格中，并将此网格放在一个 Viewbox 中。然后 Viewbox 将处理缩放。
我只是快速尝试了一下（错过了时间，抱歉），到目前为止它看起来很有希望。我计划尽快更仔细地研究解决方案。在此之前 - 能够缩放图像的选定部分（当然是点）也很好。我已经使用 ScaleTransform 测试了手动实现并且工作正常，但给我的肩上带来了很多负担。有没有更好的办法？

标签： c# .net wpf image graphics

【解决方案1】：

在内存消耗方面，您描述的方法没有问题，只要您确保图像的旧实例不再被植根，以便 GC 可以删除它们。

但是，在修改克隆图像的时间跨度内，内存占用当然可能是不克隆时最低可能值的两倍。为了减少这种内存消耗，可以使用 UIElements 实现可移动点。这也有助于通过对“drag'n'drop”部分使用 WPF 命中测试来简化实现。由于 UIElement 比 BitmapImage 中的点需要更多内存，因此实际节省的内存取决于 BitmapImage 中的点与可移动点的比率。

要使用 UIElements 实现点，请将 BitmapImage 与 Canvas 一起放在 Panel 中。然后使用 Canvas 作为点的容器，并使用附加属性 Canvas.Top 和 Canvas.Left 设置它们的位置。要使点出现在 BitmapImage 的前面，请设置 Canvas 的Panel.ZIndex。

但如果您发现内存消耗不合理，则应使用内存分析器仔细查看进程的哪些部分实际占用了空间。

【讨论】：