fix: 1

src/app/4dmap/index.ts

@@ -185,7 +185,10 @@ export const createBoard = (
       return board.tree.getPixelFromStage(point);
     },
     async toDataURL(pixelRatio = 1) {
-      const boardDataURL = board.tree.stage.toDataURL({ pixelRatio });
+      const boardDataURL = board.tree.stage.toDataURL({
+        pixelRatio,
+        mimeType: '"image/jpeg"',
+      });
       if (!props.map) {
         return boardDataURL;
       }
@@ -217,7 +220,7 @@ export const createBoard = (
             captureCanvas.width,
             captureCanvas.height
           );
-          const dataURL = captureCanvas.toDataURL("image/png");
+          const dataURL = captureCanvas.toDataURL("image/jpeg");
           resolve(dataURL);
         };
         image.onerror = reject;

src/app/liantong/example/index.vue

@@ -12,6 +12,7 @@
     <ElButton v-if="!drawing" @click="drawHandler"> 绘画 </ElButton>
     <ElButton v-if="drawing" @click="drawing.cancel()"> 停止 </ElButton>
     <ElButton v-if="drawing" @click="drawing.submit()"> 提交 </ElButton>
+    <ElButton @click="download"> 下载 </ElButton>
 
     <template v-if="activeEntity">
       <ElButton @click="activeEntity.copy({ count: 5 })"> 向右复制5个 </ElButton>
@@ -102,6 +103,19 @@ watch(containerRef, (container, _) => {
 const getData = () => {
   console.log(JSON.stringify(board.getData(), null, 4));
 };
+
+const download = () => {
+  board.bound.setSize(1920, 1080);
+  board.tree.stage.toBlob({
+    width: 1920,
+    height: 1080,
+    pixelRatio: 3,
+    callback(blob) {
+      window.open(URL.createObjectURL(blob));
+    },
+  });
+  console.log(board);
+};
 </script>
 
 <style lang="scss" scoped>

src/app/liantong/icon.ts

@@ -248,7 +248,7 @@ for (const key in svgs) {
           fixed: false,
           strokeColor: "#FFFFFF",
         },
-        false
+        true
       );
     }
     const paths = svgAct.shape.find<Path>(key === "Tag" ? ".rect" : ".path");
@@ -281,8 +281,8 @@ for (const key in svgs) {
 
     return {
       ...svgAct,
-      setData(data) {
-        const scale = getRealAbsoluteSize(svgAct.shape, [1, 1]);
+      setData(data: any) {
+        const scale = getRealAbsoluteSize(svgAct.shape.parent, [1, 1]);
         label.scale({ x: scale[0], y: scale[1] });
         svgAct.setData(data);
         if (tree.showLabel) {
@@ -292,7 +292,8 @@ for (const key in svgs) {
         }
       },
       common() {
-        const tf = svgAct.shape.findOne(".tf");
+        console.log(svgAct.shape.parent.parent);
+        const tf = svgAct.shape.parent.parent.findOne(".tf" + attrib.id);
         tf && tf.visible(false);
         if (!attrib.intersect) {
           svgAct.common();
@@ -308,7 +309,9 @@ for (const key in svgs) {
         });
       },
       active() {
-        const tf = svgAct.shape.findOne(".tf");
+        console.log(svgAct.shape.parent.parent);
+        const tf = svgAct.shape.parent.parent.findOne(".tf" + attrib.id);
+        console.log(tf);
         tf && tf.visible(true);
         paths.forEach((path) => {
           path.fill("red");

src/board/packages/poi/edit-poi.ts

@@ -9,43 +9,49 @@ import { Group } from "konva/lib/Group";
 import { Rect } from "konva/lib/shapes/Rect";
 import { Transform } from "konva/lib/Util";
 import { MathUtils } from "three";
+import { nextTick } from "vue";
 
 export class EditPoi<T extends PoiAttrib = PoiAttrib> extends Poi<T> {
   initShape() {
     const group = super.initShape() as Group;
     const rect = group.findOne<Rect>(".rect");
-    const parent = rect.parent;
     const tf = new Transformer({
       visible: false,
-      name: "tf",
-      resizeEnabled: false,
-      nodes: [rect],
+      name: "tf" + this.attrib.id,
+      resizeEnabled: true,
+      nodes: [group],
     });
-    parent.add(tf);
+    setTimeout(() => {
+      const parent = group.parent;
+      parent.add(tf);
+    }, 100);
 
-    const initRect = {
-      rotation: rect.rotation(),
-      position: { ...rect.position() },
-      scale: { ...rect.scale() },
-    };
+    // const initRect = {
+    //   rotation: rect.rotation(),
+    //   position: { ...rect.position() },
+    //   scale: { ...rect.scale() },
+    // };
     let needUpdate = false;
-    rect.on("transformstart", () => {
+    group.on("transformstart", () => {
       needUpdate = false;
       console.log("start");
       this.container.bus.emit("dataChangeBefore");
     });
-    rect.on("transform", () => {
-      const rotation = tf.rotation();
-      rect.rotation(initRect.rotation);
-      rect.position(initRect.position);
-      rect.scale(initRect.scale);
-      if ((this.attrib.rotate || 0) !== rotation) {
-        needUpdate = true;
-        this.attrib.rotate = rotation;
-        this.diffRedraw();
-      }
+    group.on("transform", () => {
+      // const rotation = rect.rotation();
+      // const scale = rect.scale();
+      // const position = rect.position();
+      const dec = group.getTransform().decompose();
+      needUpdate = true;
+      this.attrib.rotate = dec.rotation;
+      this.attrib.scaleX = dec.scaleX;
+      this.attrib.scaleY = dec.scaleY;
+      this.attrib.x = dec.x;
+      this.attrib.y = dec.y;
+      this.diffRedraw();
+      tf.forceUpdate();
     });
-    rect.on("transformend", () => {
+    group.on("transformend", () => {
       if (needUpdate) {
         this.container.bus.emit("dataChange");
       }

src/board/packages/poi/poi.ts

@@ -6,6 +6,8 @@ type PoiData = {
   x: number;
   y: number;
   intersect?: boolean;
+  scaleX?: number;
+  scaleY?: number;
   rotate?: number;
   fontSize?: number;
   text?: string;

src/board/shared/act.ts

@@ -119,9 +119,11 @@ export const pathsToActShape = (props: PathsToActShapeProps, test = false) => {
     },
     shape: group,
     setData(data) {
-      group.position(data);
       props.fixed && setStyle();
+      group.scale({ x: data.scaleX || 1, y: data.scaleY || 1 });
       group.rotation(data.rotate || 0);
+      group.position(data);
+      console.log({ ...data });
     },
     common,
   };