欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序canvas写字板效果及实例

程序员文章站 2022-04-10 10:21:02
微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/ca...

微信小程序canvas写字板效果及实例

写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容

微信小程序canvas写字板效果及实例微信小程序canvas写字板效果及实例

app.json:

添加一个路由:"pages/canvas/canvas"

{
 "pages":[
  "pages/index/index",
  "pages/logs/logs",
  "pages/canvas/canvas"
 ],
 "window":{
  "navigationbarbackgroundcolor": "#ea6a46",
  "navigationbartextstyle":"white",
  "navigationbartitletext": "写字板",
  "backgroundtextstyle":"dark",
  "backgroundcolor":"white",
  "enablepulldownrefresh":"true"
 }
}

然后就是:

canvas.wxml:

<!--pages/canvas/canvas.wxml-->
<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasstart" bindtouchmove="canvasmove" bindtouchend="canvasend" touchcancel="canvasend" binderror="canvasiderrorcallback"></canvas>
<button type="default" bindtap="cleardraw">清除画布</button>
<button type="default" bindtap="getimg">导出图片</button>

canvas.js:

// canvas 全局配置
var context = null;// 使用 wx.createcontext 获取绘图上下文 context
var isbuttondown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
wx.getsysteminfo({
 success: function (res) {
  canvasw = res.windowwidth;//设备宽度
  canvash = res.windowwidth*7/15;
 }
});
//注册页面
page({
 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);
  //context.moveto(event.changedtouches[0].x, event.changedtouches[0].y);
  
 },
 canvasmove: function (event) {
  if (isbuttondown) {
   arrz.push(1);
   arrx.push(event.changedtouches[0].x);
   arry.push(event.changedtouches[0].y);
   // context.lineto(event.changedtouches[0].x, event.changedtouches[0].y);
   // context.stroke();
   // context.draw()

  }; 
  
  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.stroke();
  
  context.draw(true);
 },
 canvasend: function (event) {
  isbuttondown = false; 
 },
 cleardraw: function () {
  //清除画布
  arrx = [];
  arry = [];
  arrz = [];
  context.clearrect(0, 0, canvasw, canvash);
  context.draw(true);
 },
 getimg: function(){
  if (arrx.length==0){
   wx.showmodal({
    title: '提示',
    content: '签名内容不能为空!',
    showcancel: false
   });
   return false;
  };
  //生成图片
  wx.canvastotempfilepath({
   canvasid: 'canvas',
   success: function (res) {
    console.log(res.tempfilepath);
    //存入服务器
    wx.uploadfile({
     url: 'a.php', //接口地址
     filepath: res.tempfilepath,
     name: 'file',
     formdata: {                 //http 请求中其他额外的 form data 
      'user': 'test'
     },
     success: function (res) {
      console.log(res);
     },
     fail: function (res) {
      console.log(res);
     },
     complete: function (res) {
      
     }
    });
   }
  })

 },
 /**
  * 页面的初始数据
  */
 data: {
  src: ""
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onload: function (options) {
  // 使用 wx.createcontext 获取绘图上下文 context
  context = wx.createcanvascontext('canvas');
  context.beginpath() 
  context.setstrokestyle('#000000');
  context.setlinewidth(4);
  context.setlinecap('round');
  context.setlinejoin('round');


 }
})
 

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!