jsでピンチ操作(touchmoveでrotateとかスケーリング)

16/06/202017/06/2020

コロナの影響もあってか
公開の延期とかペンディング
なんかがチラホラある今日このごろです。

結構急ぎの対応になる予定だったのだけども
延期になってちょっと時間ができたので
実装進行中のjsで画像の拡大とかスケーリングする
仕組み的な物記事にしてみます。

gesturechange

gesturechangeに対応してればscaleとかrotateって簡単にとれますが
iOS以外はサポートしてない？ような覚えがあるので
アンドロイドとかそのあたり実装の参考になりましたら幸いです。

Contents

1. とりあえずこんなの
2. Pointクラス
3. touch系の処理
4. コンポーネント

とりあえずこんなの

実際案件として作ってるのは移動したりレイヤー複数だったりするのですが
あまり色々書くとわかりづらくなると思うのでPC省きでスマホ動作の拡縮と回転のみです。
あとReactとtypescript使ってますが、特に別でmoduleとか使ってないので
各処理は素のjsとかでも読み変えてもらえると思います。

See the Pen touchmoveでrotation by admin@nocebo.jp (@nocebojp) on CodePen.

あとはちょい説明

Pointクラス

class Point {
  x: number;
  y: number;
  constructor(x: number = 0, y: number = 0) {
    this.x = x || 0;
    this.y = y || 0;
  }
  static distance(a: Point, b: Point) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
  }
  static interpolate(p1: Point, p2: Point, t: number) {
    let x = p1.x * (1 - t) + p2.x * t;
    let y = p1.y * (1 - t) + p2.y * t;
    return new Point(x, y);
  }
  add(p: Point) {
    this.x += p.x;
    this.y += p.y;
    return this;
  }
  subtract(p: Point) {
    this.x -= p.x;
    this.y -= p.y;
    return this;
  }
}

distanceはそのまま距離求める関数です。
指2本間の距離
三平方の定理のハズ。

interpolateもそのままですが2点間の補間点です。
今回は指2本の中間点とるのに使ってます。

touch系の処理

disableTouch

useEffectで使ってます。
userscalableオフにするやつ

passive: falseっていれないと
最近のiOSでは効かない。

touchPosition

タッチしてる指の本数分(e.touches)を配列で返します。
Object.entriesでmapってのを使ってみた。

touchDeg

角度求めるヤツです。
上で出たinterpolate使って
指2本の補間点(中心)と
逆正接関数(Math.atan2)ってのを使って指1との角度を求める。

というつもり。であってるハズ。
Math.atanってのもあるので注意です。こんなの学校でならったかしら

コンポーネント

あとはコンポーネントで色々ハンドラとか書く。
自己流ReactなのでuseCallbackとかuseMemoとかのメモ化なんか
特に雰囲気で使ってるけどあってるかな？あってるといいな。
焼き肉が食べたいな。

一応回転とスケーリングの処理だけ補足。

rotate

回転

const currentPoints = touchPosision(e);
// それぞれの指の位置取得
const currentDeg = touchDeg(currentPoints);
// 指1と指2から角度取得
const diffDeg = currentDeg - startDeg;
// touchstart時の角度とmove時の角度の差を取得
const result = tempRotate + diffDeg;
// 要素自体のtouchstart時のrotate+差分

です。

scale

拡縮

const startDistance = Point.distance(startPoints[0], startPoints[1]);
// スタート時の指2本の距離
const currentDistance = Point.distance(currentPoints[0], currentPoints[1]);
// move時の指2本の距離
let scale = (currentDistance / startDistance) * tempScale;
// 現在距離/スタート時の距離 * 拡縮要素タッチ時の元のスケール
scale = Number.isNaN(scale) ? 1.0 : scale;
// ここは保険
scale = Math.max(scale, 0.5);
scale = Math.min(scale, 4.0);
// 最小スケールと最大スケール

です。