init

src/components/Canvas.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { onMounted, onUpdated, ref } from "vue";
+import { ONE_MM } from "../const";
+
+const props = defineProps<{
+  vMargin: number;
+  hMargin: number;
+  imageWidth: number;
+  imageHeight: number;
+}>();
+
+const ctx = ref<null | CanvasRenderingContext2D>(null);
+
+const clearCanvas = () => {
+  const { imageWidth, imageHeight } = props;
+
+  if (ctx.value) {
+    ctx.value.clearRect(0, 0, imageWidth * ONE_MM, imageHeight * ONE_MM);
+  }
+};
+
+const render = () => {
+  const { vMargin, hMargin, imageWidth, imageHeight } = props;
+
+  clearCanvas();
+
+  if (ctx.value) {
+    for (let i = 1; i < 100; i++) {
+      const y = i * hMargin * ONE_MM;
+      ctx.value.moveTo(0, y);
+      ctx.value.lineTo(imageWidth * ONE_MM, y);
+      ctx.value.stroke();
+    }
+
+    for (let i = 1; i < 100; i++) {
+      const x = i * vMargin * ONE_MM;
+      ctx.value.moveTo(x, 0);
+      ctx.value.lineTo(x, imageHeight * ONE_MM);
+      ctx.value.stroke();
+    }
+  }
+};
+
+onMounted(() => {
+  const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+
+  if (canvas) {
+    ctx.value = canvas.getContext("2d");
+  }
+
+  render();
+});
+
+onUpdated(() => {
+  render();
+});
+</script>
+
+<template>
+  <canvas
+    id="canvas"
+    :width="imageWidth * ONE_MM"
+    :height="imageHeight * ONE_MM"
+  />
+</template>
+
+<style scoped>
+canvas {
+  border: 1px solid black;
+  margin: 20px;
+  height: calc(100vh - 40px);
+}
+</style>