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


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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Python如何进行时间处理
2020/08/06 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
高三地理教学反思
2014/01/11 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python