微信小程序--实现canvas绘图并且可以复盘回看 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


微信小程序--实现canvas绘图并且可以复盘回看

2019-6-24 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

目录结构:



index.wxml:

<view class="canvasBox">
  <canvas canvas-id="myCanvas" class="myCanvas" catchtouchstart='canvasStart' catchtouchmove='canvasMoving'></canvas>
</view>
<view class="btn">
  <button type="warn" bindtap='drawPen'>画笔</button>
  <button type="primary" bindtap='clearCanvas'>清空画板</button>
  <button type="warn" bindtap='clearLine'>橡皮擦</button>
  <button style='background:#000;color:#fff;' bindtap="black">黑色</button>
  <button style='background:yellow;color:#000;' bindtap="yellow">黄色</button>
  <button style='background:red;color:#fff;' bindtap="red">红色</button>
  <button style='background:blue;color:#fff;' bindtap="blue">蓝色</button>
  <button style='background:green;color:#fff;' bindtap="green">绿色</button>
  <button type="warn" bindtap="startRecording">开始录制</button>
  <button type="primary" bindtap='rePlay'>复盘</button>
  <button></button>
</view>
index.wxss:

.canvasBox{
  position: relative;
  top:0;
  left:0;
  width: 750rpx;
  height:800rpx;
  background:#eee;
}
.canvasBox .myCanvas{
  width: 100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
}
 
.btn{
  width: 750rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.btn button{
  width: 180rpx;
  font-size: 24rpx;
}
index.js:

//index.js
//获取应用实例
import {hisData} from "../../utils/historyOperation.js";
const app = getApp()
var moveToX = 0, moveToY = 0, lineToX = 0, lineToY = 0;
var context = null;
var isStart = false;
var date;
var startDate;//开始时刻
var penType = "drawPen";
var colorStr = "#000";
var operationType = "mapping";
Page({
  data: {
    
  },
  
  canvasStart:function(e){
    var x = Math.floor(e.touches[0].clientX);
    var y = Math.floor(e.touches[0].clientY);
    date = new Date();
    moveToX = x;
    moveToY = y;
    operationType = "mapping";
    if(penType === "clearPen"){
      operationType = "clearLine";
    }
    if (isStart) {
      hisData.hisDataArr.push({
        time: date.getTime() - startDate,
        operation: operationType,
        lineArr: {
          startX: moveToX,
          startY: moveToY,
          currentX: x,
          currentY: y,
          z: 1,
          colorStr:colorStr
        }
      })
    }
  },
  //绘制线条
  canvasMoving:function(e){
    date = new Date();
    var x = Math.floor(e.changedTouches[0].clientX);
    var y = Math.floor(e.changedTouches[0].clientY);
    lineToX = x;
    lineToY = y;
    if(penType === "clearPen"){
      operationType = "clearLine";
      context.clearRect(x-12, y-12, 24, 24);
      context.draw(true);
    }else{
      operationType = "mapping";
      context.setStrokeStyle(colorStr);
      context.moveTo(moveToX, moveToY);
      context.lineTo(lineToX, lineToY);
    }
    if (isStart) {
      hisData.hisDataArr.push({
        time: date.getTime() - startDate,
        operation: operationType,
        lineArr: {
          startX: moveToX,
          startY: moveToY,
          currentX: lineToX,
          currentY: lineToY,
          z: 1,
          colorStr: colorStr
        }
      })
    }
    moveToX = lineToX;
    moveToY = lineToY;
    context.stroke();
    context.draw(true);
  },
  
  clearCanvas:function(){
    context.clearRect(0,0,375,400);
    context.draw(true);
    date = new Date();//记录当前操作时刻
    operationType = "clearCanvas";
    if(isStart){
      hisData.hisDataArr.push({
        time: date.getTime() - startDate,
        operation: operationType,
        lineArr: {
          startX: -1,
          startY: -1,
          currentX: -1,
          currentY: -1,
          z: 0,
          colorStr: colorStr
        }
      })
    }
  },
  
  drawPen:function(){
    penType = "drawPen";
  },
  clearLine:function(){
    penType = "clearPen";
  },
  black:function(){
    colorStr = "#000";
  },
  yellow: function () {
    colorStr = "yellow";
  },
  red: function () {
    colorStr = "red";
  },
  blue: function () {
    colorStr = "blue";
  },
  green: function () {
    colorStr = "green";
  },
  startRecording:function(){
    isStart = true;
    date = new Date();
    startDate = date.getTime();
  },
  rePlay:function(){
    wx.navigateTo({
      url: '../replay/replay',
    })
  },
  onLoad: function () {
    isStart = false;
    context = wx.createCanvasContext('myCanvas');
    context.beginPath();
    context.setStrokeStyle('#000');
    context.setLineWidth(5);
    context.setLineCap('round');
    context.setLineJoin('round');
  }
})
historyOperation.js:该文件用来保存历史操作,以便复盘

const hisData = {
  hisDataArr:[
    {
      time:0,//操作时间
      /**
       * 操作类型
       * 绘图:mapping
       * 拖动球员:moveplayer
       * 清除画布:clearCanvas
       * 橡皮擦:clearLine
       */
      operation:"mapping",//操作类型
      /**
       * 绘制路径
       * startX:开始x坐标
       * startY:开y纵坐标
       * currentX:目标位置的 x 坐标
       * currentY:目标位置的 y 坐标
       * z:1代表画线时鼠标处于move状态,0代表处于松开状态
       * colorStr:线的填充颜色
       */
      lineArr: {    //绘制路径
        startX:0,
        startY:0,
        currentX:0,
        currentY:0,
        z:0,
        colorStr:"#000"
      }
    }
  ]
};
 
export {hisData};
复盘:

reply.wxml:

<!--pages/replay/replay.wxml-->
<view class="replayBox">
  <canvas canvas-id='myCanvas' class="myCanvas"></canvas>
</view>
<button type="warn" bindtap="start">开始</button>
reply.wxss:

/* pages/replay/replay.wxss */
.replayBox{
  position:relative;
  width: 750rpx;
  height:800rpx;
  background: #eee;
}
 
.replayBox .myCanvas{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
 
reply.js:

// pages/replay/replay.js
import {hisData} from "../../utils/historyOperation.js";
var startDate;
var date;
var curTime;
var context = null;
var timer = null;
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
 
  },
  start:function(){
    context.clearRect(0, 0, 375, 400);
    clearInterval(timer);
    date = new Date();
    startDate = date.getTime();
    var i = 0;
    var that = this;
    var len = hisData.hisDataArr.length;
    timer = setInterval(function(){
      date = new Date();
      curTime = date.getTime() - startDate;
      if (curTime >= hisData.hisDataArr[i].time){
        switch (hisData.hisDataArr[i].operation) {
          case "mapping":
            context.setStrokeStyle(hisData.hisDataArr[i].lineArr.colorStr);
            context.moveTo(hisData.hisDataArr[i].lineArr.startX, hisData.hisDataArr[i].lineArr.startY);
            context.lineTo(hisData.hisDataArr[i].lineArr.currentX, hisData.hisDataArr[i].lineArr.currentY);
            context.stroke();
            context.draw(true);
            break;
          case "clearCanvas":
            context.clearRect(0, 0, 375, 400);
            context.draw(true);
            break;
          case "clearLine":
            context.clearRect(hisData.hisDataArr[i].lineArr.currentX-12, hisData.hisDataArr[i].lineArr.currentY-12, 24, 24);
            context.draw(true);
            break;
        }
        i++;
      }
      if(i >= len){
        clearInterval(timer);
      }
    },2);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    context = wx.createCanvasContext('myCanvas');
    context.beginPath();
    context.setStrokeStyle('#000');
    context.setLineWidth(3);
    context.setLineCap('round');
    context.setLineJoin('round');
  }
})
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: 微信小程序--实现canvas绘图并且可以复盘回看 « 2019 年 LOGO 设计趋势报告(下) | 不知道叫什么?送你一份超全面的产品基础术语科普指南»


