精品视频一区二区三三区四区,亚洲精品无码av人在线观看,亚洲中文字幕久久精品无码喷水

微信小程序--實(shí)現(xiàn)canvas繪圖并且可以復(fù)盤(pán)回看

2019-6-24 seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

目錄結(jié)構(gòu)：

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'>畫(huà)筆</button>
<button type="primary" bindtap='clearCanvas'>清空畫(huà)板</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">藍(lán)色</button>
<button style='background:green;color:#fff;' bindtap="green">綠色</button>
<button type="warn" bindtap="startRecording">開(kāi)始錄制</button>
<button type="primary" bindtap='rePlay'>復(fù)盤(pán)</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
//獲取應(yīng)用實(shí)例
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;//開(kāi)始時(shí)刻
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();//記錄當(dāng)前操作時(shí)刻
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:該文件用來(lái)保存歷史操作，以便復(fù)盤(pán)

const hisData = {
hisDataArr:[
{
time:0,//操作時(shí)間
/**
* 操作類型
* 繪圖：mapping
* 拖動(dòng)球員：moveplayer
* 清除畫(huà)布：clearCanvas
* 橡皮擦：clearLine
*/
operation:"mapping",//操作類型
/**
* 繪制路徑
* startX：開(kāi)始x坐標(biāo)
* startY：開(kāi)y縱坐標(biāo)
* currentX：目標(biāo)位置的 x 坐標(biāo)
* currentY：目標(biāo)位置的 y 坐標(biāo)
* z：1代表畫(huà)線時(shí)鼠標(biāo)處于move狀態(tài)，0代表處于松開(kāi)狀態(tài)
* colorStr：線的填充顏色
*/
lineArr: { //繪制路徑
startX:0,
startY:0,
currentX:0,
currentY:0,
z:0,
colorStr:"#000"
}
}
]
};

export {hisData};
復(fù)盤(pán)：

reply.wxml:


<view class="replayBox">
<canvas canvas-id='myCanvas' class="myCanvas"></canvas>
</view>
<button type="warn" bindtap="start">開(kāi)始</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({

/**
* 頁(yè)面的初始數(shù)據(jù)
*/
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);
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
context = wx.createCanvasContext('myCanvas');
context.beginPath();
context.setStrokeStyle('#000');
context.setLineWidth(3);
context.setLineCap('round');
context.setLineJoin('round');
}
})
藍(lán)藍(lán)設(shè)計(jì)( www.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。