小程序模板网

小程序手写签名(wepy)

2018-08-29 周武王

对于手写签名组件组件晚上有很多种写法,我选择了一种进行了wepy的框架的改造。如果使用wepy框架做手写签名的话可以直接复制下面的代码。

这里需要提醒的是:安卓手机和苹果手机有适配性的问题,苹果手机在签名的以后手机将无法进行文档的上下左右的滑动,而安卓手机没有影响。解决这个问题的方法是给canvas给disable-scroll属性绑定一个变量 disable-scroll="true" 当进行滑动的时候讲disable-scroll属性设置成true,滑动完成时将属性还原为false.

 

				
  1. <template>
    <view class='content'>
    <canvas class='firstCanvas' canvas-id="firstCanvas" bindtouchmove='move' bindtouchstart='start' bindtouchend='end' bindtouchcancel='cancel' bindlongtap='tap' disable-scroll='true' binderror='error'>
    </canvas>
    <button bindtap='clearClick'>清除</button>
    <button bindtap='saveClick'>保存图片</button>
    <image id='signatureImg' src='{{signImage}}'></image>
    </view>
    </template>
    <script>
    import wepy from 'wepy';
    var content = null;
    var touchs = [];
    var canvasw = 0;
    var canvash = 0;
    
    export default class Index extends wepy.page {
    config = {};
    components = {};
    data = {
    signImage: '',
    };
    events = {};
    methods = {
    start: function(event) {
    // console.log("触摸开始" + event.changedTouches[0].x)
    // console.log("触摸开始" + event.changedTouches[0].y)
    //获取触摸开始的 x,y
    let point = {
    x: event.changedTouches[0].x,
    y: event.changedTouches[0].y
    }
    touchs.push(point)
    },
    // 画布的触摸移动手势响应
    move: function(e) {
    let point = {
    x: e.touches[0].x,
    y: e.touches[0].y
    }
    touchs.push(point)
    if (touchs.length >= 2) {
    this.draw(touchs)
    }
    },
    // 画布的触摸取消响应
    cancel: function(e) {
    console.log("触摸取消" + e)
    },
    // 画布的长按手势响应
    tap: function(e) {
    console.log("长按手势" + e)
    },
    error: function(e) {
    console.log("画布触摸错误" + e)
    },
    // 画布的触摸移动结束手势响应
    end: function(e) {
    console.log("触摸结束" + e)
    //清空轨迹数组
    for (let i = 0; i < touchs.length; i++) {
    touchs.pop()
    }
    },
    };
    async onShow() {}
    async onLoad(options) {
    //获得Canvas的上下文
    content = wx.createCanvasContext('firstCanvas')
    //设置线的颜色
    content.setStrokeStyle("#00ff00")
    //设置线的宽度
    content.setLineWidth(5)
    //设置线两端端点样式更加圆润
    content.setLineCap('round')
    //设置两条线连接处更加圆润
    content.setLineJoin('round')
    }
    draw(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() {
    //清除画布
    content.clearRect(0, 0, canvasw, canvash)
    content.draw(true)
    }
    saveClick() {
    var that = this
    wx.canvasToTempFilePath({
    canvasId: 'firstCanvas',
    success: function(res) {
    //打印图片路径
    console.log(res.tempFilePath)
    //设置保存的图片
    that.setData({
    signImage: res.tempFilePath
    })
    }
    })
    }
    }
    </script>
    <style>
    .content {
    width: 100%;
    height: 500px;
    background-color: red;
    }
    .firstCanvas {
    background-color: blue;
    width: 100%;
    height: 200px;
    }
    image {
    width: 100%;
    height: 200px;
    background-color: orange;
    }
    </style>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24746.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询