2013-04-28 62 views
0

我在iPhone和Android上使用Kinetic JS。Kinetic JS Multi-Touch Scale Stage

我複製的例子從

http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/

,使舞臺縮放,然後我意識到,當我放大變焦不上,我掐我變焦的地方發生,而是發生在頂角。

我還需要用最大/最小縮放級別限制縮放比例,我相信這會有很大的幫助。謝謝!

代碼:

http://pastebin.com/cAgk2UiB

改裝成捏層:

http://pastebin.com/mG1b75KK

+0

setScale只調整對象/圖層的大小,您必須根據計算出的觸摸/捏合位置的座標來自己翻譯位置。 – SoluableNonagon 2013-04-29 13:41:08

+0

這些鏈接都沒有工作解決方案。 Pastebin's也過期了。 – 2013-06-23 19:50:58

回答

1

這是由另一家開發商誰做插件的照顧。試試這個,看看它是否適合你

https://github.com/eduplus/pinchlayer

+0

是的,我看到了!我試過,但我的網頁變成空白認爲它的一些JS錯誤,將檢查,並會在一段時間內再次嘗試。感謝m8! :)! – Rejinderi 2013-04-30 01:39:09

+1

捏層不適用於最新的KineticJS,而且我的代碼不能運行在PinchLayer開啓的舊KineticJS上,現在修復它並且它的工作正常:)謝謝,現在問題是我有100+圓圈和縮放在iPhone 4和Android上非常慢。任何想法我可以改進它? – Rejinderi 2013-05-02 08:27:13

+0

不是真的,在移動設備上重畫是昂貴的。要做的事情是以某種方式定義一個區域來重繪,而不是整個圖層。 – SoluableNonagon 2013-05-02 17:35:23

0

下面是本教程的更新版本:

var scale = { 
    x: stage.scale().x * dist/lastDist, 
    y: stage.scale().y * dist/lastDist 
}; 
stage.scale(scale); 
http://jsfiddle.net/9eaBq/

這段代碼只需更換從69行至71

在iOS7下使用iPad(Chrome & Safari)。