6

嗨，我现在正在用 C++ 编写一个 win32 应用程序，但我真的很难放大窗口的内容。这是我开始完成缩放的伪代码：

// point One
int XPointOne = -200;
int YPointTwo = 0;

// point Two
int XPointTwo = 200;
int YPointTwo = 0;

// Draw point function.
DrawPoint(XCoordinate * ScalingFactor, YCoordinate * ScalingFactor) {
    ....
}

我的坐标系设置为使其原点位于窗口的中心。我想在使用鼠标滚轮时进行缩放。上述解决方案的问题是缩放总是从窗口的中心发生。当您的鼠标不在窗口的中心时，这有点难看。我想放大鼠标所在的区域，但我找不到合适的算法来计算 x 和 y 方向的偏移量。例如，如果鼠标具有坐标 (-200, 0)，则点 1 应具有坐标 (-200, 0)，点 2 应具有坐标 (600, 0)，且比例因子为 2。我已经尝试了很多东西，但没有让它工作，尤其是当鼠标在缩放之间移动到其他位置时，一切都搞砸了。任何人都知道如何解决这个问题？

这是我的应用程序的一些示例代码。第一个片段是我处理 WM_MOUSEWHEEL 消息的回调函数。

VOID OnMouseWheel(WPARAM const& WParam, LPARAM const& LParam) {
    if(GET_WHEEL_DELTA_WPARAM(WParam) > 0)
    {
        // Zoom in
        Draw.ScaleFactor += 0.1;
    }
    else
    {
         // Zoom out
    }
}

Draw 只是一个包装 GDI 函数的类。它有一个比例因子成员。下面的代码片段是我的 Draw 对象的 DrawCircle 成员函数，它使用比例因子在屏幕上正确显示圆。

VOID DrawCircle(DOUBLE const& XCoordinate, DOUBLE const& YCoordinate, DOUBLE const& Radius, COLORREF const& Color) {
    HBRUSH Brush = CreateSolidBrush(Color);
    HBRUSH OldBrush = (HBRUSH)SelectObject(this->MemoryDC, Brush);

    Ellipse(this->MemoryDC, (INT) ((XCoordinate - Radius) * this->ScaleFactor), 
        -(INT)((YCoordinate + Radius) * this->ScaleFactor), 
         (INT)((XCoordinate + Radius) * this->ScaleFactor), 
        -(INT)((YCoordinate - Radius) * this->ScaleFactor)); 
    SelectObject(this->MemoryDC, OldBrush);
    DeleteObject(Brush);
 }

如您所见，我的 DrawCircle 函数在应用当前比例因子时没有考虑鼠标位置。

编辑

好的，我更接近解决方案这里是我的鼠标回调函数的更新版本。

VOID OnMouseWheel(WPARAM const& WParam, LPARAM const& LParam) {
    // Get Mouse position in real coordinates and not window coordinates.
    INT XOffset = (Window.GetClientWidth() / -2) + XMousePos;
    INT YOffset = (Window.GetClientHeight() / 2) - YMousePos;


    if(GET_WHEEL_DELTA_WPARAM(WParam) > 0)
    {
        Draw.ScaleFactor += 0.1;
        Draw.XOffsetScale = -XOffset * (Draw.ScaleFactor - 1.0);
        Draw.YOffsetScale = YOffset * (Draw.ScaleFactor - 1.0);
    }
    else
    {
        // ...
    }
}

这是绘制圆圈的函数。

VOID DrawCircle(DOUBLE const& XCoordinate, DOUBLE const& YCoordinate, DOUBLE const& Radius, COLORREF const& Color) {
        HBRUSH Brush = CreateSolidBrush(Color);
        HBRUSH OldBrush = (HBRUSH)SelectObject(this->MemoryDC, Brush);

        Ellipse(this->MemoryDC, (INT) ((XCoordinate - Radius) * this->ScaleFactor + XOffsetScale) , 
            -(INT)((YCoordinate + Radius) * this->ScaleFactor - YOffsetScale), 
            (INT)((XCoordinate + Radius) * this->ScaleFactor + XOffsetScale), 
            -(INT)((YCoordinate - Radius) * this->ScaleFactor - YOffsetScale)); 
        SelectObject(this->MemoryDC, OldBrush);
        DeleteObject(Brush);
 }

