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


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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
完美的js图片轮换效果
Feb 05 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
微信小程序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
php简单smarty入门程序实例
2015/06/11 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
vue编写简单的购物车功能
2021/01/08 Vue.js
Python创建模块及模块导入的方法
2015/05/27 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
电气专业应届生求职信
2013/11/01 职场文书
小学老师寄语大全
2014/04/04 职场文书
小学家长评语大全
2014/04/16 职场文书
初中生操行评语大全
2014/04/24 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL