设置鼠标位置的 X 坐标

Question

我有一个 darkBlueRect 矩形精灵和相同精灵的副本，其尺寸更大、颜色更浅 - lightBlueRect。

当鼠标在 darkBlueRect 上移动时，我尝试根据 mouse.x 位置移动 lightBlueRect 的位置。这样，如果鼠标位于 darkBlueRect 的右侧，则放大的 lightBlueRect 的位置将位于另一侧，并与鼠标位置成比例地向左移动和规模。此外，lightBlueRect 必须显示为“锁定”于 darkBlueRect，因此 lightBlueRect.x 绝不能大于 darkBlueRect.x< /code> 和 lightBlueRect.x + lightBlueRect.width 绝不能小于 darkBlueRect.x + darkBlueRect.width。

下图描绘了我试图完成的 3 种状态：

1. 状态 A：mouse.x 超过 darkBlueRect.x = 1 并且两个精灵都向左对齐。
2. 状态 B：mouse.x 位于 darkBlueRect 的中间，并且两个精灵都与中间对齐。
3. 状态 C：mouse.x 位于 darkBlueRect 的最后一个像素，并且两个精灵都向右对齐。

在此示例中，darkBlueRect.width 等于 170 并且 lightBlueRect.width 等于 320 或比例 1.89。

每次鼠标改变其在 darkBlueRect 上的 x 位置时，都会调用以下函数。然而，虽然我当前的代码大部分都可以工作，但它并不完全正确。当 mouse.x 位于 darkBlueRect.x = 1 上方时（如状态 A 所示），lightBlueRect.x 的属性未与 < code>darkBlueRect 并且显示小于 darkBlueRect.x。

var scale:Number = 1.89;

lightBlueRect.x = darkBlueRect.x - Math.round((mouse.x * scale) / darkBlueRect.width * (lightBlueRect.width - darkBlueRect.width));

我可以使用什么方程，以便无论 lightBlueRect 的比例如何，它的第一个位置（鼠标悬停在第一个像素上）和最后一个位置（鼠标悬停在最后一个像素上）都会导致 2 个精灵对齐以及财产比例定位在两者之间？

---

[编辑] darkBlueRect 的坐标为 {0, 0}，因此当 lightBlueRect 向左移动时，它会向负值移动。我可以简单地编写我的代码（什么不起作用），如下所示：

var scale:Number = 1.89;

lightBlueRect.x = 0 - Math.round((mouse.x * scale) / darkBlueRect.width * (lightBlueRect.width - darkBlueRect.width));

---

[编辑2] 当显示对象较小时，该问题很难被注意到。然而，当它们很大时，问题就变得明显了。这里的问题是左侧的对象未对齐。

此外，由于 lightBlueRect 和 darkBlueRect 都是可扩展的，这个问题可能会更加严重。 darkBlueRect 缩小，lightBlueRect 放大。

这是显示问题的测试的链接。快速将鼠标悬停在形状上显然会导致对齐不准确，因为它是基于帧速率速度的，但这不是我关心的。尽管如此，当您慢慢地将鼠标悬停在形状上时，当鼠标悬停在 darkBlueRect 的第一个像素上时，它不会在左侧正确对齐：http://www.geoffreymattie.com/test/test.html

[SWF(width = "1000", height = "600", backgroundColor = "0xCCCCCC")]

import flash.display.Sprite;
import flash.events.MouseEvent;

var downScale:Number = 0.48;
var upScale:Number = 2.64;

var darkBlueRect:Sprite = createSprite();
darkBlueRect.scaleX = darkBlueRect.scaleY = downScale;
darkBlueRect.x = stage.stageWidth / 2 - darkBlueRect.width / 2;
darkBlueRect.y = stage.stageHeight / 2 - darkBlueRect.height / 2;
addChild(darkBlueRect);

var lightBlueRect:Sprite = createSprite();
lightBlueRect.scaleX = lightBlueRect.scaleY = upScale;
lightBlueRect.y = stage.stageHeight / 2 - lightBlueRect.height / 2;
lightBlueRect.x = stage.stageWidth;
lightBlueRect.mouseEnabled = false;
addChild(lightBlueRect);

darkBlueRect.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);

function mouseMoveEventHandler(evt:MouseEvent):void
{
    lightBlueRect.x = darkBlueRect.x + Math.max(0.0, Math.min(darkBlueRect.mouseX / darkBlueRect.width * downScale, 1.0)) * (darkBlueRect.width - lightBlueRect.width);
}

function createSprite():Sprite
{
    var result:Sprite = new Sprite();
    result.graphics.beginFill(0x0000FF, 0.5);
    result.graphics.drawRect(0, 0, 700, 200);
    result.graphics.endFill();

    return result;
}

我认为问题在于形状的缩放。

Answer 1

假设您有一个方便的 Clamp 函数，并且 width 是浮点型，以便除法按预期工作：（

lBR.x = dBR.x + Clamp((mouse.x - dBR.x) / dBR.width, 0, 1) * (dBR.width - lBR.width);

您可以定义 Clamp(x, m, M ) = min(max(x, m), M) 如果你没有的话。）