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


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 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
图解javascript作用域链
May 27 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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 HandlerSocket的使用
2011/05/02 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php数组转成json格式的方法
2015/03/09 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
thinkphp分页实现效果
2016/10/13 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
什么是规则表达式
2012/05/03 面试题
计算机专业优秀大学生自我总结
2014/01/21 职场文书
开业典礼主持词
2014/03/21 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS