canvas test

finger.js

/* AlloyFinger v0.1.2
 * By dntzhang
 * Github: https://github.com/AlloyTeam/AlloyFinger
 */
function getLen(v) {
    return Math.sqrt(v.x * v.x + v.y * v.y);
}

function dot(v1, v2) {
    return v1.x * v2.x + v1.y * v2.y;
}

function getAngle(v1, v2) {
    var mr = getLen(v1) * getLen(v2);
    if (mr === 0) return 0;
    var r = dot(v1, v2) / mr;
    if (r > 1) r = 1;
    return Math.acos(r);
}

function cross(v1, v2) {
    return v1.x * v2.y - v2.x * v1.y;
}

function getRotateAngle(v1, v2) {
    var angle = getAngle(v1, v2);
    if (cross(v1, v2) > 0) {
        angle *= -1;
    }

    return angle * 180 / Math.PI;
}
var Finger = function (option) {
    this.preV = { x: null, y: null };
    this.pinchStartLen = null;
    this.scale = 1;
    this.isDoubleTap = false;
    this.rotate = option.rotate || function () { };
    this.touchStart = option.touchStart || function () { };
    this.multipointStart = option.multipointStart || function () { };
    this.multipointEnd=option.multipointEnd||function(){};
    this.pinch = option.pinch || function () { }; //
    this.swipe = option.swipe || function () { };
    this.tap = option.tap || function () { }; // done
    this.doubleTap = option.doubleTap || function () { }; // done
    this.longTap = option.longTap || function () { };
    this.singleTap = option.singleTap || function () { };
    this.pressMove = option.pressMove || function () { };
    this.touchMove = option.touchMove || function () { };
    this.touchEnd = option.touchEnd || function () { };
    this.touchCancel = option.touchCancel || function () { };

    this.delta = null;
    this.last = null;
    this.now = null;
    this.tapTimeout = null;
    this.touchTimeout = null;
    this.longTapTimeout = null;
    this.swipeTimeout=null;
    this.x1 = this.x2 = this.y1 = this.y2 = null;
    this.preTapPosition={x:null,y:null};
};

Finger.prototype = {
    start: function (evt) {
        if(!evt.touches)return;
        this.now = Date.now();
        this.x1 = evt.touches[0].pageX;
        this.y1 = evt.touches[0].pageY;
        this.delta = this.now - (this.last || this.now);
        this.touchStart(evt);
        if(this.preTapPosition.x!==null){
            this.isDoubleTap = (this.delta > 0 && this.delta <= 250&&Math.abs(this.preTapPosition.x-this.x1)<30&&Math.abs(this.preTapPosition.y-this.y1)<30);
        }
        this.preTapPosition.x=this.x1;
        this.preTapPosition.y=this.y1;
        this.last = this.now;
        var preV = this.preV,
            len = evt.touches.length;
        if (len > 1) {
            this._cancelLongTap();
            var v = { x: evt.touches[1].pageX - this.x1, y: evt.touches[1].pageY - this.y1 };
            preV.x = v.x;
            preV.y = v.y;
            this.pinchStartLen = getLen(preV);
            this.multipointStart(evt);
        }
        this.longTapTimeout = setTimeout(function(){
            this.longTap(evt);
        }.bind(this), 750);
    },
    move: function (evt) {
        if(!evt.touches)return;
        var preV = this.preV,
            len = evt.touches.length,
            currentX = evt.touches[0].pageX,
            currentY = evt.touches[0].pageY;
        this.isDoubleTap=false;
        if (len > 1) {
            var v = { x: evt.touches[1].pageX - currentX, y: evt.touches[1].pageY - currentY };

            if (preV.x !== null) {
                if (this.pinchStartLen > 0) {
                    evt.scale = getLen(v) / this.pinchStartLen;
                    console.log(evt.scale)
                    this.pinch(evt);
                }

                evt.angle = getRotateAngle(v, preV);
                this.rotate(evt);
            }
            preV.x = v.x;
            preV.y = v.y;
        } else {
            if (this.x2 !== null) {
                evt.deltaX = currentX - this.x2;
                evt.deltaY = currentY - this.y2;

            }else{
                evt.deltaX = 0;
                evt.deltaY = 0;
            }
            this.pressMove(evt);
        }

        this.touchMove(evt);

        this._cancelLongTap();
        this.x2 = currentX;
        this.y2 = currentY;
        if (evt.touches.length > 1) {
            this._cancelLongTap();
            // evt.preventDefault();
        }
    },
    end: function (evt) {
        this._cancelLongTap();
        var self = this;
        if( evt.touches.length<2){
            this.multipointEnd(evt);
        }
        this.touchEnd(evt);
        //swipe
        if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) ||
            (this.y2 && Math.abs(this.preV.y - this.y2) > 30)) {
            evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
            this.swipeTimeout = setTimeout(function () {
                self.swipe(evt);

            }, 0)
        } else {
            this.tapTimeout = setTimeout(function () {
                self.tap(evt);
                // trigger double tap immediately
                if (self.isDoubleTap) {
                    self.doubleTap(evt);
                    clearTimeout(self.touchTimeout);
                    self.isDoubleTap = false;
                }else{
                    self.touchTimeout=setTimeout(function(){
                        self.singleTap(evt);
                    },250);
                }
            }, 0)
        }

        this.preV.x = 0;
        this.preV.y = 0;
        this.scale = 1;
        this.pinchStartLen = null;
        this.x1 = this.x2 = this.y1 = this.y2 = null;
    },
    cancel:function(evt){
        clearTimeout(this.touchTimeout);
        clearTimeout(this.tapTimeout);
        clearTimeout(this.longTapTimeout);
        clearTimeout(this.swipeTimeout);
        this.touchCancel(evt);
    },
    _cancelLongTap: function () {
        clearTimeout(this.longTapTimeout);
    },
    _swipeDirection: function (x1, x2, y1, y2) {
        return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
    }
};

