用wepy制作简易签名板

wepy是开发微信小程序的一个框架

wepy特点:

应用是最好的学习方式, 这次用wepy做一个简易签名板

源码

<style lang="less">
    
    canvas {
        margin: 20px auto;
        border: 2px solid #A84631;
        width: 300px;
        height: 200px;
        border-radius: 20px;
    }

    .info {
        text-align: center;
    }


    image{
        border: 1px solid #A84631;
        width: 60px;
        height: 40px;
        margin : 5px;
        border-radius: 5px;
    }

    button {
        width: 40%;
        float: left;
        margin: 5%;
    }

</style>

<template>

    <view>
    <canvas canvas-id="myCanvas"
        disable-scroll=true
        bindtouchstart="start"
        bindtouchmove="move"
        bindtouchend="end"/>

    <view class="info">
        鼠标当前位置: ({{x}}, {{y}})
    </view>
    <block>
        <button bindtap="exportImage" type="primary">存图</button>
    </block>    
    <block>
        <button bindtap="clearNow" type="warn">清空</button>
    </block>
    <block wx:for="{{filePathList}}">
        <image src="{{item}}"/>
    </block>

    </view>

</template>

<script>

    import wepy from 'wepy'
var ctx = wx.createCanvasContext('myCanvas')

export default class Fyxz extends wepy.page {
  data = {
        x: 0,
        y: 0,
        ctx: ctx,
        filePath: '',
        filePathList: []
      }

      methods = {

        start: (e) => {
          this.x = e.touches[0].x
          this.y = e.touches[0].y
        },
        move: (e) => {
          this.ctx.moveTo(this.x, this.y)
          this.x = e.touches[0].x
          this.y = e.touches[0].y
          this.ctx.lineTo(this.x, this.y)
          this.ctx.stroke()
          this.ctx.draw(true)
        },
        end: (e) => {

        },

        savaImageToDevice: (filePath) => {
          wx.saveImageToPhotosAlbum({
            success(res) {
            }
          })
        },

        exportImage: () => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 300,
            height: 200,
            destWidth: 300,
            destHeight: 200,
            canvasId: 'myCanvas',
            success: (res) => {
              let p = new Promise((resolve, reject) => {
                let fp = res.tempFilePath
                resolve(fp)
              })
              p.then((fp) => {
                console.log('++++>', fp)
                this.filePath = fp
                // 将照片保存到缓存
                this.methods.savaImageToDevice(fp)
                // 将缓存路径保存到列表
                this.filePathList.push(fp)
                // 手动更新数据
                this.$apply()
              }).then(() => {
                // 清屏
                this.methods.clearNow();
                console.log('更新完毕!')
              })
            }
          })
        },
        clearNow: () => {
          this.ctx.clearRect(0, 0, 100, 200)
          this.ctx.draw()
        }
      }
    }
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据之美

Hive Lock 那些事儿

0、背景 最近两天数据仓库中一张核心表遭遇了锁的问题,导致数据插入失败,影响挺大,之前一直没注意到这个问题,借此总结一下这块的知识和遇到的坑。 hive 在 0...

55650
来自专栏祝威廉

ElasticSearch Recovery 分析

org.elasticsearch.indices.cluster.IndicesClusterStateService.clusterChanged 被触发后...

23930
来自专栏FreeBuf

使用Burpsuite代理和pypcap抓包进行抢红包的尝试

起因 年底各厂陆续举办年会,年会期间自然少不了红包,只不过我厂年底搞了个APP专门进行抢红包,国际惯例,手快有,手慢无。于是萌生了利用脚本尝试抢红包的想法。 A...

40470
来自专栏帘卷西风的专栏

关于cocos2dx中文转UTF8码的解决方案

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

16230
来自专栏阿北的知识分享

yii2开发中19条推荐实践

这个是做yii2开发的基石,除非没有办法使用,否则请不要放弃,除了更容易的安装yii2及第三方扩展外,能使用Composer代表着你的服务器最少能运行起来php...

44160
来自专栏24K纯开源

用Qt写软件系列二:QCookieViewer(浏览器Cookie查看器)

预备     继上篇《浏览器缓存查看器QCacheViewer》之后,本篇开始QCookieViewer的编写。Cookie技术作为网站收集用户隐私信息、分析用...

29560
来自专栏牛客网

美团java后台实习三面

美团一面(50分钟) 1、spring的理解。 1、项目相关 2、Redis缓存的应用 3、http解析的全过程 4、Java中的锁 5、Hashmap和con...

42780
来自专栏架构师小秘圈

分布式唯一ID极简教程

一,题记 所有的业务系统,都有生成ID的需求,如订单id,商品id,文章ID等。这个ID会是数据库中的唯一主键,在它上面会建立聚集索引! ID生成的核心需求有两...

51070
来自专栏程序员的SOD蜜

“设计应对变化”--实例讲解一个数据同步系统

 系列文章索引: [WCF邮件通信系统应用 之 数据同步程序 之 设计内幕 之 一] 同步一个数据库要发多少个数据包? [WCF邮件通信系统应用 之 数据同步...

28470
来自专栏IMWeb前端团队

面向未来的测试框架 -- AVA

本文作者:IMWeb 邝伟科 原文出处:IMWeb社区 未经同意,禁止转载 ? 整个2016年前端圈还是一如既往的长江后浪推前浪,其中测试框架也不例...

23870

扫码关注云+社区

领取腾讯云代金券