从鼠标位置设置X坐标

Question

我有一个darkBlueRect矩形精灵和一个相同精灵的副本，它具有更大的比例和更浅的颜色 - lightBlueRect。

当鼠标移过lightBlueRect时，我试图根据mouse.x位置移动darkBlueRect的位置。这样，如果鼠标位于darkBlueRect的右侧，则放大的lightBlueRect的位置将位于相对侧，并向左移动，与鼠标位置和比例成比例。此外，lightBlueRect必须显示为“锁定”darkBlueRect，因此lightBlueRect.x必须永远不会超过darkBlueRect.x且lightBlueRect.x + lightBlueRect.width必须永远不会低于darkBlueRect.x + darkBlueRect.width 1}}。

下图描绘了我试图完成的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。

每次鼠标更改x位置超过darkBlueRect时，都会调用以下内容。然而，虽然我目前的代码大部分都有效，但它并不完全正确。当mouse.x超过darkBlueRect.x = 1时，如状态A所示，lightBlueRect.x未与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)。）