用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 实战教程 查看内容

微信小程序:canvas写字板效果

纸飞机 2017-6-15 11:16

写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容app.json:添加一个路由:"pages/canvas/canvas"{ "pages":, "window":{ "navigationBarBackgroundColor": "#ea6a46", "navigationBa ...

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

app.json:

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

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs",
  5. "pages/canvas/canvas"
  6. ],
  7. "window":{
  8. "navigationBarBackgroundColor": "#ea6a46",
  9. "navigationBarTextStyle":"white",
  10. "navigationBarTitleText": "写字板",
  11. "backgroundTextStyle":"dark",
  12. "backgroundColor":"white",
  13. "enablePullDownRefresh":"true"
  14. }
  15. }

然后就是:

canvas.wxml:

  1. <!--pages/canvas/canvas.wxml-->
  2. <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
  3. <button type="default" bindtap="cleardraw">清除画布</button>
  4. <button type="default" bindtap="getimg">导出图片</button>

canvas.js:

  1. // canvas 全局配置
  2. var context = null;// 使用 wx.createContext 获取绘图上下文 context
  3. var isButtonDown = false;
  4. var arrx = [];
  5. var arry = [];
  6. var arrz = [];
  7. var canvasw = 0;
  8. var canvash = 0;
  9. //获取系统信息
  10. wx.getSystemInfo({
  11. success: function (res) {
  12. canvasw = res.windowWidth;//设备宽度
  13. canvash = res.windowWidth*7/15;
  14. }
  15. });
  16. //注册页面
  17. Page({
  18. canvasIdErrorCallback: function (e) {
  19. console.error(e.detail.errMsg)
  20. },
  21. canvasStart: function (event){
  22. isButtonDown = true;
  23. arrz.push(0);
  24. arrx.push(event.changedTouches[0].x);
  25. arry.push(event.changedTouches[0].y);
  26. //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);
  27. },
  28. canvasMove: function (event) {
  29. if (isButtonDown) {
  30. arrz.push(1);
  31. arrx.push(event.changedTouches[0].x);
  32. arry.push(event.changedTouches[0].y);
  33. // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
  34. // context.stroke();
  35. // context.draw()
  36. };
  37. for (var i = 0; i < arrx.length; i++) {
  38. if (arrz[i] == 0) {
  39. context.moveTo(arrx[i], arry[i])
  40. } else {
  41. context.lineTo(arrx[i], arry[i])
  42. };
  43. };
  44. context.clearRect(0, 0, canvasw, canvash);
  45. context.stroke();
  46. context.draw(true);
  47. },
  48. canvasEnd: function (event) {
  49. isButtonDown = false;
  50. },
  51. cleardraw: function () {
  52. //清除画布
  53. arrx = [];
  54. arry = [];
  55. arrz = [];
  56. context.clearRect(0, 0, canvasw, canvash);
  57. context.draw(true);
  58. },
  59. getimg: function(){
  60. if (arrx.length==0){
  61. wx.showModal({
  62. title: '提示',
  63. content: '签名内容不能为空!',
  64. showCancel: false
  65. });
  66. return false;
  67. };
  68. //生成图片
  69. wx.canvasToTempFilePath({
  70. canvasId: 'canvas',
  71. success: function (res) {
  72. console.log(res.tempFilePath);
  73. //存入服务器
  74. wx.uploadFile({
  75. url: 'a.php', //接口地址
  76. filePath: res.tempFilePath,
  77. name: 'file',
  78. formData: { //HTTP 请求中其他额外的 form data
  79. 'user': 'test'
  80. },
  81. success: function (res) {
  82. 邀请
    鲜花
    鲜花
    握手
    握手
    雷人
    雷人
    路过
    路过
    鸡蛋
    鸡蛋
    分享至 : QQ空间
    收藏