canvas画图

train-web/.gitignore

@@ -5,7 +5,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-*-lock.yaml
+#*-lock.yaml
 lerna-debug.log*
 
 node_modules

train-web/.vscode/settings.json

@@ -13,12 +13,19 @@
     "source.fixAll": true,
     "source.fixAll.eslint": true
   },
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "json"],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "json"
+  ],
   "[javascriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -38,7 +45,9 @@
   "[markdown]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "i18n-ally.localesPaths": ["src/languages/modules"],
+  "i18n-ally.localesPaths": [
+    "src/languages/modules"
+  ],
   "i18n-ally.sourceLanguage": "ZH",
   "i18n-ally.displayLanguage": "ZH",
   "i18n-ally.keystyle": "nested",
@@ -46,8 +55,15 @@
   "i18n-ally.namespace": true,
   "i18n-ally.extract.keygenStrategy": "random",
   "i18n-ally.extract.keygenStyle": "camelCase",
-  "i18n-ally.enabledParsers": ["json", "yaml", "js"],
-  "i18n-ally.enabledFrameworks": ["vue", "react"],
+  "i18n-ally.enabledParsers": [
+    "json",
+    "yaml",
+    "js"
+  ],
+  "i18n-ally.enabledFrameworks": [
+    "vue",
+    "react"
+  ],
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   "search.exclude": {
     "**/node_modules": true,
@@ -76,4 +92,4 @@
     },
     "node_modules": true
   }
-}
+}

train-web/src/pages/train/canvas.ts

@@ -8,6 +8,7 @@ export const drawLine = (ctx: CanvasRenderingContext2D, ...positions: Array<numb
   for (let i = 1; i < positions.length; i++) {
     ctx.lineTo(positions[i][0], positions[i][1]);
   }
+  ctx.lineWidth = 2;
   ctx.strokeStyle = "#000000";
   ctx.stroke();
   ctx.closePath();
@@ -31,6 +32,7 @@ export const drawSignal = (ctx: CanvasRenderingContext2D, x: number, y: number):
   ctx.strokeStyle = "#000000";
   ctx.stroke();
   // 圆
+  const signal_radius = 5;
   ctx.arc(x - 10, y - 5 - signal_radius, signal_radius, 0, Math.PI * 2);
   ctx.lineWidth = 0.5;
   ctx.fillStyle = "red";

train-web/src/pages/train/index.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { drawLine } from "./canvas";
+import { drawLine, drawSignal } from "./canvas";
 
 const contRef = ref<HTMLDivElement>();
 const canvasRef = ref<HTMLCanvasElement>();
@@ -20,8 +20,24 @@ onMounted(() => {
   }
   // 背景色
   ctx.fillStyle = "#F2F2F2";
-  ctx.fillRect(0, 0, canvas?.width, canvas?.height);
-
-  drawLine(ctx, [100, 100], [800, 100]);
+  ctx.fillRect(0, 0, canvas?.width || 0, canvas?.height || 0);
+  // 上行
+  const up_y = 100;
+  drawLine(ctx, [20, up_y], [1300, up_y]);
+  for (let i = 1; i < 10; i++) {
+    drawSignal(ctx, 110 + i * 100, up_y);
+  }
+  // 下行
+  const down_y = 300;
+  drawLine(ctx, [20, down_y], [1300, down_y]);
+  for (let i = 1; i < 10; i++) {
+    drawSignal(ctx, 110 + i * 100, down_y);
+  }
+  // 左道岔
+  drawLine(ctx, [50, up_y], [150, down_y]);
+  drawLine(ctx, [150, up_y], [50, down_y]);
+  // 右道岔
+  drawLine(ctx, [1200, up_y], [1100, down_y]);
+  drawLine(ctx, [1100, up_y], [1200, down_y]);
 });
 </script>

train-web/src/store/train.ts

@@ -2,21 +2,19 @@ import { defineStore } from "pinia";
 
 export interface TrainInfo {
   code: string,
-  name: "",
-  mileage: 0,
-  speed: 80,
+  name: string,
+  mileage: number,
+  speed: number,
 }
 
-export const SettingStore = defineStore<TrainInfo>("train", {
-  state: () => {
-    return {
-      train: [],
-    };
+export const SettingStore = defineStore("train", {
+  state: (): Array<TrainInfo> => {
+    return [];
   },
   getters: {},
   actions: {
     addTrain() {
-      this.train.push({
+      this.push({
         code: "T01",
         name: "",
         mileage: 0,

train-web/types/auto-imports.d.ts

@@ -297,7 +297,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'