闪光AS3 - 如何居中对象周围规模后点闪光、对象、规模

2023-09-08 15:18:34 作者:红颜无痕伊人

我已经创建了其功能是作为我的地图,并控制去与这让地图上四处走动,并导航到关键点,并放大在以不同的缩放级别的MC。

I've created an mc which functions as my map and controls to go with that which allow the map to be moved around and key points navigated to and zoomed in on at varying zoom levels.

我使用的scaleX和scaleY缩放地图MC和x和y位置的列表,以正确定位地图每一个关键点。

I'm using scaleX and scaleY to scale the map mc and a list of x and y positions to correctly position the map for each key point.

当我想要去某个地方我执行该计算(offsetX和offsetY是屏幕中心):

When I want to go to a certain area I perform this calculation (offsetX and offsetY are the center of the screen):

newX = posX * scale + offsetX;
newY = posY * scale + offsetY;

然后我补间地图顺利扩展的位置和规模,地图移动到正确的位置:

Then I tween the position and scale of the map to smoothly scale and move the map to the correct position:

var tween = new TweenLite(_background, EASING_SPEED, {x:newX, y:newY,scaleX:scale.getScale(),scaleY:scale,ease:EASING_TYPE,onComplete:moveToComplete,onCompleteParams:[room]});

我现在需要实现输入/输出功能的变焦,这就是我挣扎着。变焦应使用屏幕作为规模寄存器点的中心,所以我一直在想沿着以下线的东西,以获得正确的定位:

I now need to implement a zoom in / out function and this is what I'm struggling with. The zoom should use the center of the screen as the reg point for the scale, so I've been trying something along the lines of the following to get the correct positioning:

var newX = offsetX - (offsetX - _background.x) * scale;
var newY = offsetY - (offsetY - _background.y) * scale;

所以,在我的脑海这会从地图相对于屏幕(offsetX,offsetY)的中心点的当前位置的距离,然后扩展的距离由新的规模。

So in my mind this gets the distance from the current position of the map relative to the center point of the screen (offsetX, offsetY) then scales that distance by the new scale.

不过,这显然是错误的,因为它不工作,并在地图上的定位是错误的。

However, this is clearly wrong because it's not working and the positioning of the map is wrong.

我也试着使用变换矩阵,以获得正确的价值观,但我知道的就更少了对他们也没有得到正确的结果。

I've also tried using a transform matrix to get the correct values but I know even less about them and not got the right results.

function scale(target:MovieClip, center:Point, scale:Number):Point {
    var m:Matrix = new Matrix();
    m.translate(-center.x, -center.y);//move the center into (0,0)
    m.scale(scale, scale);//scale relatively to (0,0) (which is where our center is now)
    m.translate(center.x, center.y);//move the center back to its original position
    return m.transformPoint(new Point());//transform (0,0) using the whole transformation matrix to calculate the destination of the upper left corner
}

如果有人能阐明我要去哪里错了一些光,我会非常感激!

If someone could shed some light on where I'm going wrong, I'd be really grateful!

推荐答案

我有,我想在图像上的图像的中心旋转时,我改变了图像旋转,而是整个图像将会以0旋转一个类似的问题,0点。 在这两种情况下,(我和你)有2个工作围绕这一点。 第一种方法是将用数学其设置在缩放改变。

I had a similar issue where I wanted the image to rotate on the center of the image when I changed the image rotation but instead the image would rotate around the 0,0 point. In both cases( yours and mine ) there are 2 work around for this. The first approach would be to set it with math when the scaling changes.

var newX = stage.width/2 - _background.width/2
var newY = stage.height/2- _background.height/2

曾经装将不需要额外的code中的另一种方式。 添加另一个影片剪辑内_background在影片剪辑的图像会。 这个图像将被定位以在0,0点代替的图像被0,0的左上的中心点。 所以基本上

The other way which once loaded will require no additional code. Add another movieClip inside _background in that movieclip the image will go. This image will be positioned with the center point at the 0,0 point instead of the topleft of the image being 0,0. So basically

image.x = -(image.width/2)
image.y = -(image.height/2)

这将适用于缩放的图像的中心居中的所有的图像和旋转。

This will work for scaling and rotation of the image all centering on the center of the image.

好了,所以你需要做的是开始一个新项目,创造这样的图。

Ok so what you need to do is start a new project and create something like this diagram.

将图像中的容器的movieclip 图像和容器将具有相同的高度和宽度 移动图像,它的中心是在0,0点了MovieClip 的 把容器在舞台上。 在单击事件2按钮添加.1对方substract .1到容器上规模。 现在运行测试 正如你所看到的scaleing集中在图像上 现在测试2打开容器,更左拖动图像 再次运行测试。 你看到的图像是现在扩展和缩小到中心的右侧(在这里你拖着对面)。 因此,要概括起来的偏移量是从图像中心逆向运动。(+ 2分,如果你明白一个)

Put the image in a container movieclip The image and the container will have the same height and width Move the image so the center of it is at the 0,0 point of the MovieClip Put the container on stage. 2 buttons on click event add .1 the other to substract .1 to the scale on the container. Now run the test As you can see the scaleing is centered on the image Now for test 2 open up the container and drag the image more left Run the test again. You see the image is now scaling in and out to the right of center(opposite of where you dragged). So to sum it up the offset is inverse movement from the center of the image.(+2 points if you understand that one)

image.x = -(image.width/2) - offsetX
image.y = -(image.height/2) - offsetY

注:比例将适用于所述容器而不是图像的地方直接作为影像的移动仍然会image.x和image.y

NOTE: scaling will apply to the container not the image directly where as image movement will still be image.x and image.y