微信小程序实现的涂鸦功能示例【附源码下载】
发布时间: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; } })附:完整实例代码点击此处本站下载。 希望本文所述对大家微信小程序开发有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- jQuery中extend实现深拷贝和浅拷贝
- 设计 – 在Web应用程序中查看分层数据的优雅方式
- HTML – 在Chrome中模糊缩小图像
- html – 不熟悉的Javascript语法/黑客
- Web应用程序开发的最佳Linux风格(LAMP)
- html – 为什么display = inline-block增加不可控制的垂直边
- jQuery cropit导出方法仅返回’data:,’字符串
- 我为什么要使用content_tag而不是“regular”html?
- jquery – 替换Div内容onclick
- React 中 Link 和 NavLink 组件 activeClassName、activeSt