加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

微信小程序实现的涂鸦功能示例【附源码下载】

发布时间:2020-12-14 20:09:47 所属栏目:资源 来源:网络整理
导读:本篇章节讲解微信小程序实现的涂鸦功能。供大家参考研究具体如下: 先来看看运行效果: 布局文件index.wxml: 逻辑功能文件index.js: 不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个 wx.drawCanvas({ canvasId: 'myCanvas',re

本篇章节讲解微信小程序实现的涂鸦功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

布局文件index.wxml:

逻辑功能文件index.js:

不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个 wx.drawCanvas({ canvasId: 'myCanvas',reserve: true,actions: this.context.getActions() // 获取绘图动作数组 }) },//手指触摸动作结束 touchEnd: function () { },//启动橡皮擦方法 clearCanvas: function(){ if(this.isClear){ this.isClear = false; }else{ this.isClear = true; } },penSelect: function(e){ //更改画笔大小的方法 console.log(e.currentTarget); this.setData({pen:parseInt(e.currentTarget.dataset.param)}); this.isClear = false; },colorSelect: function(e){ //更改画笔颜色的方法 console.log(e.currentTarget); this.setData({color:e.currentTarget.dataset.param}); this.isClear = false; } })

附:完整实例代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读