module.exports = Finger;

seat.js

//public values
var Finger = require('./finger.js');

function drawSeatTable(ctx) {
  let rows = 10
  let columns = 20
  let seatWidth = 20
  let seatHeight = 17
  let spaceing = 5
  let verSpacing = 10
  let marginLeft = 10
  let marginTop = 20
  let translateX = 0
  let translateY = 0

  for (let i = 0; i < rows; i++) {
    translateY += i * (seatHeight + verSpacing)
    for (let j = 0; j < columns; j++) {
      translateX = marginLeft + i * (seatWidth + spaceing)
      translateY = marginTop + j * (seatWidth + spaceing)
      ctx.save()
      ctx.translate(translateX, translateY)
      ctx.drawImage('../../images/canvas/seat_gray.png', 0, 0, seatWidth, seatHeight)
      ctx.restore()
    }
  }
  ctx.draw()
}

Page({
  data:{
    x: 0,
    y: 0,
    hidden: true,

    // 下面是用到的
    translateX: 0,
    translateY: 0
  },
  onLoad:function(){
    let self = this
    self.ctx = wx.createCanvasContext('seatTable')

    this.finger = new Finger(self.ctx, {
      pinch: function (e) {
        console.log(e.scale)
        self.ctx.scale(e.scale, e.scale)
        drawSeatTable(self.ctx)
      },
      pressMove: function (e) {
        self.data.translateY += e.deltaY;
        self.data.translateX += e.deltaX;
        self.ctx.translate(self.data.ranslateX, self.data.translateY)
        drawSeatTable(self.ctx)
      },
      touchStart: function (e) {
      },
      touchEnd: function (e) {

      }
    })

    drawSeatTable(self.ctx)
  },
  onReady:function() {
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  touchstart: function(e) {
    this.finger.start(e)
  },
  touchmove: function(e) {
    this.finger.move(e);
  },
  touchend: function(e) {
    this.finger.end(e)
  },
  touchcancel: function(e) {
    this.finger.end(e)
  }
})

seat.wxml

<canvas canvas-id="seatTable" style="width:90%; height:300px; margin: 5%; border:1px solid #d3d3d3;"
        bindtouchstart="touchstart"
        bindtouchmove="touchmove"
        bindtouchcancel="touchcancel"
        bindtouchend="touchend"/>