追求卓越一諾千金

藍藍設計_-御诚电脑配件批发,2011年成立--年末负债总额,主創清華團隊|||31选7大星走势图福建省,專注軟件和互聯網ui設計開發-_1699彩票。擅長企業信息化管理_|_阿里170号段预约网站、監控_|_198彩票注册、大數據軟件UIUE谘詢和設計開發服務__125345赢彩天。立足UI_||大肚吧分娩小说,好好學習-第一代身份证什么时候停用,天天進步-|-历任北京市委书记!


微信小程序--實現canvas繪圖並且可以複盤回看

2019-6-24 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容|_镇平效能网,每天自動發到您的郵箱中__spy3wc高清厕所视频, 請點這裏

目錄結構-__江陵肃父母是谁:



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
       * 拖動球員|_-178国际娱乐:moveplayer
       * 清除畫布|--三星手机型号大全:clearCanvas
       * 橡皮擦|__金枝玉叶玉琪:clearLine
       */
      operation:"mapping",//操作類型
      /**
       * 繪製路徑
       * startX__塔河贴吧:開始x坐標
       * startY_-小腻腻博客:開y縱坐標
       * currentX-||大学生个人自传范文:目標位置的 x 坐標
       * currentY-_2013明星篮球赛:目標位置的 y 坐標
       * z--306官方彩票开奖:1代表畫線時鼠標處於move狀態_ua女人网妇科疾病,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.jwrumpff.com )是一家專注而深入的界麵設計公司-梵谷饰品美学设计,為期望卓越的國內外企業提供卓越的UI界麵設計-ilux me、BS界麵設計 |-|观音灵签8、 cs界麵設計 -_|168彩票IOS、 ipad界麵設計 _|_22彩票平台有风险吗、 包裝設計 --易彩彩民福地福彩、 圖標定製 -||铁梨花41、 用戶體驗 |-9158virtualcamera、交互設計-卓易彩票官方、網站建設 |_堵车电影、平麵設計服務--|亿博平台。

標簽: 微信小程序--實現canvas繪圖並且可以複盤回看 « 2019 年 LOGO 設計趨勢報告(下) | 不知道叫什麼|--让你取暖?送你一份超全麵的產品基礎術語科普指南»


訂閱Rss