微信小程序实现手指触摸画板


Posted in Javascript onJuly 09, 2018

本文实例为大家分享了微信小程序实现手指触摸画板的具体代码,供大家参考,具体内容如下

先看效果图:

微信小程序实现手指触摸画板

wxml

<!--pages/shouxieban/shouxieban.wxml-->
<view class="container">
 <view>手写板(请在下方区域手写内容)</view>
 <canvas style="width: {{canvasw}}px; height: {{canvash}}px" class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
 <view class='btns canvaspd'>
 <button bindtap="cleardraw">清除画板</button>
 <button bindtap="setSign">确定</button>
 </view>
 <image src='{{canvasimgsrc}}'></image> 
</view>

js

var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态,标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
// pages/shouxieban/shouxieban.js
Page({
 /**
 * 页面的初始数据
 */
 data: {
 //canvas宽高
 canvasw: 0,
 canvash: 0,
 //canvas生成的图片路径
 canvasimgsrc: ""
 },
 //画布初始化执行
 startCanvas: function () {
 var that = this;
 //创建canvas
 this.initCanvas();
 //获取系统信息
 wx.getSystemInfo({
  success: function (res) {
  canvasw = res.windowWidth - 0;//设备宽度
  canvash = canvasw;
  that.setData({ 'canvasw': canvasw });
  that.setData({ 'canvash': canvash });
  }
 });
 
 },
 //初始化函数
 initCanvas: function () {
 // 使用 wx.createContext 获取绘图上下文 context
 context = wx.createCanvasContext('canvas');
 context.beginPath()
 context.setStrokeStyle('#000000');
 context.setLineWidth(4);
 context.setLineCap('round');
 context.setLineJoin('round');
 },
 //事件监听
 canvasIdErrorCallback: function (e) {
 console.error(e.detail.errMsg)
 },
 canvasStart: function (event) {
 isButtonDown = true;
 arrz.push(0);
 arrx.push(event.changedTouches[0].x);
 arry.push(event.changedTouches[0].y);
 
 },
 canvasMove: function (event) {
 if (isButtonDown) {
  arrz.push(1);
  arrx.push(event.changedTouches[0].x);
  arry.push(event.changedTouches[0].y);
 
 };
 
 for (var i = 0; i < arrx.length; i++) {
  if (arrz[i] == 0) {
  context.moveTo(arrx[i], arry[i])
  } else {
  context.lineTo(arrx[i], arry[i])
  };
 
 };
 context.clearRect(0, 0, canvasw, canvash);
 
 context.setStrokeStyle('#000000');
 context.setLineWidth(4);
 context.setLineCap('round');
 context.setLineJoin('round');
 context.stroke();
 
 context.draw(false);
 },
 canvasEnd: function (event) {
 isButtonDown = false;
 },
 //清除画布
 cleardraw: function () {
 //清除画布
 arrx = [];
 arry = [];
 arrz = [];
 context.clearRect(0, 0, canvasw, canvash);
 context.draw(true);
 },
 //提交签名内容
 setSign: function () {
 var that = this;
 if (arrx.length == 0) {
  wx.showModal({
  title: '提示',
  content: '签名内容不能为空!',
  showCancel: false
  });
  return false;
 };
 console.log("不是空的,canvas即将生成图片")
 //生成图片
 wx.canvasToTempFilePath({
  canvasId: 'canvas',
  success: function (res) {
  console.log("canvas可以生成图片")
  console.log(res.tempFilePath, 'canvas图片地址');
  that.setData({ canvasimgsrc: res.tempFilePath })
  //code 比如上传操作
 
  },
  fail: function () {
  console.log("canvas不可以生成图片")
  wx.showModal({
   title: '提示',
   content: '微信当前版本不支持,请更新到最新版本!',
   showCancel: false
  });
  },
  complete: function () {
 
  }
 })
 
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 //画布初始化执行
 this.startCanvas();
 
 }
})

css

/* pages/shouxieban/shouxieban.wxss */
/*手写板 */
page{
 background: #f6f6f6;
 padding: 5px auto
}
canvas{
 border: 1px solid #d0d0d0;
 margin: 5rpx;
 background: #f2f2f2
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
prototype 学习笔记整理
Jul 17 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
微信小程序canvas实现刮刮乐效果
Jul 09 #Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
js中Object.defineProperty()方法的不详解
Jul 09 #Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 #Javascript
微信小程序实现倒计时补零功能
Jul 09 #Javascript
Angular6中使用Swiper的方法示例
Jul 09 #Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 #Javascript
You might like
一个分页的论坛
2006/10/09 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python 查看文件的编码格式方法
2017/12/21 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
深入了解Django中间件及其方法
2019/07/26 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
信息专业个人的自我评价
2013/12/27 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server