lapsha/src/components/Canvas.vue

74 lines
1.4 KiB
Vue

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