agv角度

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

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) {