読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

二本指で拡大縮小

cocos2d-html5


 マルチタッチのジェスチャーはPCのブラウザでは再現できないのでどうしても後回しになってしまうのだが、避けて通るわけにもいかない。
 ピンチズーム(2本指で拡大縮小)のサンプル。

init:function () {
  this._super();
  this.bg = cc.Sprite.create(...);
  this.addChild(this.bg);
  ...
  this.setTouchEnabled(true);
},

onTouchesBegan:function (touches) {
  if (touches.length == 2) {
    var pos0 = touches[0].getLocation();
    var pos1 = touches[1].getLocation();
    this.d0 = cc.pDistance(pos0, pos1);
    this.s0 = this.bg.getScale();
  }
},

onTouchesMoved:function (touches) {
  if (touches.length == 2) {
    var pos0 = touches[0].getLocation();
    var pos1 = touches[1].getLocation();
    var s = cc.pDistance(pos0, pos1)  / this.d0;
    this.bg.setScale(this.s0 * s);
  }
},

 基本的にはこんなかんじ。
 ただ、これだと拡大縮小の中心を変えられないので、「ちゃんと2本の指で挟んだところが動かないように拡大縮小したい」という需要もあると思う。これは頭が混乱する……。

...
onTouchesBegan:function (touches) {
  if (touches.length == 2) {
    var pos0 = touches[0].getLocation();
    var pos1 = touches[1].getLocation();
    this.d0 = cc.pDistance(pos0, pos1);
    this.s0 = this.bg.getScale();
    this.p0 = this.bg.getPosition();

    var midpoint = cc.pMidpoint(pos0, pos1);
    this.offset = cc.pSub(this.convertToNodeSpace(midpoint), this.p0);
  }
},

onTouchesMoved:function (touches) {
  if (touches.length == 2) {
    var pos0 = touches[0].getLocation();
    var pos1 = touches[1].getLocation();
    var s = cc.pDistance(pos0, pos1)  / this.d0;
    this.bg.setScale(this.s0 * s);

    var p = cc.pMult(this.offset, 1.0 - s);
    this.bg.setPosition(cc.pAdd(this.p0, p));
  }
},

 こんな感じでいいのかなあ。自信ないなあ。

(追記) いや、よくないですね。もうちょっと調べて訂正記事書きます……)

広告を非表示にする