2012-09-28 223 views
0

我試圖將DisplayObject放大到某個點。我認爲這很容易,但我花了一天的時間試圖找出答案。放大和縮小點

基本上我覺得應該是的工作。強調應該。

//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,它會使點居中,但當您增加比例時,它會越來越遠離中心。我嘗試了幾十種不同的方法。我在幾個網站上看到的This method產生了相同的確切結果。任何人有任何想法如何讓這個工作?

編輯12年10月1日: 作爲後續,我把作爲我原來的問題的基礎提供的code snippet是LondonDrugs_MediaServices。我需要能夠以特定比例縮放到相對於未縮放圖像的特定點(請考慮Google地圖如何縮放到特定位置)。要做到這一點,我必須在運行翻譯代碼之前將圖像集中在重點上。我已經發布了下面的附加代碼。對於其他用途(捏放大,滾動和雙擊),我使用了Vesper提供的代碼,它工作得很好。

//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; 
+2

試着看一下我的這個問題的答案:HTTP://計算器。com/questions/12571958/as3-scale-parent-mcs-center-to-child-mcs-center/12572155#12572155 – BadFeelingAboutThis

+0

導致與我嘗試使用的其他方法一樣的問題。只有圖像的實際中心會居中,其他所有內容都呈指數關閉。看這裏。 http://imgur.com/M1kBJ圖片是700x525,父母是1024x768的舞臺。儘管如此,感謝您的幫助。 –

+0

其實......我現在正在看它,並且這個代碼片段和Vesper提供的片段定位了點(200,200)在......(200,200)。他們沒有將它置於屏幕上,而是將其放置在屏幕上(200,200)。很有意思。我現在可能能夠重新做這件事。 –

回答

1
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)處放置所需的點,然後縮放,然後轉回。

+0

這很接近,但仍不準確。正如你在截圖(http://imgur.com/ZeEhv)中看到的那樣,200x200標記並不是很集中。看起來只有座標輸入時圖像的中心纔會居中。我正在研究在DisplayObject上使用這個類,這些DisplayObject在寬度和高度上都是數千像素,所以近距離就不會在這裏剪切它。不過,感謝您的幫助。 –

+0

那麼,你需要使用多個轉換,這意味着。我正在編寫在某個點放大的代碼,使其保持原位。爲了讓您放大某個點並將其移動到中心,您可以先移動然後放大中心,或者先放大並移動到中心。 – Vesper

+0

是的。我剛剛意識到你的代碼做了什麼(請參閱我的OP的最新評論)。我正在調整代碼以適應我現在的需求。但這實際上很棒。我可以使用這個鼠標滾輪/捏縮放。我只需要能夠調用一個點來放大縮放級別並使其顯示在屏幕中央。 (想象谷歌地圖功能)。一旦我得到這個工作,我會接受你的答案。非常感謝你的幫助 –

0

設置obj.x到-p.x和obj.y到-p.y,設置容器的scaleX和scaleY爲所需的值,並添加p.x到容器x和p.y到容器收率完成!

+0

我無法更改容器上的任何東西。這個類的要求是你在實例化過程中傳入對象和容器,這就是你所要做的。更改Flex中的容器規模(另一個要求,它必須可用於Flex和標準AS3項目)會導致其兄弟姐妹的尺寸問題 –

0

矩陣答案是絕對正確的,但如果你碰巧是一個俱樂部使用GreenSock會員,您可以用TransformAroundPointPlugin

http://www.greensock.com/as/docs/tween/com/greensock/plugins/TransformAroundPointPlugin.html

你可以看到一個例子非常簡單的代碼獲得了一些不錯的功能插件瀏覽器這裏: http://www.greensock.com/tweenlite/#plugins

我用它來補間我所有的縮放,並有比我手動嘗試這樣做更好的性能。海事組織整個圖書館是值得的黃金的重量(並沒有除了喜歡圖書館我沒有任何聯繫)。如果你需要任何其他功能,我會研究它。它還具有ThrowProps插件(http://www.greensock.com/throwprops/),如果您要在移動設備上有一個邊界框,並且想要平滑返回邊界,這非常重要。

2

HIE傢伙.... 感謝的你的意見...... 我找到了答案...... 代碼:

gambar.addEventListener(TransformGestureEvent.GESTURE_ZOOM,onZoom);
功能onZoom(事件:的TransformGestureEvent):無效{

var locX:Number=event.localX; 

    var locY:Number=event.localY; 

    var stX:Number=event.stageX; 

    var stY:Number=event.stageY; 

    var prevScaleX:Number=gambar.scaleX; 

    var prevScaleY:Number=gambar.scaleY; 

    var mat:Matrix; 

    var externalPoint=new Point(stX,stY); 

    var internalPoint=new Point(locX,locY); 

    gambar.scaleX *= event.scaleX; 

    gambar.scaleY *= event.scaleY; 

    if(event.scaleX>1 && gambar.scaleX>6){ 

     gambar.scaleX=prevScaleX; 

     gambar.scaleY=prevScaleY; 

     } 

    if(event.scaleY>1 && gambar.scaleY>6){ 

     gambar.scaleX=prevScaleX; 

     gambar.scaleY=prevScaleY; 

     } 

     if(event.scaleX<1 && gambar.scaleX<0.8){ 

     gambar.scaleX=prevScaleX; 

     gambar.scaleY=prevScaleY; 

     } 

    if(event.scaleY<1 && gambar.scaleY<0.8){ 

     gambar.scaleX=prevScaleX; 

     gambar.scaleY=prevScaleY; 

     } 

    mat=gambar.transform.matrix.clone(); 

    MatrixTransformer.matchInternalPointWithExternal(mat,internalPoint,externalPoint); 

    gambar.transform.matrix=mat; 

    }