微信小程序canvas写字板效果及实例
程序员文章站
2022-04-10 10:21:02
微信小程序canvas写字板效果及实例
写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容
app.json:
添加一个路由:"pages/ca...
微信小程序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'); } })
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
上一篇: 你以为学校是你家啊
下一篇: 详解nodejs异步I/O和事件循环