微信小程序?qū)崿F(xiàn)簽字功能

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

效果展示

準備工作

1.canvas的使用

主要用到了 bindtouchstart ， bindtouchmove 兩個屬性，捕捉手指移動的同時，將移動前的坐標和移動后的坐標用canvas的畫圖api繪制出來

2.wx.createCanvasContext

這個api用于創(chuàng)建并獲取指定canvas對象

代碼說明

在wxml中聲明一個canvas

指定canvas-id和觸摸開始和移動函數(shù)

<canvas canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>

初始化canvas

onShow: function() {
 const context = wx.createCanvasContext('firstCanvas')
 this.setData({
  context: context
 })
 context.draw()
 },

給手指觸摸綁定函數(shù)

// 開始觸摸
bindtouchstart: function(e) {
 console.log("bindtouchstart", e);
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
 },
 
// 觸摸移動
bindtouchmove: function(e) {
 console.log("bindtouchstart", e);
 this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
 this.data.context.stroke();
 this.data.context.draw(true);
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
 },

具體代碼

index.wxml

<view class="container">
 <canvas style="margin: 0 15rpx;width: 720rpx;height: 720rpx;border: 1px #333 solid;background-color: #fff;" canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
 <view class="btn">
 <view bindtap='clear' class="clear">
  清除
 </view>
 <view bindtap='export' class="submit">
  提交
 </view>
 </view>
 <image style="width:360rpx;height:360rpx;margin: 10rpx 0;" mode="aspectFill" src="{{imgUrl}}"></image>
</view>

index.js

Page({
 data: {
 context: null,
 imgUrl: ""
 },
 /**記錄開始點 */
 bindtouchstart: function(e) {
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
 },
 /**記錄移動點，刷新繪制 */
 bindtouchmove: function(e) {
 this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
 this.data.context.stroke();
 this.data.context.draw(true);
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
 },
 /**清空畫布 */
 clear: function() {
 this.data.context.draw();
 },
 /**導出圖片 */
 export: function() {
 const that = this;
 this.data.context.draw(false, wx.canvasToTempFilePath({
  x: 0,
  y: 0,
  fileType: 'jpg',
  canvasId: 'firstCanvas',
  success(res) {
  const {
   tempFilePath
  } = res;
  that.setData({
   imgUrl: tempFilePath,
  })
  },
  fail() {
  wx.showToast({
   title: '導出失敗',
   icon: 'none',
   duration: 2000
  })
  }
 }))
 },
 onShow: function() {
 const context = wx.createCanvasContext('firstCanvas')
 this.setData({
  context: context
 })
 context.draw()
 },
})

總結

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)簽字功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對我們網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

上一篇：vue實現(xiàn)拖拽效果

欄目：JavaScript

下一篇：javascript中的相等操作符(==與===區(qū)別)

本文標題：微信小程序?qū)崿F(xiàn)簽字功能

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9433.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

微信小程序?qū)崿F(xiàn)簽字功能

您可能感興趣的文章

閱讀排行

本欄相關

隨機閱讀