蓝蓝 http://www.bjhbys.com

  1. 2019年9月(22)
  2. 2019年8月(63)
  3. 2019年7月(61)
  4. 2019年6月(59)
  5. 2019年5月(32)
  6. 2019年4月(37)
  7. 2019年3月(43)
  8. 2019年2月(26)
  9. 帝皇彩票官网2019年1月(45)
  10. 2018年12月(41)
  11. 2018年11月(40)
  12. 2018年10月(29)
  13. 2018年9月(40)
  14. 帝皇彩票官网2018年8月(87)
  15. 2018年7月(107)
  16. 2018年6月(86)
  17. 2018年5月(110)
  18. 2018年4月(40)
  19. 2018年3月(35)
  20. 2017年8月(35)
  21. 2017年7月(45)
  22. 2017年6月(7)
  23. 2017年5月(27)
  24. 2017年4月(51)
  25. 2017年3月(70)
  26. 2017年2月(65)
  27. 2017年1月(69)
  28. 2016年12月(55)
  29. 2016年11月(111)
  30. 帝皇彩票官网2016年10月(92)
  31. 2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 2016年3月(19)
  36. 2016年2月(26)
  37. 2016年1月(30)
  38. 2015年12月(33)
  39. 2015年11月(35)
  40. 2015年10月(46)
  41. 帝皇彩票官网2015年9月(43)
  42. 2015年8月(40)
  43. 2015年7月(33)
  44. 2015年6月(46)
  45. 2015年5月(58)
  46. 2015年4月(70)
  47. 2015年3月(55)
  48. 2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 2014年11月(84)
  52. 2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 帝皇彩票官网2014年7月(13)
  56. 帝皇彩票官网2014年6月(66)
  57. 2014年5月(99)
  58. 2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 2013年12月(106)
  63. 2013年11月(112)
  64. 2013年10月(61)
  65. 2013年9月(20)
  66. 2013年7月(13)
  67. 2013年6月(27)
  68. 2013年5月(48)
  69. 2013年4月(39)
  70. 2013年3月(8)
  71. 2013年2月(20)
  72. 帝皇彩票官网2013年1月(31)
  73. 帝皇彩票官网2012年12月(33)
  74. 2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 2012年6月(15)
  79. 2012年5月(31)
  80. 2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
桔子彩票注册 大象彩票登入 状元彩票平台 状元彩票平台 状元彩票计划 帝皇彩票 桔子彩票网址 上海11选5开奖 pk10怎么玩 桔子彩票平台