ちょっと機会があったので、ようやくtouchイベントを触ってみました。
- touch系イベントで拡大と回転 – jsdo.it – Share JavaScript, HTML5 and CSS
http://jsdo.it/ginpei/4yYt
iOS5でのみ動作確認。”This page”のリンクから別タブで開き直すとスムーズです。
- 触れた位置を表示 (3点まで)
- ブロックを、
- スライドして移動
- ピンチ・イン、ピンチ・アウトして拡大縮小
- ピンチして回転
もっとスムーズに動かしたい部分もあったんですが、行列計算が必要な気がしたのでここまで。
具体的に言うと、transform-origin
の部分です。最初に触れた部分を原点 (origin) にすると動作が良い感じなんですが、二度目以降は原点の移動とともに座標やらももりもり変更してやらないといけませんで。(回転の中心点が変わるので。)
ベンダープレフィックス固定してるのがアレですが、まあ。