账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    canvans图片旋转后再拖动记不住上次的位置
    20
    0

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

    },

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 我想静静 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部