add margin

src/components/Canvas.vue

@@ -3,13 +3,19 @@ import { onMounted, onUpdated, ref } from "vue";
 import { ONE_MM } from "../const";
 
 const props = defineProps<{
+  imageBackgroundColor: string;
+
   vMargin: number;
   vRotation: number;
   hMargin: number;
   hMargin2: number;
+
+  marginEnable: boolean;
+  marginColor: string;
+  marginLeftMargin: number;
+
   imageWidth: number;
   imageHeight: number;
-  imageBackgroundColor: string;
 }>();
 
 const ctx = ref<null | CanvasRenderingContext2D>(null);
@@ -26,7 +32,7 @@ const clearCanvas = () => {
 };
 
 const render = () => {
-  const { vMargin, vRotation, hMargin, hMargin2, imageWidth, imageHeight } = props;
+  const { vMargin, vRotation, hMargin, hMargin2, imageWidth, imageHeight, marginEnable, marginColor, marginLeftMargin } = props;
 
   if (vMargin < 1 || hMargin < 1 || hMargin2 < 1) {
     return
@@ -45,6 +51,10 @@ const render = () => {
   var rotationDelta = imageHeightPx / Math.tan(vRotation / 180 * Math.PI);
 
   if (ctx.value) {
+    ctx.value.strokeStyle = "#000000";
+    ctx.value.beginPath();
+    ctx.value.stroke();
+
     var x = 0;
     var y = 0;
 
@@ -71,6 +81,17 @@ const render = () => {
       ctx.value.stroke();
       i++;
     }
+
+
+    x = marginLeftMargin * ONE_MM;
+    if (marginEnable) {
+      ctx.value.strokeStyle = marginColor;
+      ctx.value.lineWidth = 2;
+      ctx.value.beginPath();
+      ctx.value.moveTo(x, 0);
+      ctx.value.lineTo(x, imageHeightPx);
+      ctx.value.stroke();
+    }
   }
 };