快3北京开:微信小程序实现手指触摸画板

北京快三走势图 www.mxld9.cn  更新时间:2018年07月09日 15:27:44   作者:a_靖   我要评论

这篇文章主要为大家详细介绍了微信小程序实现手指触摸画板,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

先看效果图:

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
}

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

相关文章

  • js事件(Event)知识整理

    js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下
    2012-10-10
  • JavaScript中的return语句简单介绍

    JavaScript中的return语句简单介绍

    return语句在js中起到举足轻重的作用,该关键字不仅具有返回函数值得功能,还具有一些特殊的用法,有个清晰的把握是非常有必要的,下面通过本篇文章给大家简单介绍下return语句的作用
    2015-12-12
  • JS实现移动端整屏滑动的实例代码

    JS实现移动端整屏滑动的实例代码

    本文通过实例代码给大家分享了基于js 实现移动端整屏滑动效果,基本思路是检测手指滑动方向,获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了,具体实现代码大家参考下本文
    2017-11-11
  • javascript 对象数组根据对象object key的值排序

    javascript 对象数组根据对象object key的值排序

    本文仅仅是实现了javascript 对象数组根据对象object key的值排序,算是对自己学习javascript这么久的一个小结,希望大家能够喜欢
    2015-03-03
  • js游戏人物上下左右跑步效果代码分享

    js游戏人物上下左右跑步效果代码分享

    这篇文章主要介绍了js游戏人物上下左右跑步效果,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • 原生javascript实现Tab选项卡切换功能

    原生javascript实现Tab选项卡切换功能

    本文主要介绍了使用原生javascript实现Tab选项卡切换的功能,虽然jQuery有很多类似的插件,单jQuery库着实有点庞大,这种小功能还是直接用javascript来做就好了。
    2015-01-01
  • JavaScript的递归之递归与循环示例介绍

    JavaScript的递归之递归与循环示例介绍

    对于不同类型的需要重复计算的问题,循环和递归两种方法各有所长,能给出更直观简单的方案,下面为大家详细的介绍下JavaScript的递归与循环,感兴趣的朋友可以了解下
    2013-08-08
  • 使用Javascript简单计算器

    使用Javascript简单计算器

    这篇文章主要为大家详细介绍了使用Javascript简单计算器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 微信小程序实现留言板(Storage)

    微信小程序实现留言板(Storage)

    这篇文章主要为大家详细介绍了微信小程序实现留言板,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 浅析js的??榛嘈?require.js

    浅析js的??榛嘈?require.js

    requirejs是一个JavaScript文件和??榧釉仄?。requireJS允许你把你的javascript代码独立成文件和???,同时管理每个??榧涞囊览倒叵?。本文主要对require.js的使用与工作原理进行系统介绍。需要的朋友来看下吧
    2016-12-12

最新评论

  • 中共中央直属机关党校 2019-04-21
  • 全国自由搏击锦标赛落下帷幕 2019-04-20
  • 近来人民网强国社区的评论少了很多,那是因为人们反映事实存在的问题,绝大多数都是说了等于白说,于是渐渐地失望了,渐渐地越来越多的人“算了,不说了!” 2019-04-19
  • 热巴窦骁携手演绎经典神话 2019-04-19
  • 神奇!沈阳现3D稻田画 2019-04-18
  • 中国和巴基斯坦将合拍电影《天路》 2019-04-18
  • 电视剧抱团出海 又有哪些作品走出了国门 2019-04-17
  • 谈判与加关税的不同在于,后者没有给小左唱赞歌的机会 2019-04-16
  • 全世界人民都要顺应人类社会发展规律,不断扩大社会财富公有制的范围,不断缩小社会财富私有制的范围,以便最终消灭社会财富私有制,建立共产主义社会财富公有制。 2019-04-15
  • 新时代·新征程十九大精神在基层---“各地聚焦”--湖南频道--人民网 2019-04-14
  • 首部由中国人翻译的120回《三国演义》问世 2019-04-14
  • 2022年冬奥会筹备进行时 2019-04-13
  • 牙膏的10个超实用功能 速收藏 2019-04-13
  • 新华保险荆州中支助力首届荆楚文化旅游节开幕 2019-04-12
  • 未来十天 山西以对流性天气为主 多阵性降水 2019-04-12
  • 894| 72| 78| 795| 369| 209| 548| 385| 988| 304|