fix: 绘制canvas

CHANGELOG.md

@@ -175,6 +175,7 @@
  - | 时间轴无任务时时间刻度加载修改 | [4921672](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/4921672)
  - | 时间轴滚动位置修改 | [551da63](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/551da63)
  - | 时间轴骨架屏修改 | [ca78d02](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/ca78d02)
+ - | 添加canvas | [9bc13c7](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/9bc13c7)
  - | 监听时间基本点 | [033fca0](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/033fca0)
  - | 角色显示状态修改 | [7d3b906](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/7d3b906)
  - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/19228d6)

src/pagesProject/project/components/Evaluated/components/ProcessRestore.vue

@@ -17,32 +17,16 @@ export default {
       canvas: null,
       context: null,
       points: [],
+      timers: [],
     };
   },
 
   onReady(e) {
     console.log('e: ', e);
-    // var context = uni.createCanvasContext('firstCanvas');
-    // console.log('context: ', context);
-    // context.setStrokeStyle('#00ff00');
-    // context.setLineWidth(5);
-    // context.rect(0, 0, 200, 200);
-    // context.stroke();
-    // context.setStrokeStyle('#ff0000');
-    // context.setLineWidth(2);
-    // context.moveTo(160, 100);
-    // context.arc(100, 100, 60, 0, 2 * Math.PI, true);
-    // context.moveTo(140, 100);
-    // context.arc(100, 100, 40, 0, Math.PI, false);
-    // context.moveTo(85, 80);
-    // context.arc(80, 80, 5, 0, 2 * Math.PI, true);
-    // context.moveTo(125, 80);
-    // context.arc(120, 80, 5, 0, 2 * Math.PI, true);
-    // context.stroke();
-    // context.draw();
+    this.initCanvas();
   },
 
-  mounted() {
+  async mounted() {
     this.initCanvas();
     this.drawImage();
   },
@@ -51,10 +35,90 @@ export default {
     // 初始化canvas元素 ctx数据
     initCanvas() {
       this.canvas = this.$refs['reduceCanvas'];
-      this.context = uni.createCanvasContext('firstCanvas');
+      this.context = uni.createCanvasContext('firstCanvas', this);
+
+      const { lines } = this.trainResult;
+      lines.forEach((item, index) => {
+        this.drawPath(item.line, index);
+      });
+    },
+
+    /**
+     * 绘制每段路径
+     * @param {string} str;
+     */
+    drawPath(str, index) {
+      console.log('index: ', index);
+      if (!this.trainResult.lines || this.trainResult.lines.length === 0) return;
+      const data = this.generatePathData(str);
+      this.timers.push(
+        setTimeout(() => {
+          if (!data || data.length === 0) {
+            return;
+          }
+          this.context.beginPath();
+          this.context.setLineWidth(10);
+          this.context.setStrokeStyle('#f00');
+          const x = +(data[0][0] / 10);
+          const y = +(data[0][1] / 10);
+          console.log('x, y: ', x, y);
+          this.context.moveTo(x, y);
+          if (data.length === 1) {
+            // 如果只有1个点 就画个小圆圈
+            this.context.arc(x, y, 2, 0, Math.PI * 2, false);
+            this.context.fill();
+          }
+        }, +data[0][2]),
+      );
+
+      for (let i = 1, len = data.length; i < len; i++) {
+        this.timers.push(
+          setTimeout(() => {
+            if (!this.trainResult.lines || this.trainResult.lines.length === 0) {
+              return;
+            }
+            this.context.lineTo(+data[i][0] / 10, +data[i][1] / 10);
+            this.context.stroke();
+            // if (index === this.trainResult.lines.length - 1 && i === len - 1) {
+            //   this.drawing = false;
+            // }
+          }, +data[i][2]),
+        );
+      }
+      this.drawPoint(+data[0][0] / 10, +data[0][1] / 10);
+      this.drawPoint(+data[data.length - 1][0] / 10, +data[data.length - 1][1] / 10);
+      this.context.closePath();
+    },
+
+    /**
+     * 生成绘制每段路径的数据
+     * @param {string} str 每条路径的数据"x,y,time;x,y,time"
+     * @return {array} result [[x,y,time]]
+     */
+    generatePathData(str) {
+      if (!str) return;
+      let result = [];
+      str.split(';').forEach(point => {
+        result.push(point.split(','));
+      });
+      return result;
+    },
+
+    // 开始结束点
+    drawPoint(x, y) {
+      const { context } = this;
+      context.beginPath();
+      context.setFillStyle('#CCC');
+      context.arc(x, y, 4, 0, Math.PI * 3);
+      context.fill();
+      context.setFillStyle('#CCC'); //颜色
+      context.font = 'normal 10px 微软雅黑'; //字体
+      context.setTextBaseline('middle'); //竖直对齐
+      context.setTextAlign('center'); //水平对齐
+      context.fillText(0, x, y, 10); //绘制文专字
     },
 
-    // 连线题 绘制图片
+    // 绘制图片
     drawImage() {
       const { context } = this;
       const { cardUrl } = this.trainResult;
@@ -62,17 +126,12 @@ export default {
       uni.downloadFile({
         url: cardUrl,
         success: function (res) {
-          console.log('res: ', res);
-          context.save();
-          context.beginPath();
-          context.arc(96, 96, 48, 0, 2 * Math.PI);
-          context.clip();
-          context.drawImage(res.tempFilePath, 48, 48, 200, 200);
+          context.drawImage(res.tempFilePath, 0, 0, 300, 500);
           context.restore();
           context.draw();
         },
         fail(error) {
-          console.error('连线图片加载失败:', error);
+          console.error('图片加载失败:', error);
         },
       });
     },