使用鼠标调整框大小,同时保持纵横比

本文关键字:鼠标 调整 | 更新日期: 2023-09-27 18:31:09

我正在尝试创建一个可调整大小的图像叠加层(用于裁剪目的)。 如果我忽略纵横比,调整叠加层的大小似乎很容易,但我无法弄清楚如何执行尊重 AR 的受限大小调整。 我认为我显然无法服从叠加层的"抓地力"位置(甚至边框),除非我强迫鼠标跟随它,但这似乎不自然,所以我只需要依靠鼠标手势(我不介意这样做)。

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

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

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

我在这个代码片段中省略了很多细节,并使用布尔值简化了一些条件。

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

使用鼠标调整框大小,同时保持纵横比

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

您给出的示例链接只是根据向下单击选择一个起点,然后选择 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);

请注意,其中一个长度可以大于鼠标位置,但永远不会小于。这将具有鼠标沿着新裁剪框边缘移动的效果,以及框保持比率。

我已经弄清楚了导致代码中原始问题的原因。 与静态图像大小调整不同,纵横比代码取决于您"握住"的握把,因此在所有情况下(例如,设置握把位置时)将其放在公共位置将不起作用。 您可以在下次更新时轻松计算矩形的大小,但位置应根据所握持的夹点进行设置。

例如,如果通过按住左上角的夹点来调整大小,则裁剪矩形的底部和右侧应保持静止。 如果保持代码不变,则矩形会正确调整大小,但它会在画布周围移动和/或夹点与矩形的角不同步。 可能有更好的方法可以做到这一点,但这里有一些粗略的代码可以工作。 我只包含右下角和左上角夹点的代码来说明差异。 省略了设置鼠标指针和错误检查等无关紧要的事情。

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    Point mousePosition = new Point(e.X, e.Y);
    if (e.Button == MouseButtons.Left)
    {
        // This resizeMode, moveMode and other booleans
        // are set in the MouseUp event
        if (resizeBottomLeft)
        {
            // Top and Right should remain static!
            newCropRect.X = mousePosition.X;
            newCropRect.Y = currentCropRect.Y;
            newCropRect.Width = currentCropRect.Right - mousePosition.X;
            newCropRect.Height = mousePosition.Y - newCropRect.Top;
            if (newCropRect.X > newCropRect.Right)
            {
                newCropRect.Offset(cropBoxWidth, 0);
                if (newCropRect.Right > ClientRectangle.Width)
                    newCropRect.Width = ClientRectangle.Width - newCropRect.X;
            }
            if (newCropRect.Y > newCropRect.Bottom)
            {
                newCropRect.Offset(0, -cropBoxHeight);
                if (newCropRect.Y < 0)
                    newCropRect.Y = 0;
            }
            // Aspect Ratio + Positioning
            if (newCropRect.Width > newCropRect.Height)
            {
                newCropRect.Height = (int)(newCropRect.Width / ASPECT_RATIO);
            }
            else
            {
                int newWidth = (int)(newCropRect.Height * ASPECT_RATIO);
                newCropRect.X = newCropRect.Right - newWidth;
                newCropRect.Width = newWidth;
            }
        }
        else if (resizeTopRight)
        {
            // Bottom and Left should remain static!
            newCropRect.X = oldCropRect.X;
            newCropRect.Y = mousePosition.Y;
            newCropRect.Width = mousePosition.X - newCropRect.Left;
            newCropRect.Height = oldCropRect.Bottom - mousePosition.Y;
            if (newCropRect.X > newCropRect.Right)
            {
                newCropRect.Offset(-cropBoxWidth, 0);
                if (newCropRect.X < 0)
                    newCropRect.X = 0;
            }
            if (newCropRect.Y > newCropRect.Bottom)
            {
                newCropRect.Offset(0, cropBoxHeight);
                if (newCropRect.Bottom > ClientRectangle.Height)
                    newCropRect.Y = ClientRectangle.Height - newCropRect.Height;
            }
            // Aspect Ratio + Positioning
            if (newCropRect.Width > newCropRect.Height)
            {
                int newHeight = (int)(newCropRect.Width / ASPECT_RATIO);
                newCropRect.Y = newCropRect.Bottom - newHeight;
                newCropRect.Height = newHeight;
            }
            else
            {
                int newWidth = (int)(newCropRect.Height * ASPECT_RATIO);
                newCropRect.Width = newWidth;
            }
        }
        else if (moveMode) //Moving the rectangle
        {
            newMousePosition = mousePosition;
            int dx = newMousePosition.X - oldMousePosition.X;
            int dy = newMousePosition.Y - oldMousePosition.Y;
            currentCropRect.Offset(dx, dy);
            newCropRect = currentCropRect;
            oldMousePosition = newMousePosition;
        }
        if (resizeMode || moveMode)
        {
            oldCropRect = currentCropRect = newCropRect;
            // Set the new position of the grips
            AdjustGrips();
            pictureBox1.Invalidate();
            pictureBox1.Update();
        }
    }
}