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
})
},