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


Posted in Javascript onJanuary 12, 2018

本文实例讲述了微信小程序实现的涂鸦功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

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

布局文件index.wxml:

<view class="container">
  <!--画布区域-->
  <view class="canvas_area">
    <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作-->
    <canvas canvas-id="myCanvas" class="myCanvas"
      disable-scroll="false"
      bindtouchstart="touchStart"
      bindtouchmove="touchMove"
      bindtouchend="touchEnd">
    </canvas>
  </view>
  <!--画布工具区域-->
  <view class="canvas_tools">
    <view class="box box1" bindtap="penSelect" data-param="5"></view>
    <view class="box box2" bindtap="penSelect" data-param="15"></view>
    <view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
    <view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
    <view class="box box5" bindtap="clearCanvas"></view>
  </view>
</view>

逻辑功能文件index.js:

Page({
 data:{
  pen : 3, //画笔粗细默认值
  color : '#cc0033' //画笔颜色默认值
 },
 startX: 0, //保存X坐标轴变量
 startY: 0, //保存X坐标轴变量
 isClear : false, //是否启用橡皮擦标记
 //手指触摸动作开始
 touchStart: function (e) {
   //得到触摸点的坐标
   this.startX = e.changedTouches[0].x
   this.startY = e.changedTouches[0].y
   this.context = wx.createContext()
   if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
     this.context.setStrokeStyle('#F8F8F8') //设置线条样式 此处设置为画布的背景颜色 橡皮擦原理就是:利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果 
     this.context.setLineCap('round') //设置线条端点的样式
     this.context.setLineJoin('round') //设置两线相交处的样式
     this.context.setLineWidth(20) //设置线条宽度
     this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息
     this.context.beginPath() //开始一个路径 
     this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //添加一个弧形路径到当前路径,顺时针绘制 这里总共画了360度 也就是一个圆形 
     this.context.fill(); //对当前路径进行填充
     this.context.restore(); //恢复之前保存过的坐标轴的缩放、旋转、平移信息
   }else{
     this.context.setStrokeStyle(this.data.color)
     this.context.setLineWidth(this.data.pen)
     this.context.setLineCap('round') // 让线条圆润 
     this.context.beginPath()
   }
 },
 //手指触摸后移动
 touchMove: function (e) {
   var startX1 = e.changedTouches[0].x
   var startY1 = e.changedTouches[0].y
   if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
    this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息
    this.context.moveTo(this.startX,this.startY); //把路径移动到画布中的指定点,但不创建线条
    this.context.lineTo(startX1,startY1); //添加一个新点,然后在画布中创建从该点到最后指定点的线条
    this.context.stroke(); //对当前路径进行描边
    this.context.restore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息
    this.startX = startX1;
    this.startY = startY1;
   }else{
    this.context.moveTo(this.startX, this.startY)
    this.context.lineTo(startX1, startY1)
    this.context.stroke()
    this.startX = startX1;
    this.startY = startY1;
   }
   //只是一个记录方法调用的容器,用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/>
   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;
 }
})

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

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

Javascript 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 #Javascript
简单的Vue SSR的示例代码
Jan 12 #Javascript
详解如何在react中搭建d3力导向图
Jan 12 #Javascript
关于axios不能使用Vue.use()浅析
Jan 12 #Javascript
Vuex 进阶之模块化组织详解
Jan 12 #Javascript
动态Axios的配置步骤详解
Jan 12 #Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 #Javascript
You might like
PHP文件上传主要代码讲解
2013/09/30 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jquery 手势密码插件
2017/03/17 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
详解在Python和IPython中使用Docker
2015/04/28 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
利用Python爬取可用的代理IP
2016/08/18 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
党员的自我评价范文
2014/01/02 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript