2019-6-24 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
目錄結構：
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.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。