diff --git a/src/config/mork.js b/src/config/mork.js index 3b6fb9c..1f0e9ca 100644 --- a/src/config/mork.js +++ b/src/config/mork.js @@ -57,23 +57,23 @@ export const queryDevice = (t) => { let res = {} if (t === 0) { res = { - data: {car1: {x: 105, y: 312, angle: 'up'}} + data: {car1: {x: 105, y: 312, angle: 90}} } } else if (t === 1) { res = { - data: {car1: {x: 105, y: 262, angle: 'up'}} + data: {car1: {x: 105, y: 262, angle: 180}} } } else if (t === 2) { res = { - data: {car1: {x: 105, y: 202, angle: 'up'}} + data: {car1: {x: 105, y: 202, angle: 180}} } } else if (t === 3) { res = { - data: {car1: {x: 105, y: 262, angle: 'down'}} + data: {car1: {x: 105, y: 262, angle: 90}} } } else if (t === 4) { res = { - data: {car1: {x: 105, y: 312, angle: 'down'}} + data: {car1: {x: 105, y: 312, angle: 90}} } } return res diff --git a/src/images/agv.png b/src/images/agv.png new file mode 100644 index 0000000..107cccf Binary files /dev/null and b/src/images/agv.png differ diff --git a/src/pages/canvas.vue b/src/pages/canvas.vue index 73197a0..5db11d1 100644 --- a/src/pages/canvas.vue +++ b/src/pages/canvas.vue @@ -63,7 +63,7 @@ export default { }, handleCanvasCar () { let img = new Image() - img.src = require(`../images/agv_${this.angle}.png`) + img.src = require(`../images/agv.png`) let nextX let nextY // 第一帧执行的时间 @@ -89,11 +89,14 @@ export default { const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion // 绘制方法 const draw = () => { - this.ctx.beginPath() this.ctx.clearRect(0, 0, 680, 467) + this.ctx.save() nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress) nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress) - this.ctx.drawImage(img, nextX - 10, nextY - 19, 20, 38) + this.ctx.translate(nextX, nextY) + this.ctx.rotate(this.angle * Math.PI / 180) + this.ctx.drawImage(img, -img.width / 2, -img.height / 2) + this.ctx.restore() } draw() if (progress < 1) {