放大并从点 [英] Zoom to and from point

查看:161
本文介绍了放大并从点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想放大的DisplayObject成一定的角度。我想它会很容易,但我花了一天时间,现在想弄明白。

基本上,我觉得这个的应该的工作。强调应该的。

  // newPoint是为中心的点。没有初始缩放,所以我不需要以补偿(还)
//规模的缩放级别
//容器是obj的父
// obj是被缩放/摇摄对象
VAR号码:点=新的点(
    (this.container.width  -  this.obj.width *规模+ newPoint.x *标度)/ 2,
    (this.container.height  -  this.obj.height *规模+ newPoint.y *等级)/ 2
);

this.obj.scaleX = this.obj.scaleY =规模;
this.obj.x = p.x;
this.obj.y = p.y;
 

据中心的点,如果比例为1,但它得到进一步远离中心只要您扩大规模。我试过许多不同的方法。 这种方法,这是我看到的几个地点,产生完全相同的结果。任何人有任何想法如何得到这个工作?

修改12年10月1日: 作为后续,我把<一href="http://stackoverflow.com/questions/12571958/as3-scale-parent-mcs-center-to-child-mcs-center/12572155#12572155">$c$c段的是LondonDrugs_MediaServices提供为我原来的问题的基础。我需要的是能够放大到一个特定的点在特定的规模相对于未缩放的图像(觉得怎么谷歌地图放大到特定的位置)。要做到这一点,我已经跑了翻译code前中心我图片上的点。我已为下面的附加code。对于其他用途(捏缩放,滚动和双击),我使用的Vesper提供的code,它做得很不错。

  // obj与对象正在翻译
//容器是它的父
// x和y是被放大到的坐标,在未翻译的缩放
//obj.scaleX和obj.scaleY总是在我的类相同的,所以没有必要考虑到该


//计算当前的中心点,具有缩放
VAR中心:点=新的点((this.container.width  -  this.obj.width * this.obj.scaleX)/ 2,(this.container.height  -  this.obj.height * this.obj.scaleX)/ 2);

// calulcates从中心点的距离,具有缩放
VAR distanceFromCenter:点=新的点(this.obj.width * this.obj.scaleX / 2  -  X * this.obj.scaleX,this.obj.height * this.obj.scaleX / 2  -  Y * this.obj。将scaleX);

//中心在物体上的特定点
this.obj.x = center.x + distanceFromCenter.x;
this.obj.y = center.y + distanceFromCenter.y;
 

解决方案

  VAR垫:矩阵=新的Matrix();
mat.translate(-p.x,-p.y);
mat.scale(desiredScale,desiredScale);
mat.translate(p.x,p.y);
yourObject.transform.matrix =垫;
 

最核心的一点是,缩放完成绕(0,0),但您可以用矩阵来描述仿射变换做到这一点。你首先以空矩阵(即,一个矩阵,不变换),然后应用一组转换到它。首先,将在(0,0)的所需点由-1 *坐标,然后转换刻度,然后转换回

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;

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?

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;

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