fix:不想写不想写

src/common/utils/getBoundingBox.ts

@@ -20,7 +20,9 @@ export const getBoundingBox = function (path: Path[]) {
   let min_x = 0,
     min_y = 0,
     max_x = 0,
-    max_y = 0;
+    max_y = 0,
+    width = 0,
+    height = 0;
   const center = { x: 0, y: 0 };
   let resPath: Path[] = [];
   const length = path.length;
@@ -60,13 +62,20 @@ export const getBoundingBox = function (path: Path[]) {
   } else if (length >= 2) {
     if (min_x === max_x) {
       // 垂直的线
+      width = 0;
+      height = Decimal.sub(max_y, min_y).toNumber();
       center.x = min_x;
       center.y = Decimal.sub(max_y, min_y).div(2).plus(min_y).toNumber();
     } else if (min_y === max_y) {
       // 水平的线
+      width = Decimal.sub(max_x, min_x).toNumber();
+      height = 0;
       center.y = min_y;
       center.x = Decimal.sub(max_x, min_x).div(2).plus(min_x).toNumber();
     } else {
+      width = Decimal.sub(max_x, min_x).toNumber();
+      height = Decimal.sub(max_y, min_y).toNumber();
+
       center.x = Decimal.sub(max_x, min_x).div(2).plus(min_x).toNumber();
       center.y = Decimal.sub(max_y, min_y).div(2).plus(min_y).toNumber();
 
@@ -98,5 +107,7 @@ export const getBoundingBox = function (path: Path[]) {
     max_y,
     path: resPath,
     center,
+    width,
+    height,
   };
 };

src/modules/vue-konva/IndexPage2.vue

@@ -88,26 +88,29 @@ function createShape(itemData: any) {
   const path = itemData.path || [];
   const fillColor = itemData.color || '#000000';
   const name = itemData.name;
+  const boundingBox = itemData.boundingBox || {};
   const boundingBoxPath = itemData.boundingBox?.path || [];
 
   if (boundingBoxPath.length < 2) {
     console.warn('小于两个点，不能构成多边形，没有边界框');
   } else {
     let group = new Konva.Group({
-      x: boundingBoxPath[0].x,
-      y: boundingBoxPath[0].y,
+      x: 0,
+      y: 0,
       draggable: true,
     });
 
-    // let rectBox = new Konva.Rect({
-    //   x: group.x(),
-    //   y: group.y(),
-    //   width: state.boundingBox.width,
-    //   height: state.boundingBox.height,
-    //   stroke: 'black',
-    //   strokeWidth: 10,
-    // });
+    let rectBox = new Konva.Rect({
+      x: boundingBoxPath[0].x,
+      y: boundingBoxPath[0].y,
+      width: boundingBox.width,
+      height: boundingBox.height,
+      stroke: 'red',
+      // fill: 'grey',
+      strokeWidth: 4,
+    });
 
+    // 如果添加到group，则坐标的相对位置时基于group的位置
     let shape: any = new Konva.Shape({
       sceneFunc: function (context, shape) {
         context.beginPath();
@@ -133,6 +136,7 @@ function createShape(itemData: any) {
       // stroke: 'white',
       // strokeWidth: 10,
     });
+    group.add(rectBox);
     group.add(shape);
 
     return group;
@@ -270,6 +274,7 @@ function drawGrid() {
 </script>
 <template>
   <div class="konva-main-page container-height center">
+    <div>666</div>
     <div class="canvas-box">
       <canvas
         id="canvas-grid"
@@ -290,6 +295,6 @@ function drawGrid() {
   width: 1200px;
   height: 800px;
   border: 1px solid #000;
-  background: pink;
+  // background: pink;
 }
 </style>