在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ canvas圖片旋轉之后在拖動,坐標系應該怎么轉換?

canvas圖片旋轉之后在拖動,坐標系應該怎么轉換?

圖片不旋轉的時候可以直接拖動,圖片如果旋轉過了,坐標系就會變掉,再次拖動的話,怎么判斷坐標系是在原點還是已經(jīng)變過了的呢?
cvsMove: function (e) {

if (e.touches.length > 1) {//二指縮放
console.log("雙指縮放")
var xMove2 = Math.abs(e.touches[1].x - e.touches[0].x);
var yMove2 = Math.abs(e.touches[1].y - e.touches[0].y);
         var distance2 = Math.sqrt(xMove2 * xMove2 + yMove2 * yMove2);//開根號
         console.log(distance2);
        //  this.data.distanceList.shift()
        //  this.data.distanceList.push(distance)
        //  if (this.data.distanceList[0] == 0) { return }
        //  var distanceDiff = this.data.distanceList[1] - this.data.distanceList[0]//兩次touch之間, distance的變化. >0,放大圖片.<0 縮小圖片
        //  var baseScale = 1 + 0.005 * distanceDiff
         var baseScale = this.data.distance1 / distance2 ;
         console.log("縮放率"+baseScale);
         const ctx = wx.createCanvasContext('myCanvas');
         ctx.scale(baseScale, baseScale);
         ctx.drawImage(this.data.tempFilePaths, this.data.lastX, this.data.lastY, 200 , 300);
        
         ctx.restore();
} else if (e.touches.length == 1){
  var touchs = e.touches[0];
  console.log('canvas被拖動了....')
  var x = touchs.x;
  var y = touchs.y;
  var moveX = x - this.data.currentX;
  var moveY = y - this.data.currentY;
  this.setData({
    newX : this.data.lastX + moveX,
    newY : this.data.lastY + moveY
  })
  const ctx = wx.createCanvasContext('myCanvas');
  ctx.save();
  ctx.setFillStyle('white');
  ctx.drawImage(this.data.tempFilePaths, this.data.newX, this.data.newY, 200, 300)
  ctx.draw();
  ctx.restore();
}

},

回答
編輯回答
薄荷糖

樓主 我也遇到這個問題,請問下你是怎么解決的啊,我都快搞暈了

2017年7月23日 01:51
編輯回答
糖豆豆

針對坐標系的操作不一直都要保存狀態(tài)嗎,在操作canvas的時候一直都是save,restore的,你旋轉完之后還要restore,也就是說操作完之后坐標系會恢復到最初狀態(tài) 不會有你說的這個問題

2017年11月3日 10:41