Flotをピンチイン、ピンチアウトで拡大縮小をする ついでに２点タッチで移動

結構前にやったけど、載せてなかったのでメモ程度に

    				//グラフ上ではスクロール禁止をバインド（有効に）
					$('#placeholder').bind('touchstart', function(){
						$(window).on('touchmove.noScroll', function(e) {
							e.preventDefault();
						});
					});
                    //グラフ上でスクロール禁止をアンバインド（無効に）
					$('#placeholder').bind('touchend', function(){
						$(window).off('.noScroll');
					});
					
					//中央座標？移動前の値
					var movePoint = { x: 0, y: 0 };
					$('#placeholder').bind('gesturestart', function(ev){
						movePoint.x = ev.originalEvent.layerX;
						movePoint.y = ev.originalEvent.layerY;
					});
					
					$('#placeholder').bind('gesturechange', function(ev){
						//拡大縮小倍率
						var scale = ev.originalEvent.scale;
						
						//中央座標？ (canvas全体からの座標なので少しずれている)
						var lX = ev.originalEvent.layerX;
						var lY = ev.originalEvent.layerY;
						
						//拡大縮小
						var position = { "left": lX, "top": lY }
						plot.zoom({"amount": scale, "center": position});
						
						//移動
						var moveP = { "left": movePoint.x - lX, "top": movePoint.y - lY};
						plot.pan(moveP);
						
						movePoint.x = ev.originalEvent.layerX;
						movePoint.y = ev.originalEvent.layerY;
					});

こんな感じです。

"#placeholder" はグラフの表示領域のIDです

"plot" はflotのグラフそのもの？の変数名です

ポイントはgesturestartと言ったところでしょうか

gestureほげほげは前にも書いたかもしれませんが、タッチデバイスで２点同時タッチした場合のイベントです。

イベント発生順番は曖昧にしか覚えてませんが

touchstart

gesturestart

gestureend

touchend

だった気がします。

そして、間にほげmoveなどが入ってきます。

この辺りはググればすぐに出てきますので説明しなくてもいいかなって・・・

gesturechangeは２点タッチした状態で動かした時のイベントだったかな？

たしかmoveがないんだかな？

ちなみにjQueryだけでgesture系は既にイベント登録されていたはずです。

そしてコメントで「中央座標？」ってなってるところは、２点タッチ時の

タッチ箇所とタッチ箇所の中央座標だと・・・

なんか座標とれたからこいつでいいかって使ってます。

出来そこないでごめんなさいｗｗｗ

実際にグラフを動かしてみた感想ですが・・・

結構シビア

操作に慣れたらいいのですが、なかなか思った位置に移動や思った倍率にするのが難しいです。

たぶんscaleをそのまんま突っ込んでるのが原因でしょうが。。。

今回はおまけ機能的なものなのでそこまでしません！ｗｗｗ

いい計算方法ありましたら教えてください！

あっと。iPadで動作確認しました