c# - 在保持纵横比的同时用鼠标调整框的大小？

Question

我正在尝试创建一个可调整大小的图像叠加层(用于裁剪目的)。如果我忽略宽高比，调整叠加层的大小似乎很容易，但我无法弄清楚如何执行尊重 AR 的约束调整大小。我想我显然不能服从叠加层的“握持”位置(甚至边界)，除非我强制鼠标跟随它，但这似乎不自然，所以我只需要依靠鼠标手势(我不不介意这样做)。

我也可以轻松地调整叠加层的大小，然后将其强制调整为适当的尺寸(就像本网站上有关此主题的所有其他问题一样)，但使用鼠标时不是很直观。

这就是我想要的: http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop

我以前写过这样的应用程序，但它是基于浏览器的，所以我使用了一个 javascript 库。这是一个桌面应用程序，我还没有找到合适的库。

我从这个代码片段中遗漏了很多细节，并使用 bool 值简化了一些条件。

private void pbImage_Paint(object sender, PaintEventArgs e)
{
    //Overlay
    e.Graphics.FillRectangle(brushRect, overlayRect);

    // Grips
    e.Graphics.FillRectangle(gripRect, leftTopGrip);
    e.Graphics.FillRectangle(gripRect, rightTopGrip);
    e.Graphics.FillRectangle(gripRect, leftBottomGrip);
    e.Graphics.FillRectangle(gripRect, rightBottomGrip);

    AdjustGrips();

    base.OnPaint(e);
}

public void AdjustGrips()
{
    // The next section only causes the grips to partly obey
    // the AR - the rest of the overlay ignores it
    if (overlayRect.Height * arWidth <= overlayRect.Width)
        overlayRect.Width = overlayRect.Height * arWidth;
    else if (overlayRect.Width * arHeight <= overlayRect.Height)
        overlayRect.Height = overlayRect.Width * arHeight;

    leftTopGrip.X = overlayRect.Left;
    leftTopGrip.Y = overlayRect.Top;

    rightTopGrip.X = overlayRect.Right - rightTopGrip.Width;
    rightTopGrip.Y = overlayRect.Top;

    leftBottomGrip.Y = overlayRect.Bottom - leftBottomGrip.Height;
    leftBottomGrip.X = overlayRect.Left;

    rightBottomGrip.X = overlayRect.Right - rightBottomGrip.Width;
    rightBottomGrip.Y = overlayRect.Bottom - rightBottomGrip.Height;

}


private void pbImage_MouseMove(object sender, MouseEventArgs e)
{
    Point pt = new Point(e.X, e.Y);

    // Details elided


    if (e.Button == MouseButtons.Left && mouseinGrip)
    {
        if (bottomRightIsGripped)
        {
            newOverlayRect.X = overlayRect.X;
            newOverlayRect.Y = overlayRect.Y;
            newOverlayRect.Width = pt.X - newOverlayRect.Left;
            newOverlayRect.Height = pt.Y - newOverlayRect.Top;

            if (newOverlayRect.X > newOverlayRect.Right)
            {
                newOverlayRect.Offset(-width, 0);
                if (newOverlayRect.X < 0)
                    newOverlayRect.X = 0;
            }

            if (newOverlayRect.Y > newOverlayRect.Bottom)
            {
                newOverlayRect.Offset(0, -height);
                if (newOverlayRect.Y < 0)
                    newOverlayRect.Y = 0;
            }

            pbImage.Invalidate();
            oldOverlayRect = overlayRect = newOverlayRect;
            Cursor = Cursors.SizeNWSE;
        }

        // Code for other grips elided
    }   

    AdjustGrips();
    pbImage.Update();
    base.OnMouseMove(e);
}

// Mouse up and down elided

Answer 1

您可以在拖动时完全控制叠加层的新大小。

您提供的示例链接只是根据点击选择起点，然后选择 Max(Abs(pt.x - start.x), Abs(pt.y - start. y))，并以此为基础裁剪正方形。

要使用非平方比，请先对距离进行归一化。

// given known data 
// 
// Point start; 
// The starting location of the mouse down for the drag, 
// or the top left / bottom right of the crop based on if the mouse is 
// left/above the starting point
// 
// Size ratio;
// The ratio of the result crop
//

// pt = (20)x(-20)
// start = (0),(0)
// ratio = (1)x(2)
var dist = new Point(pt.X - start.X, pt.Y - start.Y);

// "normalize" the vector from the ratio
// normalized vector is the distances with respect to the ratio
// ratio is (1)x(2). A (20)x(-20) is normalized as (20),(-10)
var normalized = new Point(dist.X / ratio.Width, dist.Y / ratio.Height);

// In our (20),(-10) example, we choose the ratio's height 20 as the larger normal.
// we will base our new size on the height
var largestNormal = (Math.Abs(normalized.X) > Math.Abs(normalized.Y)
                        ? Math.Abs(normalized.X) : Math.Abs(normalized.Y);

// The calcedX will be 20, calcedY will be 40
var calcedOffset = (largestNormal * ratio.Width, largestNormal * ratio.Height);

// reflect the calculation back to the correct quarter
// final size is (20)x(-40)
if (distX < 0) calcedOffset.X *= -1;
if (distY < 0) calcedOffset.Y *= -1;

var newPt = new Point(start.X + calcedOffset.X, start.Y + calcedOffset.Y);

请注意，其中一个长度可以增长到大于鼠标位置，但绝不会小于。这将产生鼠标沿着新裁剪框的边缘移动的效果，并且框保持比例。