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

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

先来看看运行效果:

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

布局文件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;
 }
})

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

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

您可能感兴趣的文章:

  • 微信小程序 二维码canvas绘制实例详解
  • JS绘制微信小程序画布时钟
  • 微信小程序 绘图之饼图实现
  • 微信小程序 小程序制作及动画(animation样式)详解
  • 微信小程序的动画效果详解
  • 微信小程序 连续旋转动画(this.animation.rotate)详解
  • 微信小程序实现登录页云层漂浮的动画效果
  • 微信小程序开发之animation循环动画实现的让云朵飘效果
  • 微信小程序开发animation心跳动画效果
  • 微信小程序开发之麦克风动画 帧动画 放大 淡出
  • 微信小程序 动画的简单实例
时间: 2018-01-11

微信小程序的动画效果详解

前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ

微信小程序开发之麦克风动画 帧动画 放大 淡出

想做个录音机,第一步就卡在麦克风动画这里了. 先上gif.再吐槽. ① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动画.我在微信小程序文档 动画最下面找到这么一行字.这个锅是不是可以甩出去了? ps:如果有同学能实现动画循环,一定告诉我. ② 麦克风里面是个帧动画.没有前端的基础,只能用非主流的办法凑合了. 用wx:if{{}}判断js中定义的值是不是等于图片对应的数字来控制图片的显示和隐藏.

微信小程序 二维码canvas绘制实例详解

微信小程序 二维码canvas绘制 var canvas = { width: 100, height:36 }; function verification(ctx) { // //清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // //生成随机颜色 function getRandomColor() { return "#" + ("00000" + ((Math.random() * 167772

JS绘制微信小程序画布时钟

微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟. 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口. 首先来看一下构建这样一个小程序所需要的目录结构 从目录结构就可以看出来这个程序是简单的单层页面,画布渲染在pages下面的index页面上. 其中对程序有实际驱动作用的代码分别在index.js,index.wxml,index.wxss和app.json这几个文件中 Index.js文件里面存放着程序的逻辑层数据,

微信小程序 连续旋转动画(this.animation.rotate)详解

微信小程序 连续旋转动画 一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear'

微信小程序 动画的简单实例

微信小程序--简易动画案例 wxml: <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button> js:

微信小程序开发animation心跳动画效果

本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下 1.微信小程序开发animation心跳动画 wxml文件中: <view class="bottomViewItem"> <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value"> <view class="bo

微信小程序 绘图之饼图实现

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪.有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切.这里就先学习下微信小程序绘图的功能实现. 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-canvas.html 思路是先画第一段弧,然后连线回圆心,关闭路径,注意不需要连线到起始位,用fill()自动闭合到起始点,对照Photoshop里路径转选区的做法可以有助于理解:第二段弧以前一段弧为起始角度,再

微信小程序 小程序制作及动画(animation样式)详解

微信小程序制作 实现效果图: 微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 在看到上图,小伙伴

微信小程序实现登录页云层漂浮的动画效果

前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GIF动态图) 当我看到这张背景图的时候,强迫症立马来了,这云朵为什么不动,于是开始了一波折腾. 知识点 认识animation animation 属性是一个简写属性,用于设置六个动画属性: 值 描述 animation-name 规定需要绑定到选择器的 keyframe 名称 animation-duration 规定完成动画所花费的

微信小程序开发之animation循环动画实现的让云朵飘效果

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环.说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所

微信小程序开发之IOS和Android兼容的问题

微信小程序开发之IOS和Android兼容的问题 一.时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题 就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1.替换"-"为"/" 2.删除"."后面的字符串(带毫秒也会有问题) 代码如下: /** * 字符串转换为时间 * @param {String} src 字符串 */ strToDa

微信小程序开发之toast等弹框提示使用教程

介绍 微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT) . 看下有关参数说明: 代码很简单: wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }) mask属性好像并没有起作用.有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒. 还有一个函数是wx.hideToast() ,这个是隐藏toast,主要用于显示加载提示的时候用到,

微信小程序开发之Tabbar实例详解

微信小程序 Tabbar 1.下载微信小程序开发软件: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 2.扫描二维码登录,在手机点击确认登录 3.新建一个项目,这里选择无APPID,如果需要填写APPID,需要到微信小程序里面注册,然后就可以获取APPID,填写项目名称,选择项目目录(注释:微信小程序不会自己创建主目录文件,所以自己先建立一个项目文件夹,然后选择存放到这个文件夹中),添加项目,就

微信小程序开发之map地图实现教程

前言 微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy

微信小程序开发之toast提示插件使用示例

前言 3月28号微信更新了版本,showToast可以通过image参数修改默认icon了,最大时间也取消了. 以上两个更新实用很多,但icon还是无法去除.显示形式有点单一,无法自定义,可能后续更新会增加更多功能.下面来看看本文的详细内容: 下载文章下面的文件,放在根目录. 然后在app.js中引入js并添加到App中,如下: var wxToast = require('toast/toast.js') App({ wxToast , onLaunch: function () {} })

微信小程序中页面FOR循环和嵌套循环

微信小程序中页面FOR循环和嵌套循环 单个循环 <view wx:for="{{pinpaiTishi}}" wx:key="{{xxx}}"> <view wx:if="{{item.name!=null}}" wx:key="{{xxxx}}"> //判断name是否为null <view class="tr"> <view class="td-lef

微信小程序 UI布局常用技巧整理总结

微信小程序ui设计规范汇总: 微信小程序是一种全新的应用形态,微信小程序平台不需要下载安装即可使用应用的平台,微信小程序实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用. 也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸载. 概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体验,

微信小程序下载工具及调试详解

昨天晚些时候微信团队发布了微信小程序开发者工具.微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序.以下是官方文档,内含小程序开发者工具下载地址及调试指南. 下载地址:开发者工具0.9.092300版 windows 64版:windows 32版:mac版 为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. devtools 扫码登录 启动工具时,