设置从鼠标位置的x坐标 [英] Setting X Coordinate from Mouse Location

问题描述

我有一个 darkBlueRect 矩形精灵和相同的精灵具有较大规模和较亮的颜色的副本 - lightBlueRect 。

i have a darkBlueRect rectangle sprite and a copy of the same sprite with a larger scale and a lighter color - lightBlueRect.

我试图转移 lightBlueRect 按 mouse.x 位置鼠标时的位置正在通过 darkBlueRect 。如果这样，鼠标在右侧的 darkBlueRect 比的位置，扩大了 lightBlueRect 将上相对侧并移向左边相称鼠标位置和规模。此外， lightBlueRect 必须出现锁定到 darkBlueRect 让 lightBlueRect.x 绝不能超过 darkBlueRect.x 和 lightBlueRect.x + lightBlueRect.width 绝决小于 darkBlueRect.x + darkBlueRect.width 。

i'm attempting to shift the location of the lightBlueRect according to the mouse.x location when the mouse is moving over the darkBlueRect. this way if the mouse is on the right of the darkBlueRect than the location of the scaled up lightBlueRect will be on the opposite side and shifted towards the left proportionate to the mouse position and scale. in addition, the lightBlueRect must appear "locked" to the darkBlueRect so lightBlueRect.x must never be more than darkBlueRect.x and lightBlueRect.x + lightBlueRect.width must never be less than darkBlueRect.x + darkBlueRect.width.

下面的图片描述了什么，我试图完成3状态：

the image below depicts 3 states of what i'm attempting to accomplish:

1. 状态A： mouse.x 超过 darkBlueRect.x = 1 和这两个精灵是左对齐
2. 在B国： mouse.x 是 darkBlueRect 的中间，这两个精灵对准中间。
3. 状态C： mouse.x 是 darkBlueRect 的最后一个像素和两个精灵都靠右对齐，

1. State A: mouse.x is over darkBlueRect.x = 1 and both sprites are aligned to the left.
2. State B: mouse.x is in the middle of darkBlueRect and both sprites are aligned to the middle.
3. State C: mouse.x is on the last pixel of darkBlueRect and both sprites are aligned to the right.

在这个例子中， darkBlueRect.width 等于 170 和 lightBlueRect .WIDTH 等于 320 ，或规模 1.89 。

for this example, the darkBlueRect.width is equal to 170 and the lightBlueRect.width is equal to 320, or a scale of 1.89.

每次鼠标改变它的 X 在 darkBlueRect 位置下面被调用。不过，虽然我目前的code ++工程，在大多数情况下，这是不完全正确的。当 mouse.x 超过 darkBlueRect.x = 1 ，如图A国，在 lightBlueRect.x 不是财产对准 darkBlueRect 并出现小于 darkBlueRect.x 。

each time the mouse changes it's x position over darkBlueRect the following is called. however, while my current code works for the most part, it's not exactly correct. when the mouse.x is over darkBlueRect.x = 1, as shown in State A, the lightBlueRect.x is not property aligned with darkBlueRect and appears less than darkBlueRect.x.

var scale:Number = 1.89;

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

什么公式我可以使用，这样无论 lightBlueRect 这是第一个位置（鼠标移到第一像素）和最后一个位置（鼠标比去年像素）的规模将导致在2精灵对齐以及物业比例的定位介于两者之间？

what equation can i use so that no matter the scale of the lightBlueRect it's first position (mouse over first pixel) and last position (mouse over last pixel) will result in the 2 sprites being aligned as well as property proportionate positioning in between?

的darkBlueRect的坐标是{0，0}，所以当lightBlueRect走向离开它正在走向负面。我可以简单地写我的code（有什么不工作），而不是像这样：

the coordinates of the darkBlueRect is {0, 0}, so when the lightBlueRect moves towards the left it is moving into the negative. i could have simply written my code (what doesn't work) like this instead:

var scale:Number = 1.89;

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

---

当显示对象是小的，问题是难以察觉。然而，当它们是大的问题变得明显移动。的问题，在此，在于在左侧的对象是未对齐的。

---

when the display objects are small, the problem is difficult to notice. however, when they are large the problem becomes move obvious. the problem, here, being that the objects on the left side are misaligned.

也是这个问题的事实，无论是 lightBlueRect 和 darkBlueRect 具有可扩展性很可能激怒。 darkBlueRect 按比例缩小和 lightBlueRect 被放大。

also the problem is probably exasperated by the fact that both the lightBlueRect and darkBlueRect are scalable. darkBlueRect is scaled down and lightBlueRect is scaled up.

下面是一个链接，显示问题的考验。很快鼠标放在形状显然会导致不准确的定位，因为它是基于帧速率的速度，但是这不是我关心的。然而，当你慢慢鼠标的形状左边就不会正确对齐，当鼠标移动到 darkBlueRect 的第一个像素： http://www.geoffreymattie.com/test/test.html

here is a link to the test displaying the problem. mousing over the shape quickly will obviously result in inaccurate alignment since it's based on frame rate speed, but this is not my concern. still, when you slowly mouse over the shape it will not align correctly on the left side when the mouse is over the first pixel of 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;
}

我相信的问题是，形状的缩放。

i believe the problem is that the scaling of the shapes.

推荐答案

假设你有一个钳功能得心应手，而且宽度是浮点，使除按预期工作：

Assuming you have a Clamp function handy, and that width is floating-point so that division works as expected:

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

（您可以定义夹（X，M，M）= MIN（MAX（X，M），M）如果你没有一个。）

(You can define Clamp(x, m, M) = min(max(x, m), M) if you don't have one.)

这篇关于设置从鼠标位置的x坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！