C# 中的交互式缩放 2D 图形位图

Question

我编写了一个程序，可以从 xml 文件中读取一些二极管曲线的电压和电流值，并将它们绘制在屏幕上（只需使用普通的 2D 图形和一些简单的命令，如 DrawCurve 等）。

我的主图像帧是 800 x 800 像素（您可以在下面看到较小的屏幕截图）。现在我想添加一个缩放功能，当我将鼠标悬停在该图像区域上时，会弹出一个飞行的小方块，并在将鼠标移动到该区域上时放大+移动。

我不知道如何处理这个问题。当然，我不会询问完整的工作代码，但请帮助我越来越接近！

例如，我可以在不读取曲线数据和实时绘制的情况下进行缩放吗？还是无法逃脱？当我将鼠标移到原始图像上时，如何才能有一个悬停图像框？

谢谢！

Answer 1

您是否计算过 DrawCurve 需要多长时间？也许它足够快，可以实时完成。不要忘记，GDI 会将绘图基元剪切到绘图区域。您只需在移动鼠标时设置一个剪切矩形即可。

要加快重绘速度，请将主窗口图像（您粘贴的图像）创建为离屏位图，然后在绘制事件中将离屏版本 DrawImage 绘制到窗口。这样您就可以减少 DrawCurve 的影响。

最后，为了获得好看的结果，请重载 OnPaintBackground（无法准确记住名称，但它是类似的东西），因此它不执行任何操作（甚至不调用基类）并在其中完成所有绘画使用 BufferedGraphics 对象的 OnPaint 方法。

更新

您的绘图函数可能如下所示：

OnPaint (...)
{
  the_graphics_object.DrawImage (the background image);
  the_graphics_object.Clip = new Region (new Rectangle (coords relative to mouse position));
  the_graphics_object.TranslateTransform (drawing offset based on mouse position);
  RenderScene (the_graphics_object, scale_factor); // draws grid and curve, etc
  the_graphics_object.DrawRectangle (zoom view rectangle); // draw a frame around the zoomed view
}

这将产生一个相对于鼠标位置的浮动“窗口”。

Answer 2

通常，在重绘可能非常耗时的情况下，缩放通常通过提供“快速但丑陋”的实现以及“正确但缓慢”的实现来解决。当缩放操作正在积极进行时（例如，当用户单击滑块时，或者直到自上次缩放值发生更改以来 50 毫秒），您使用快速且丑陋的模式，因此用户可以看到预览最终的图像会是什么。一旦他们放开缩放滑块（或您提供的任何机制），您就可以重新详细计算图像。快速版本通常是根据您正在使用的原始图像计算的。

在您的情况下，您可以简单地获取原始图像，计算出新的缩放图像的边界框，并将原始图像的相关部分缩放到完整图像大小。如果 100 毫秒过去了，缩放没有变化，则重新计算整个图像。

这种功能的例子非常普遍：大多数分形生成器都使用这种技术，甚至像 Google StreetView 这样不相关的东西（当你四处移动时，它会提供前一个图像的非常丑陋的扭曲版本，直到实际图像下载完毕）。