在 C# Winforms 中放大到面板的中间

Question

我有一个可以放大和缩小的应用程序，唯一的问题是我想放大和缩小但专注于面板位置的当前中间位置，而不是使用鼠标位置

有什么想法吗？

private void panel1_Paint(object sender, PaintEventArgs e)
{
    SolidBrush brushs = new SolidBrush(Color.White);
    e.Graphics.Clip = new Region(new Rectangle(0, 0, Viewer.Width, Viewer.Height));
    e.Graphics.FillRegion(brushs, e.Graphics.Clip);

    Graphics g = e.Graphics;
    g.TranslateTransform(_ImgX, _ImgY);
    g.ScaleTransform(_Zoom, _Zoom);
    g.SmoothingMode = SmoothingMode.AntiAlias;
    SolidBrush myBrush = new SolidBrush(Color.Black);
    Pen p = new Pen(Color.Red);
    foreach (CircuitData.ResistorRow resistorRow in ResistorData.Resistor)
    {
        RectangleF rec = new RectangleF((float)(resistorRow.CenterX  - resistorRow.Length/ 2), (float)(resistorRow.CenterY - resistorRow.Width/ 2), (float)resistorRow.Length, (float)resistorRow.Width);
        float orientation = 360 - (float)resistorRow.Orientation;
        PointF center = new PointF((float)resistorRow.CenterX, (float)resistorRow.CenterY);
        PointF[] points = CreatePolygon(rec, center, orientation);
        if (!Double.IsNaN(resistorRow.HiX) && !Double.IsNaN(resistorRow.HiY))
        {
            g.FillEllipse(myBrush, (float)resistorRow.HiX  - 2 , (float)resistorRow.HiY - 2, 4, 4);
            g.DrawLine(p, new PointF((float)resistorRow.HiX , (float)resistorRow.HiY ), center);
    }

    g.FillPolygon(myBrush, points);
}

}

更新 缩放功能，我知道这是错误的，但如果有人可以帮助我修复逻辑或更好的想法。

    private void trackBar1_Scroll(object sender, EventArgs e)
    {
        float oldZoom = _Zoom;
        _Zoom = zoomTrackPad.Value / 10f;

        int x = Math.Abs(Viewer.Width / 2 );
        int y = Math.Abs(Viewer.Height / 2 );

        int oldImageX = (int)(x / oldZoom);
        int oldImageY = (int)(y / oldZoom);

        int newImageX = (int)(x / _Zoom);
        int newImageY = (int)(y / _Zoom);

        _ImgX = newImageX - oldImageX + _ImgX;
        _ImgY = newImageY - oldImageY + _ImgY;

        Viewer.Invalidate();
    }

谢谢

Answer 1

正如您所说，您的缩放逻辑是错误的。由于转换矩阵的工作原理，这是错误的。

变换矩阵一个接一个地附加，如果您正在翻译图像，就好像它已经缩放然后您缩放它，这将改变缩放原点并且不会居中。

我会在这里假设一些事情，如果有什么不对请评论。

假设您的可见区域（面板大小）为 100 * 100 像素，并且您想要 200 * 200 像素的“虚拟”内容大小。我认为您有两个滚动条来替换面板内的内容，如果您只是使用面板大小并且没有滚动条，那么您应该调整计算位移的方式。

因此，您的滚动条范围从 0 到 (panel.(with/height) - content.(width/height))，在这种情况下，范围从 0 到 100。

首先让我们的内容在开始时居中。为了使其居中，我们将 TranslateTransform 应用于 Graphics 对象，其大小为可见区域大小的一半减去虚拟区域大小的一半：

e.Graphics.TranslateTransform(panel.With / 2 - content.Width / 2, panel.Height / 2 - content.Height / 2);

这将使绘图居中，但是，嘿！我们没有使用定位滚动条！

Okokoko，让我们应用这些滚动条偏移量。首先，由于我们的内容居中，将这些滚动条的值设置为其最大值的一半，在我们的示例中，我们应该将它们设置为 50。

现在，正如我们所说，附加了转换，因此，没有什么能阻止您添加新的 TranslateTransform。您只能在一次调用中执行此操作，但为简单起见，我们在两次调用中执行此操作（另外，稍后应用缩放会更好）。

e.Graphics.TranslateTransform(panel.With / 2 - content.Width / 2, panel.Height / 2 - content.Height / 2);
e.Graphics.TranslateTransform(hScrollBar1.Value - (hScrollbar1.Maximum / 2), vScrollBar1.Value - (vScrollbar1.Maximum / 2));

如您所见，我们减去了最大值的一半，我们的内容已经居中，所以当滚动条位于中心时，我们需要应用 0 的平移，范围从 -Maximum / 2 到 Maximum / 2 ，在本例中为 -50 到 50。

好吧，我们现在有一个位于屏幕中心的虚拟内容区域，我们可以在其上进行置换，现在我们需要应用该缩放。

我看到你有一个滚动条，所以让我们按照我们的示例使用它。

滚动条的范围是你的选择，我看到你使用的是 value / 10f，所以如果你的滚动条的范围是 1 到 100，那么你将有一个从 0.1 到 10 的缩放，这是一个不错的开始选择。

现在，让我们将此滚动条设置为 10，以最初进行单一缩放。

现在有趣的部分来了，转换是按照您设置它们的顺序应用的，所以在之前在翻译之前应用缩放和在之后应用缩放是不一样的.

在我们的例子中，我们首先要使内容居中，转换到我们想要查看的位置（滚动条值），然后进行缩放。

e.Graphics.TranslateTransform(panel.With / 2 - content.Width / 2, panel.Height / 2 - content.Height / 2);
e.Graphics.TranslateTransform(hScrollBar1.Value - (hScrollbar1.Maximum / 2), vScrollBar1.Value - (vScrollbar1.Maximum / 2));
float scale = zScrollBar.Value / 10f;
e.Graphics.ScaleTransform(scale, scale);

好的，听起来不错，但请稍等！它会惨败。为什么？因为当我们缩放时，我们的虚拟大小也相对于视图区域（面板大小）进行了放大，所以我们需要将此比例应用于内容大小（因此也应用于滚动条值）：

float scale = zScrollBar.Value / 10f;
e.Graphics.TranslateTransform(panel.With / 2 - ((content.Width / 2) * scale), panel.Height / 2 - ((content.Height / 2) * scale));
e.Graphics.TranslateTransform((hScrollBar1.Value - (hScrollbar1.Maximum / 2)) * scale, (vScrollBar1.Value - (vScrollbar1.Maximum / 2)) * scale);
e.Graphics.ScaleTransform(scale, scale);

最后，我们有一个完全可用的虚拟区域，您可以在其中缩放和移动它的边界。

我对图形有点生疏，所以也许有些计算是错误的，我希望不会，无论如何，这会给你如何做到这一点的大致思路。

干杯！

PD：如果您不想移动虚拟区域而只放大面板的中心，请跳过第二次平移变换，如果您只想放大虚拟区域的当前可见中心使用位移（不缩放它，变换已经有这个逻辑）而不是滚动条值。