|
|
|
@ -64,11 +64,10 @@ export default { |
|
|
|
context.drawImage(res.tempFilePath, 0, 0, width, 450); |
|
|
|
context.draw(true); |
|
|
|
// 绘制路径 |
|
|
|
// points.forEach(item => { |
|
|
|
// that.drawPath(item, width); |
|
|
|
// }); |
|
|
|
console.log('points: ', points); |
|
|
|
that.drawPath(points, width); |
|
|
|
const arr = that.setPoints(points); |
|
|
|
arr.forEach(item => { |
|
|
|
that.drawPath(item, width); |
|
|
|
}); |
|
|
|
}, |
|
|
|
fail(error) { |
|
|
|
console.error('图片加载失败:', error); |
|
|
|
@ -84,24 +83,26 @@ export default { |
|
|
|
const data = this.generatePathData(str); |
|
|
|
const ctx = this.context; |
|
|
|
|
|
|
|
this.timers.push( |
|
|
|
setTimeout(() => { |
|
|
|
if (!this.trainResult.points || this.trainResult.points.length === 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.setLineWidth(3); |
|
|
|
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]), |
|
|
|
); |
|
|
|
if (data[0][3] === 1) { |
|
|
|
this.timers.push( |
|
|
|
setTimeout(() => { |
|
|
|
if (!this.trainResult.points || this.trainResult.points.length === 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.setLineWidth(3); |
|
|
|
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.points || this.trainResult.points.length === 0) return; |
|
|
|
@ -120,7 +121,6 @@ export default { |
|
|
|
ctx.stroke(); |
|
|
|
ctx.draw(true); |
|
|
|
} |
|
|
|
|
|
|
|
ctx.closePath(); |
|
|
|
// }, +data[i][2]), |
|
|
|
}, this.getIntervalTime(+data[i][2], +str.operateTime, +data[0][2])), |
|
|
|
@ -158,6 +158,20 @@ export default { |
|
|
|
return time; |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理返回得points |
|
|
|
setPoints(points) { |
|
|
|
if (!points || !points.length) return; |
|
|
|
let result = []; |
|
|
|
points.forEach(point => { |
|
|
|
if (point.sign === 1) { |
|
|
|
result.push([point]); |
|
|
|
} else { |
|
|
|
result[result.length - 1].push(point); |
|
|
|
} |
|
|
|
}); |
|
|
|
return result; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 生成绘制每段路径的数据 |
|
|
|
* @param {string} str 每条路径的数据"x,y,time;x,y,time" |
|
|
|
|
