add rotation line

src/components/Canvas.vue

@@ -4,7 +4,9 @@ import { ONE_MM } from "../const";
 
 const props = defineProps<{
   vMargin: number;
+  vRotation: number;
   hMargin: number;
+  hMargin2: number;
   imageWidth: number;
   imageHeight: number;
   imageBackgroundColor: string;
@@ -24,22 +26,34 @@ const clearCanvas = () => {
 };
 
 const render = () => {
-  const { vMargin, hMargin, imageWidth, imageHeight } = props;
+  const { vMargin, vRotation, hMargin, hMargin2, imageWidth, imageHeight } = props;
 
   clearCanvas();
 
+  var hMargins = [hMargin, hMargin2];
+
+  var imageHeightPx = imageHeight * ONE_MM;
+  var imageWidthPx = imageWidth * ONE_MM;
+  var vMarginPx = vMargin * ONE_MM;
+  var rotationDelta = imageHeightPx / Math.tan(vRotation / 180 * Math.PI);
+
   if (ctx.value) {
-    for (let i = 1; i < 100; i++) {
-      const y = i * hMargin * ONE_MM;
+    var y = 0;
+    for (let i = 0; i < 100; i++) {
+      y += hMargins[i%2] * ONE_MM;
       ctx.value.moveTo(0, y);
-      ctx.value.lineTo(imageWidth * ONE_MM, y);
+      ctx.value.lineTo(imageWidthPx, 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);
+      const x = i * vMarginPx;
+      var x0 = x;
+      var y0 = 0;
+      var x1 = x - rotationDelta;
+      var y1 = imageHeightPx;
+      ctx.value.moveTo(x0, y0);
+      ctx.value.lineTo(x1, y1);
       ctx.value.stroke();
     }
   }