只要我将鼠标保持在同一位置，这确实有效，但是当我移动到另一个位置时，它不会按预期缩放一次，然后它会再次正确缩放。也许这有点帮助。

提前致谢！

解决了

好的，我现在解决了我的问题。我只是根据鼠标位置乘以缩放因子移动了坐标系的原点。感谢您的回答。

4

3 回答 3

9

最“通用”的解决方案使用矩阵变换，但这里有一个简化的解释。以下伪代码可能会对您有所帮助：

/*
    VARIABLES (all in space coordinates, not pixel coordinates):

      input:
        viewRect = rectangle of the viewed area
        zoomFactor = factor of zoom relative to viewRect, ex 1.1
        mousePos = position of the mouse

      output:
        zoomedRect = viexRect after zoom
*/

/*
    A little schema:

      viewRect
    *-----------------------------------------------------------------------*
    |                       ^                                               |
    |                       | d_up                                          |
    |        zoomedRect     v                                               |
    |      *-----------------------------------------*                      |
    |d_left|                                         |       d_right        |
    |<---->|                mousePos                 |<-------------------->|
    |      |                    +                    |                      |
    |      |                                         |                      |
    |      |                                         |                      |
    |      *-----------------------------------------*                      |
    |                       ^                                               |
    |                       |                                               |
    |                       |                                               |
    |                       | d_down                                        |
    |                       |                                               |
    |                       v                                               |
    *-----------------------------------------------------------------------*

    dX = d_left + d_right
    dY = d_up + d_down
    The origin of rects is the upper left corner.
*/

/*
    First, find differences of size between zoomed rect and original rect
    Here, 1 / zoomFactor is used, because computations are made relative to the
    original view area, not the final rect):
*/
dX = viewRect.width * (1 - 1 / zoomFactor)
dY = viewRect.height * (1 - 1 / zoomFactor)

/*
    Second, find d_* using the position of the mouse.
    pX = position of the mouse along X axis, relative to viewRect (percentage)
    pY = position of the mouse along Y axis, relative to viewRect (percentage)
    The value of d_right and d_down is not computed because is not directly needed
    in the final result.
*/
pX = (mousePos.X - viewRect.X) / viewRect.width
pY = (mousePos.Y - viewRect.Y) / viewRect.height

d_left = pX * dX
d_up = pY * dY

/*
    Third and last, compute the output rect
*/
zoomedRect = viewRect
zoomedRect.X += d_left
zoomedRect.Y += d_up
zoomedRect.width -= dX
zoomedRect.height -= dY

// That's it!

对于您的问题，您需要将视图（您的窗口）与场景（绘制的对象）分开。您应该有一个绘制部分（或全部）场景的函数：

void drawScene(Rect viewArea);

和一个缩放区域的函数（使用前面介绍的算法）：

Rect zoomArea(Rect rectToZoom, Point zoomCenter, double factor);

现在，您的回调要简单得多：

VOID OnMouseWheel(WPARAM const& WParam, LPARAM const& LParam)
{
    // Get the position of the mouse relative to the window (in percent)
    double XMouseRel = XMousePos / double(Window.GetClientWidth());
    double YMouseRel = YMousePos / double(Window.GetClientHeight());

    // Get Mouse position in scene coordinates and not window coordinates.
    // viewArea is in scene coordinates
    // window = your window or your draw information on the scene
    // The following assumes that you're using a scene with X left-to-right and
    // Y top-to-bottom.
    double XMouse = window.viewArea.width * XMouseRel + window.viewArea.upperleft.X;
    double YMouse = window.viewArea.height * YMouseRel + window.viewArea.upperleft.Y;

    // Zoom parameters
    double zFactor = 0.1 * GET_WHEEL_DELTA_WPARAM(WParam);
    Rect viewArea = getViewArea(); // or something like this
    Point zCenter(XMouse,YMouse);

    // Zoom
    Rect zoomedRect = zoomArea(viewArea,zCenter,zFactor);
    drawScene(zoomedRect);
}
于 2012-11-09T23:15:28.010 回答
7

