缩放到和从点 [英] Zoom to and from point

问题描述

我正在尝试将 DisplayObject 放大到某个点.我认为这很容易，但我现在花了一天时间试图弄清楚.

I'm trying to zoom a DisplayObject into a certain point. I figured it would be easy, but I've spent a day now trying to figure it out.

基本上，我认为这应该有效.强调应该.

Basically, I think this should work. Emphasis on should.

//newPoint is the point being centered. There is no initial scaling, so I do not need to compensate for that (yet)
//scale is the zoom level
//container is the parent of the obj
//obj is the object being scaled/panned
var p:Point = new Point(
    ( this.container.width - this.obj.width * scale + newPoint.x * scale ) / 2, 
    ( this.container.height - this.obj.height * scale + newPoint.y * scale ) / 2 
);

this.obj.scaleX = this.obj.scaleY = scale;
this.obj.x = p.x;
this.obj.y = p.y;

如果比例为 1，它会以点为中心，但随着比例的增加，它会离中心越来越远.我已经尝试了几十种不同的方法.这个方法，我在几个网站上看到过，产生了完全相同的结果.任何人都知道如何让它发挥作用?

It centers the point if scale is 1, but it gets further and further away from center as you increase the scale. I've tried dozens of different methods. This method, which I have seen on several sites, produced the same exact results. Anyone have any idea how to get this to work?

编辑 10-1-12:作为后续，我采用了代码片段 LondonDrugs_MediaServices 作为我原始问题的基础.我需要能够以相对于未缩放图像的特定比例缩放到特定点(想想 Google 地图如何缩放到特定位置).为此，我必须在运行翻译代码之前将图像集中在该点上.我已经在下面发布了附加代码.对于其他用途(捏缩放、滚动和双击)，我使用了 Vesper 提供的代码，效果很好.

EDIT 10-1-12: As a followup, I took the code snippet that LondonDrugs_MediaServices provided as a basis for my original issue. I needed to be able to zoom to a specific point at a specific scale relative to the unscaled image (think how Google Maps zooms to a specific location). To do this, I had to center my image on the point before running the translation code. I've posted the additional code below. For other uses (pinch to zoom, scrolling, and double click), I used the code provided by Vesper, which worked quite well.

//obj is the object being translated
//container is its parent
//x and y are the coordinates to be zoomed to, in untranslated scaling
//obj.scaleX and obj.scaleY are always identical in my class, so there is no need to account for that


//calculates current center point, with scaling
var center:Point = new Point( ( this.container.width - this.obj.width * this.obj.scaleX ) / 2, ( this.container.height - this.obj.height * this.obj.scaleX ) / 2 );

//calulcates the distance from center the point is, with scaling
var distanceFromCenter:Point = new Point( this.obj.width * this.obj.scaleX / 2 - x * this.obj.scaleX, this.obj.height * this.obj.scaleX / 2 - y * this.obj.scaleX );

//center the object on that specific point
this.obj.x = center.x + distanceFromCenter.x;
this.obj.y = center.y + distanceFromCenter.y;

推荐答案

var mat:Matrix=new Matrix();
mat.translate(-p.x,-p.y);
mat.scale(desiredScale,desiredScale);
mat.translate(p.x,p.y);
yourObject.transform.matrix=mat;

核心点是缩放是在 (0,0) 附近完成的，但您可以使用描述仿射变换的矩阵来完成.您首先创建一个空矩阵(即不变换的矩阵)，然后对其应用一组变换.首先，通过平移 -1* 坐标将所需的点放置在 (0,0) 处，然后缩放，然后平移回来.

The core point is that scaling is done around (0,0), but you can do it with matrix that describes affine transformations. You first make an empty matrix (that is, a matrix that doesn't transform), then apply a set of transformations to it. First, place a desired point at (0,0) by translating by -1*coordinates, then scale, then translate back.

这篇关于缩放到和从点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！