1

src/views/sell/draft-design/drawing/index.vue

@@ -339,6 +339,8 @@ const drawText = (obj) => {
   ctx.value.beginPath();
   ctx.value.font = obj.size + "px 宋体";
   ctx.value.fillStyle = obj.color;
+  ctx.value.textBaseline = "bottom";
+  ctx.value.textAlign = "start";
   ctx.value.fillText(obj.text, obj.x, obj.y);
   ctx.value.restore(); // 还原之前的坐标系状态
 };
@@ -357,8 +359,25 @@ const repaint = () => {
     elCoordinates.value.forEach((i) => {
       if (i.textStatus) {
         ctx.value.beginPath();
-        ctx.value.font = "24px 宋体";
+        ctx.value.font = "14px 宋体";
         ctx.value.fillStyle = i.color;
+        if (i.crosswise) {
+          if (i.y > height.value / 2) {
+            ctx.value.textAlign = "start";
+            ctx.value.textBaseline = "bottom";
+          } else {
+            ctx.value.textAlign = "start";
+            ctx.value.textBaseline = "top";
+          }
+        } else {
+          if (i.x > width.value / 2) {
+            ctx.value.textAlign = "end";
+            ctx.value.textBaseline = "top";
+          } else {
+            ctx.value.textAlign = "start";
+            ctx.value.textBaseline = "top";
+          }
+        }
         ctx.value.fillText(i.text, i.x, i.y);
       } else {
         ctx.value.beginPath();
@@ -376,6 +395,7 @@ const checkElement = () => {
   elLength.value = "";
   elWidth.value = "";
   elAngle.value = "";
+  elCoordinates.value = [];
   try {
     imagesData.value.forEach((item, index) => {
       drawGuideByObj(item);
@@ -448,29 +468,19 @@ const elementMarking = (item) => {
   y1_rotated += cy;
   x3_rotated += cx;
   y3_rotated += cy;
-  if (x1_rotated == x3_rotated) {
-    if (y1_rotated < y3_rotated) {
-      elCoordinates.value.push({ textStatus: false, x1: 0, y1: y1_rotated, x2: x1_rotated, y2: y1_rotated });
-      elCoordinates.value.push({ textStatus: false, x1: x1_rotated, y1: 0, x2: x1_rotated, y2: y1_rotated });
-      elCoordinates.value.push({ textStatus: true, x: x1_rotated / 2, y: y1_rotated + 30, color: "red", text: Number(Math.round(x1_rotated / 4)) + "mm" });
-      elCoordinates.value.push({ textStatus: true, x: x1_rotated + 10, y: y1_rotated / 2, color: "red", text: Number(Math.round(y1_rotated / 4)) + "mm" });
-    } else {
-      elCoordinates.value.push({ textStatus: false, x1: 0, y1: y3_rotated, x2: x3_rotated, y2: y3_rotated });
-      elCoordinates.value.push({ textStatus: false, x1: x3_rotated, y1: 0, x2: x3_rotated, y2: y3_rotated });
-      elCoordinates.value.push({ textStatus: true, x: x3_rotated / 2, y: y3_rotated + 30, color: "red", text: Number(Math.round(x3_rotated / 4)) + "mm" });
-      elCoordinates.value.push({ textStatus: true, x: x3_rotated + 10, y: y3_rotated / 2, color: "red", text: Number(Math.round(y3_rotated / 4)) + "mm" });
-    }
-  } else if (x1_rotated > x3_rotated) {
-    elCoordinates.value.push({ textStatus: false, x1: 0, y1: y3_rotated, x2: x3_rotated, y2: y3_rotated });
-    elCoordinates.value.push({ textStatus: false, x1: x3_rotated, y1: 0, x2: x3_rotated, y2: y3_rotated });
-    elCoordinates.value.push({ textStatus: true, x: x3_rotated / 2, y: y3_rotated + 30, color: "red", text: Number(Math.round(x3_rotated / 4)) + "mm" });
-    elCoordinates.value.push({ textStatus: true, x: x3_rotated + 10, y: y3_rotated / 2, color: "red", text: Number(Math.round(y3_rotated / 4)) + "mm" });
+  let xLine = 0;
+  let yLine = 0;
+  if ((x1_rotated == x3_rotated && y1_rotated < y3_rotated) || x1_rotated < x3_rotated) {
+    xLine = x1_rotated;
+    yLine = y1_rotated;
   } else {
-    elCoordinates.value.push({ textStatus: false, x1: 0, y1: y1_rotated, x2: x1_rotated, y2: y1_rotated });
-    elCoordinates.value.push({ textStatus: false, x1: x1_rotated, y1: 0, x2: x1_rotated, y2: y1_rotated });
-    elCoordinates.value.push({ textStatus: true, x: x1_rotated / 2, y: y1_rotated + 30, color: "red", text: Number(Math.round(x1_rotated / 4)) + "mm" });
-    elCoordinates.value.push({ textStatus: true, x: x1_rotated + 10, y: y1_rotated / 2, color: "red", text: Number(Math.round(y1_rotated / 4)) + "mm" });
+    xLine = x3_rotated;
+    yLine = y3_rotated;
   }
+  elCoordinates.value.push({ textStatus: false, x1: 0, y1: yLine, x2: xLine, y2: yLine });
+  elCoordinates.value.push({ textStatus: false, x1: xLine, y1: 0, x2: xLine, y2: yLine });
+  elCoordinates.value.push({ textStatus: true, x: xLine / 2, y: yLine, color: "red", text: Number(Math.round(xLine / 4)) + "mm", crosswise: true });
+  elCoordinates.value.push({ textStatus: true, x: xLine, y: yLine / 2, color: "red", text: Number(Math.round(yLine / 4)) + "mm", crosswise: false });
 };
 const clickToView = () => {
   width.value = Number(Math.round(formData.data.width * 4));