您正在尝试在平面中实现仿射变换的子集。在您的情况下，您只需要结合绘图平面的平移和缩放（缩放）。平面中仿射变换的全部可能性涉及使用 3 维矩阵，但现在我只给出您的问题所需的最小值。随意在网上查找完整的主题，这方面的文献很多。

首先，我们将声明一个 2D 向量和一些运算符：

  class vector2D {
  protected:
      /* here your class implementation details */
  public:
      vector2D(const vector2D &v);
      vector2D(float x, float y) { /* ... */ }
      vector2D operator +(const vector2D &v) const { /* ... */ }
      vector2D operator -(const vector2D &v) const { /* ... */ }
      vector2D operator *(float v) const { /* ... */ }
      bool operator ==(const vector2D &v) const { /* ... */ }
      const vector2D &operator = (const vector2D &v) { /* ... */ }
  };

我会让你填空，或者如果你有自己的班级的话。请注意，此接口可能不是最佳的，但我想专注于算法，而不是性能。

现在，让我们介绍一下显示转换：

我们将zf缩放因子、trans转换的平移部分和origin原点称为窗口中的视图。您提到您的坐标系统位于窗口的中心，因此原点将是窗口屏幕的中心。从视图系统到窗口坐标的转换可以分解为两个独立的阶段：一个是显示对象的缩放和平移，我们称之为modelview，一个是从视图坐标到窗口坐标，我们称之为投影。如果您熟悉 3D 渲染，则可以将其视为类似于 OpenGL 中使用的机制。

投影可以描述为从窗口左上角到origin视图左上角的简单转换。

  vector2D project(const vector2D &v){
      return v + origin;
  }

模型视图结合了平移和缩放（此时，UI 代码将只处理任意点的缩放）。

  vector2D modelview(const vector2D &v){
      return trans + (v * zf);
  }

我会让你以最方便的方式组织这些函数和相关数据（ zf, centre, ）。trans

接下来，让我们看看 UI 应该如何修改不同的数据。

基本上，您需要将点坐标从放置在视图中心的坐标系更改为以缩放点为中心的系统，然后缩放它们的新坐标，然后返回视图中心。您要绘制的每个对象都必须经历这种转换。

那么公式是：

v' = (v + zp) * s - zp

其中zp是缩放点，s是缩放因子，v是系统中要转换的点的坐标，因此v'是生成的缩放点。

如果要在不同的地方进行链式缩放，则需要考虑到前面的缩放因子和中心：

如果c是新的缩放中心，t是当前的平移，z是当前的缩放因子，z2是新的缩放因子，那么我们可以计算新的全局变换：

t' = t + c * (1 - z2) z' = z * z2

这些是通过将坐标系移动到缩放中心、对变换应用缩放并返回原点而得出的。

关于缩放中心，您必须注意鼠标输入将在窗口坐标系中，因此必须转换回您的视图系统（以 为中心origin）。以下unproject函数正是这样做的：

 vector2D unproject(const vector2D &v){
     return v - origin;
 }

最后，让我们有一个根据新输入转换模型视图转换的函数的简单实现：

 void onMouseWheel(float mouseX, float mouseY, bool zoom_in){
     float z2 = zoom_in? 1.1 : 1/1.1;
     vector2D m(mouseX,mouseY);
     if (! (m == origin)) { // this is very likely
         trans = trans + unproject(m) * (1.0 - z2);
     }
     zf *= z2;
     // here perhaps have a redraw event fired
 }

如您所见，我提供了或多或少的通用代码，您必须适应 Win32 API 的特殊性。

于 2012-11-10T00:57:26.480 回答
0

您要做的是平移坐标，使鼠标点位于 (0,0)，缩放坐标，然后将 (0,0) 偏移回鼠标坐标。

Ellipse(this->MemoryDC, (INT) (((XCoordinate - XMouse) - Radius) * this->ScaleFactor) + XMouse, 
    -(INT)(((YCoordinate - YMouse) + Radius) * this->ScaleFactor) + YMouse, 
     (INT)(((XCoordinate - XMouse) + Radius) * this->ScaleFactor) + XMouse, 
    -(INT)(((YCoordinate - YMouse) - Radius) * this->ScaleFactor) + YMouse);
于 2012-11-09T23:22:53.887 回答