add rotation line

src/App.vue

@@ -13,11 +13,14 @@ import {
   DEFAULT_IMAGE_WIDTH,
   DEFAULT_VERTICAL_MARGIN,
   DEFAULT_IMAGE_BACKGROUND_COLOR,
+  DEFAULT_VERTICAL_ROTATION,
 } from "./const";
 import { ButtonSize, InputType } from "./types";
 
 const vMargin = ref(DEFAULT_VERTICAL_MARGIN);
+const vRotation = ref(DEFAULT_VERTICAL_ROTATION);
 const hMargin = ref(DEFAULT_HORIZONTAL_MARGIN);
+const hMargin2 = ref(DEFAULT_HORIZONTAL_MARGIN);
 const imageWidth = ref(DEFAULT_IMAGE_WIDTH);
 const imageHeight = ref(DEFAULT_IMAGE_HEIGHT);
 const imageBackgroundColor = ref(DEFAULT_IMAGE_BACKGROUND_COLOR);
@@ -49,25 +52,29 @@ const rotatePage = () => {
         Цвет {{ imageBackgroundColor }}
         </Input>
       </SidebarBlock>
-      <SidebarBlock title="Линии">
-        <Input v-model="vMargin">Отступ по горизонтали, мм</Input>
-        <Input v-model="hMargin">Отступ по вертикали, мм</Input>
+      <SidebarBlock title="Вертикальные линии">
+        <Input v-model="vMargin">Отступ, мм</Input>
+        <Input v-model="vRotation">Поворот, градусы</Input>
+      </SidebarBlock>
+      <SidebarBlock title="Горизонтальные линии">
+        <Input v-model="hMargin">Отступ, мм</Input>
+        <Input v-model="hMargin2">Дополнительный отступ, мм</Input>
       </SidebarBlock>
       <SidebarBlock title="Изображение">
         <Input v-model="imageHeight">Высота, мм</Input>
         <Input v-model="imageWidth">Ширина, мм</Input>
         <ButtonsBar>
           <Button :size="ButtonSize.Small" :click="() => {
-              imageWidth = 148;
-              imageHeight = 210;
-            }
+            imageWidth = 148;
+            imageHeight = 210;
+          }
             ">
             A5
           </Button>
           <Button :size="ButtonSize.Small" :click="() => {
-              imageWidth = 210;
-              imageHeight = 297;
-            }
+            imageWidth = 210;
+            imageHeight = 297;
+          }
             ">
             A4
           </Button>
@@ -79,8 +86,8 @@ const rotatePage = () => {
       </SidebarBlock>
     </Sidebar>
     <Page>
-      <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight"
-        :imageBackgroundColor="imageBackgroundColor" />
+      <Canvas :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin" :hMargin2="hMargin2" :imageWidth="imageWidth"
+        :imageHeight="imageHeight" :imageBackgroundColor="imageBackgroundColor" />
     </Page>
   </div>
 </template>

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();
     }
   }

src/const.ts

@@ -6,5 +6,6 @@ export const DEFAULT_IMAGE_HEIGHT = 100;
 
 export const DEFAULT_VERTICAL_MARGIN = 10;
 export const DEFAULT_HORIZONTAL_MARGIN = 10;
+export const DEFAULT_VERTICAL_ROTATION = 90;
 
 export const DEFAULT_IMAGE_BACKGROUND_COLOR = "#ffffff"