5 changed files with 15 additions and 182 deletions
@ -1,176 +0,0 @@ |
|||||
<template> |
|
||||
<view class="canvas-box w-full"> |
|
||||
<canvas style="width: 100%; height: 450px" canvas-id="firstCanvas"></canvas> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { trainResult: { type: Object, default: () => {} } }, |
|
||||
|
|
||||
data() { |
|
||||
return { |
|
||||
canvas: null, |
|
||||
context: null, |
|
||||
points: [], |
|
||||
timers: [], |
|
||||
width: '', |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
mounted() { |
|
||||
this.$nextTick(() => { |
|
||||
const query = uni.createSelectorQuery().in(this); |
|
||||
query |
|
||||
.selectAll('.canvas-box') |
|
||||
.boundingClientRect(data => { |
|
||||
if (data && data.length) { |
|
||||
this.width = data[0].width; |
|
||||
this.clearTimers(); |
|
||||
this.initCanvas(); |
|
||||
this.drawImage(this.width); |
|
||||
} |
|
||||
}) |
|
||||
.exec(); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
// 清除定时器 |
|
||||
clearTimers() { |
|
||||
if (this.timers.length) { |
|
||||
this.timers.forEach(item => { |
|
||||
item && clearTimeout(item); |
|
||||
}); |
|
||||
this.timers = []; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 初始化canvas元素 ctx数据 |
|
||||
initCanvas() { |
|
||||
this.canvas = this.$refs['reduceCanvas']; |
|
||||
this.context = uni.createCanvasContext('firstCanvas', this); |
|
||||
}, |
|
||||
|
|
||||
// 绘制图片 |
|
||||
drawImage(width) { |
|
||||
const { context } = this; |
|
||||
const { cardUrl, lines } = this.trainResult; |
|
||||
let that = this; |
|
||||
|
|
||||
uni.downloadFile({ |
|
||||
url: cardUrl, |
|
||||
success: function (res) { |
|
||||
context.drawImage(res.tempFilePath, 0, 0, width, 450); |
|
||||
context.draw(true); |
|
||||
// 绘制路径 |
|
||||
lines.forEach(item => { |
|
||||
that.drawPath(item, width); |
|
||||
}); |
|
||||
}, |
|
||||
fail(error) { |
|
||||
console.error('图片加载失败:', error); |
|
||||
}, |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 绘制路径 |
|
||||
* 图片坐标是155,194 |
|
||||
*/ |
|
||||
drawPath(str, width) { |
|
||||
const data = this.generatePathData(str); |
|
||||
const ctx = this.context; |
|
||||
|
|
||||
this.timers.push( |
|
||||
setTimeout(() => { |
|
||||
if (!this.trainResult.lines || this.trainResult.lines.length === 0) { |
|
||||
return; |
|
||||
} |
|
||||
ctx.beginPath(); |
|
||||
ctx.setLineWidth(10); |
|
||||
ctx.setStrokeStyle('#1890ff'); |
|
||||
const x = (+data[0][0] * width) / 155; |
|
||||
const y = (+data[0][1] * 450) / 194; |
|
||||
ctx.moveTo(x, y); |
|
||||
if (data.length === 1) { |
|
||||
// 如果只有1个点 就画个小圆圈 |
|
||||
ctx.arc(x, y, 2, 0, Math.PI * 2, false); |
|
||||
ctx.fill(); |
|
||||
} |
|
||||
}, +data[0][2]), |
|
||||
); |
|
||||
|
|
||||
for (let i = 1, len = data.length; i < len; i++) { |
|
||||
if (!this.trainResult.lines || this.trainResult.lines.length === 0) return; |
|
||||
this.timers.push( |
|
||||
setTimeout(() => { |
|
||||
if (!this.trainResult.lines || this.trainResult.lines.length === 0) { |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
if (i > 1) { |
|
||||
this.clearAndDraw(data, i, width); |
|
||||
} else { |
|
||||
const x = (+data[i][0] * width) / 155; |
|
||||
const y = (+data[i][1] * 450) / 194; |
|
||||
ctx.lineTo(x, y); |
|
||||
ctx.stroke(); |
|
||||
ctx.draw(true); |
|
||||
} |
|
||||
|
|
||||
ctx.closePath(); |
|
||||
// }, +data[i][2]), |
|
||||
}, this.getIntervalTime(+data[i][2], +str.operateTime, +data[0][2])), |
|
||||
); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
clearAndDraw(data, i, width) { |
|
||||
if (!data || data.length < 1 || i >= data.length) return; |
|
||||
const ctx = this.context; |
|
||||
const x = (+data[0][0] * width) / 155; |
|
||||
const y = (+data[0][1] * 450) / 194; |
|
||||
ctx.moveTo(x, y); |
|
||||
for (let j = 1; j < i + 1; j++) { |
|
||||
const x = (+data[j][0] * width) / 155; |
|
||||
const y = (+data[j][1] * 450) / 194; |
|
||||
ctx.lineTo(x, y); |
|
||||
if (j === i) { |
|
||||
ctx.stroke(); |
|
||||
ctx.draw(true); |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 计算间隔时间 |
|
||||
* 第一条线的操作时间 |
|
||||
* 每条线的第一个点的时间 |
|
||||
* 时间 = （当前线条的操作时间 - 第一条线的操作时间）+ （当前点的时间-同一条线的第一个点的时间） |
|
||||
*/ |
|
||||
getIntervalTime(pointTime, operateTime, firstPointTime) { |
|
||||
const { lines } = this.trainResult; |
|
||||
let time = 0; |
|
||||
time = operateTime - lines[0].operateTime + (pointTime - firstPointTime); |
|
||||
return time; |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生成绘制每段路径的数据 |
|
||||
* @param {string} str 每条路径的数据"x,y,time;x,y,time" |
|
||||
* @return {array} result [[x,y,time]] |
|
||||
*/ |
|
||||
generatePathData(str) { |
|
||||
if (!str || !str.line) return; |
|
||||
let result = []; |
|
||||
str.line.split(';').forEach(point => { |
|
||||
result.push(point.split(',')); |
|
||||
}); |
|
||||
return result; |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"></style> |
|
||||
Loading…
Reference in new issue