在移動屏幕上獲取可移動屏幕上的可見部分（放大圖像），在HTML中

Question

我正在HTML/javascript中製作移動應用程序，用戶在某處可以捏合（放大）用於顯示圖像特定部分的圖像。作爲縮放的結果，只有圖像的可見部分（我們都知道），而不是整個圖像。當觸摸事件觸發時（當用戶舉起手指捏住手指時），我想獲得可見部分（用戶有多大的放大和圖像的哪一部分）。

我想到了各種各樣的方式，我想要你的意見。

• 使用pageXOffset和pageYOffset（但我找不到多少縮放用戶已完成）
• 使用帆布和手動處理的收縮效應
• 截屏（如果可能）的放大並將其與原始圖像進行比較，以找到可見部分。

我包裹與PhoneGap的應用程序，所以我能寫本地代碼，如果以任何方式幫助...

Answer 1

變焦與2個手指的手勢，所以你要聽上與event.targetTouches.length == 2 touchmove然後讀取X和從每個手指

圖像變焦中心將event.targetTouches [0] .pageX Y座標 - event.targetTouches 1 .pageX和事件。 targetTouches [0] .pageY - event.targetTouches 1 .pageY與您的滾動位置或圖像位置有關係（注意+或 - ）

和您的比例因子應該是vectorLengthCurrent-vectorLengthStart

看到http://www.html5rocks.com/en/mobile/touch/

圖像：

例如：

圖像： 左：-100px | startFinger [0] .pageX：50px | currentFinger [0] .pageX：55px | startFinger 1 .pageX：150px | currentFinger 1 .pageX：140px

所以中心應該是：startFinger 1 .pageX - startFinger [0] .pageX - 左 （僅當startFinger 1 .pageX大於| Y以相同的方式）

矢量長度： sqrt（x^2 + y^2）;