canvans图片旋转后再拖动记不住上次的位置

cvsMove: function (e) {

if (e.touches.length >= 2) {//二指缩放
  var xMove = e.touches[1].clientX - e.touches[0].clientX
         var yMove = e.touches[1].clientY - e.touches[0].clientY
         var distance = Math.sqrt(xMove * xMove + yMove * yMove);//开根号
         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 缩小图片
         // 假设缩放scale基数为1:  newScale = oldScale + 0.005 * distanceDiff
         var baseScale = 1 + 0.005 * distanceDiff
         if(baseScale > 0) {
           const ctx = wx.createCanvasContext('myCanvas');
           ctx.restore();
           ctx.scale(baseScale, baseScale)
  } else {
           ctx.scale(baseScale, baseScale)  
    
  }
}else{
  var touchs = e.touches[0];
  console.log('canvas被拖动了....')
  var x = touchs.x;
  var y = touchs.y;
  // var lastX = this.data.width * 0.23;
  // var lastY = 0;
  var moveX = x - this.data.currentX;
  var moveY = y - this.data.currentY;
  this.setData({
    newX : this.data.lastX + moveX,
    newY : this.data.lastY + moveY
  })
  // var newX = this.data.lastX + moveX;
  // var newY = this.data.lastY + moveY;
  const ctx = wx.createCanvasContext('myCanvas');
  // ctx.clearActions();
  ctx.save();
  ctx.setFillStyle('white');
  ctx.fillRect(this.data.width * 0.1, 30, this.data.width * 0.8, this.data.height * 0.3);
  ctx.clip();
  ctx.drawImage(this.data.tempFilePaths, this.data.newX, this.data.newY, 200, 300)
  ctx.draw();
  ctx.restore();
}

},
cvsEnd:function(e){

var touchs = e.changedTouches[0];
this.setData({
  lastX: this.data.newX,
  lastY: this.data.newY
})

},
rotate_90:function(){

var num = this.data.rotateNum;
const ctx = wx.createCanvasContext('myCanvas');

ctx.save();
ctx.setFillStyle('white');
ctx.fillRect(this.data.width * 0.1, 30, this.data.width * 0.8, this.data.height * 0.3);
ctx.clip();    
ctx.translate(this.data.width * 0.5,this.data.height * 0.20);//设置画布上的(0,0)位置,也就是旋转的中心点
ctx.rotate((-Math.PI / 2)*this.data.rotateNum);
if (this.data.rotateNum == 4){
  this.setData({
    rotateNum : 1
  });
  num = 1
}else{
  num += 1
  this.setData({
    rotateNum:num
  });
}
ctx.translate(-this.data.width * 0.5, -this.data.height * 0.20);
ctx.drawImage(this.data.tempFilePaths, this.data.lastX, this.data.lastY, 200, 300);
ctx.draw();
ctx.restore();
var tempx = this.data.lastX;
var tempy = this.data.lastY;
this.setData({
  lastX: tempx,
  lastY: tempy
})

},
rotate_5:function(){

var num = this.data.fiveNum;
const ctx = wx.createCanvasContext('myCanvas');
ctx.save();
ctx.setFillStyle('white');
ctx.fillRect(this.data.width * 0.1, 30, this.data.width * 0.8, this.data.height * 0.3);
ctx.clip();
ctx.translate(this.data.width * 0.5, this.data.height * 0.20);//设置画布上的(0,0)位置,也就是旋转的中心点
ctx.rotate((-Math.PI / 180) * 5 * this.data.fiveNum);
if (this.data.fiveNum == 120) {
  this.setData({
    fiveNum: 1
  });
  num = 1
} else {
  num += 1
  this.setData({
    fiveNum: num
  });
}
ctx.translate(-this.data.width * 0.5, -this.data.height * 0.20);
ctx.drawImage(this.data.tempFilePaths, this.data.lastX, this.data.lastY, 200, 300);
ctx.draw();

ctx.restore();
this.setData({
  lastX: this.data.lastX,
  lastY: this.data.lastY
})

},
rotateF: function () {

var num = this.data.fiveNum;
const ctx = wx.createCanvasContext('myCanvas');
ctx.save();
ctx.setFillStyle('white');
ctx.fillRect(this.data.width * 0.1, 30, this.data.width * 0.8, this.data.height * 0.3);
ctx.clip();
ctx.translate(this.data.width * 0.5, this.data.height * 0.20);//设置画布上的(0,0)位置,也就是旋转的中心点
ctx.rotate((Math.PI / 180) * 5 * this.data.fiveNum);
if (this.data.fiveNum == 120) {
  this.setData({
    fiveNum: 1
  });
  num = 1
} else {
  num += 1
  this.setData({
    fiveNum: num
  });
}
ctx.translate(-this.data.width * 0.5, -this.data.height * 0.20);
ctx.drawImage(this.data.tempFilePaths, this.data.lastX, this.data.lastY, 200, 300);
ctx.draw();
ctx.restore();
this.setData({
  lastX: this.data.lastX,
  lastY: this.data.lastY
})

},
renew:function(){

const ctx = wx.createCanvasContext('myCanvas');
ctx.clearActions();
ctx.setFillStyle('white');
ctx.fillRect(this.data.width * 0.1, 30, this.data.width * 0.8, this.data.height * 0.3);
ctx.clip();
ctx.drawImage(this.data.tempFilePaths, this.data.width * 0.23, 0, 200, 300)
ctx.draw();
this.setData({
  lastX: this.data.width * 0.23,
  lastY: 0
})

},

阅读 1.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题