androidでongesturechangeとe.scale

05/09/2016

スマホのピンチイン/ピンチアウトで処理行う場合iosはongesturechangeでe.scaleってプロパティがデフォルトでありますが
androidの場合ongesturechangeもスケール値も自前で実装する必要がある様子。

一部抜粋で状況で調整必要ですが、基本的にtouchstart時touchmove(gesturechange)時の二本の指の距離をとって下記の感じでe.scale同様の数値とれると思います。

class Point
  constructor: (x = 0,y = 0) ->
    @x = x || 0;
    @y = y || 0;

  distance:(p1,p2)=>
    a = p1.x - p2.x;
    b = p1.y - p2.y;
    return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
    // 3平方の定理で距離計算
// ポイントクラス

~~~~~~~~~
disSt = ''; //タッチスタート時の距離
disMv = '' //タッチムーブ中の距離

onTouchStart: (e) ->
    e = e.originalEvent
    touches = e.touches
    pitchStartPos[0].x = touches[0].clientX
    pitchStartPos[0].y = touches[0].clientY
    pitchStartPos[1].x = touches[1].clientX
    pitchStartPos[1].y = touches[1].clientY

    disSt = new Point().distance(pitchStartPos[0],pitchStartPos[1]);

onGestureChange: (e)->
    e = e.originalEvent
    touches = e.touches
    pitchCurrentPos[0].x = touches[0].clientX
    pitchCurrentPos[0].y = touches[0].clientY
    pitchCurrentPos[1].x = touches[1].clientX
    pitchCurrentPos[1].y = touches[1].clientY

    disMv = new Point().distance(pitchCurrentPos[0],pitchCurrentPos[1]);
    scale = disMv / disSt;
    //スケール値計算

(追記)Reactで作ってみたやつ

web

Posted by admin