Applet soundtrack - Tablet

Reference: https://www.jianshu.com/p/a1341c0d12e8

The company's small program engineer, client, sales of single-function requires a Tablet

Internet has been very mature wording

wxml

<view class="wrapper">
  <view class="handBtn">
    <button catchtap="clearClick" class="delBtn">重写</button>
    <button catchtap="saveClick" class="subBtn">完成</button> 
  </view>
  <view class="handCenter">
    <canvas class="sign" canvas-id="sign" bindtouchmove="move" bindtouchstart="start" bindtouchend="end" bindtouchcancel="cancel" bindlongtap="tap" disable-scroll="true" binderror="error">
    </canvas>
  </view>
  <view class="handRight">
    <view class="handTitle">手写签名</view>
  </view>
</view>

View Code

 

js

App getApp = const (); 
const = qiniuUploader the require ( "../../ utils / qiniuUploader"); 
const = the require Network ( '../../ utils / Network'); 

// initialization signature variable discharge in the prior Page 
var Content = null; 
var touchs = []; 
Page ({ 
  Data: { 
    imgList: [], 
    signImage: '', 
        upToken: '' 
  }, 
  // start handwriting 
  // canvas initiation gesture in response to movement of a touch 
    start : function (Event) { 
        // the console.log ( "touch start" + event.changedTouches [0] .x); 
        // the console.log ( "touch start" + event.changedTouches [0] .y); 
        // Get start touch X, Y 
        the let = Point {X: event.changedTouches [0] .x, Y: event.changedTouches [0] .y} 
        touchs.push (Point);
    },
    // touch movement gesture in response to the canvas 
    Move: function (E) { 
        the let = Point {X: e.touches [0] .x, Y: e.touches [0] .y} 
        touchs.push (Point); 
        IF ( touchs.length> = 2) { 
            This.Draw (touchs); 
        } 
    }, 
    // canvas touch gesture in response to the movement end 
    end: function (E) { 
        the console.log ( "touch end" + E); 
        // Clear trace array 
        for (the let I = 0; I < touchs .length; I ++) { 
            touchs.pop (); 
        } 
    }, 
    // canvas touch cancel response 
    cancel: function (E) { 
        the console.log ( "touch cancel" + e ); 
    } 
    // canvas in response to a long press gesture 
    tap: function (e) {
        console.log ( "long press gesture" + E); 
    }, 
    error: function (E) { 
        console.log ( "Canvas a touch error" E +); 
    }, 
    / ** 
    * lifecycle function - monitor page load 
    * / 
    the onLoad: function (Options) { 
        // get context Canvas 
        Content = wx.createCanvasContext ( 'Sign');
         // Sets the line color 
        content.setStrokeStyle ( "# 000"); 
        width of wire disposed // 
        content.setLineWidth (3); 
        // Sets the line cap style more rounded ends 
        content.setLineCap ( 'round'); 
        // set two lines are connected at a more rounded 
        content.setLineJoin ( 'round'); 
        this.getQiniuToken () 
    },  
    / /draw
    Draw :function (touchs) {
        let point1 = touchs[0];
        let point2 = touchs[1];
        touchs.shift();
        content.moveTo(point1.x, point1.y);
        content.lineTo(point2.x, point2.y);
        content.stroke();
        content.draw(true);
    },
    //清除操作
    clearClick: function () {
        //清除画布
        content.clearRect(0, 0,750, 700);
        content.draw(true);
    },
    //保存图片
    saveClick: function () {
        var that = this;
        wx.canvasToTempFilePath({
            canvasId: 'sign',
            success: function (res) {
                that.uploadImg(res.tempFilePath)
            }
        })
    },
    /**
     * 获取qiniuToken
     */
    getQiniuToken: function() {
      const that = this;
      const url = app.config.serverUrl + '/common/qiniuToken';
      const URL = '/common/qiniuToken';
      const params = {};
      const allData = app.signature(URL, params);
      
      wx.request({
        url: url,
        method: 'POST',
        data: allData,
        header: {
          'content-type': 'application/json'
        },
        success: function(res) {
          that.setData({
            upToken: res.data.uptoken
          });
        }
      })
    },
    /**
     * 图片上传
     */
    uploadImg: function(url) {
      const that = this;
    
      const param = {
        region: 'NCN',
        domain: app.config.qiniuUrl,
        shouldUseQiniuFileName: false,
        uploadURL: app.config.qiniuUrl,
        uptoken: that.data.upToken
      };
        qiniuUploader.upload(url, function(info) {
            that.setData({
                signImage: info.key
            });
        }, function(error) {
            app.errorLog(error);
        }, param);
    },
})

View Code

 

wxss

page {
  background: #fbfbfb;
  height: auto;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
  margin: 30rpx 0;
  overflow: hidden;
  display: flex;
  align-content: center;
  flex-direction: row;
  justify-content: center;
  font-size: 28rpx;
}

.sign {
    display: block;
  background: #fff;
  width: 100%;
  height: 100%;
}

.handRight {
  display: inline-flex;
  align-items: center;
}

.handCenter {
  border: 4rpx dashed #e9e9e9;
  flex: 5;
  overflow: hidden;
  box-sizing: border-box;
}

.handTitle {
  transform: rotate(90deg);
  flex: 1;
    margin-bottom: 10px;
  color: #666;
}

.handBtn button {
  font-size: 28rpx;
}

.handBtn {
  height: 95vh;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  flex: 1;
}

.delBtn,.subBtn {
  position: absolute;
  bottom: 300rpx;
  left: 0rpx;
  transform: rotate(90deg);
  color: #666;
}
.subBtn{
    bottom: 100rpx;
}

.delBtn image {
  position: absolute;
  top: 13rpx;
  left: 25rpx;
}

View Code

 

Pkg_delete minor changes, the tablet can be achieved, because it is their own business, when you click OK when finished, I will pass on seven cattle pictures

effect