feat: 纸张比例问题修复

src/core/components/icon/icon.vue

@@ -78,7 +78,13 @@ const { shape, tData, data, operateMenus, describes } = useComponentStatus({
   copyHandler(mat, data) {
     return matResponse({ data, mat, increment: true });
   },
-  propertys: ["fill", "stroke", "strokeWidth", "dash", "opacity", "strokeScaleEnabled"],
+  propertys: [
+    "fill",
+    "stroke",
+    "strokeWidth",
+    //  "dash", "opacity",
+    "strokeScaleEnabled",
+  ],
 });
 
 if (props.data.fixScreen) {

src/example/components/slide/actions.ts

@@ -99,7 +99,7 @@ export const getPaperConfig = (p: number[], scale: number) => {
 }
 export const paperConfigs = {
   'a4': { size: [297, 210], scale: 3.8 },
-  'a3': { size: [450, 297], scale: 2.5 }
+  'a3': { size: [420, 297], scale: 2.5 }
 }
 
 const setPaper = (draw: Draw, p: number[], scale: number) => {

src/example/fuse/store.ts

@@ -1,5 +1,5 @@
 import { Ref, ref } from "vue";
-import { getOverviewData, getTabulationData } from "./req";
+import { getOverviewData, getTabulationData, TabCover } from "./req";
 import { StoreData } from "@/core/store/store";
 
 export const tableCoverKey = '__tableCoverKey'
@@ -19,7 +19,7 @@ export const refreshOverviewData = () => {
 
 export const tabulationData = ref() as Ref<{
   store: StoreData;
-  cover: {url: string, width: number, height: number} | null;
+  cover: TabCover | null;
   paperKey: string;
   viewport: number[] | null;
 }>

src/example/fuse/views/overview/header.vue

@@ -26,7 +26,12 @@ import {
 } from "../../req.ts";
 import { router } from "../../router.ts";
 import { params } from "@/example/env.ts";
-import { tabulationData, refreshTabulationData, tableCoverWidth, tableCoverHeight } from "../../store.ts";
+import {
+  tabulationData,
+  refreshTabulationData,
+  tableCoverWidth,
+  tableCoverHeight,
+} from "../../store.ts";
 import { nextTick } from "vue";
 import { getRepTabulationStore } from "../tabulation/gen.ts";
 import { getPaperConfig, paperConfigs } from "@/example/components/slide/actions.ts";
@@ -99,21 +104,24 @@ const setViewToTableCover = async () => {
   await nextTick();
   draw.initViewport();
 
-  return () => {
-    pop();
-    draw.config.size = oldSize;
-    draw.config.showGrid = oldShowGrid;
-    draw.config.back = oldBack;
-    draw.config.showCompass = oldShowCompass;
-    draw.config.labelLineConfig = oldLabelLineConfig;
-    draw.viewer.setViewMat(oldViewMat);
-  };
+  return [
+    rect,
+    () => {
+      pop();
+      draw.config.size = oldSize;
+      draw.config.showGrid = oldShowGrid;
+      draw.config.back = oldBack;
+      draw.config.showCompass = oldShowCompass;
+      draw.config.labelLineConfig = oldLabelLineConfig;
+      draw.viewer.setViewMat(oldViewMat);
+    },
+  ] as const;
 };
 
 const saveHandler = async () => {
   const storeData = draw.getData();
-  const [blob, scale] = await draw.enterTemp(async () => {
-    const recover = await setViewToTableCover();
+  const [blob, scale, rect] = await draw.enterTemp(async () => {
+    const [rect, recover] = await setViewToTableCover();
     await nextTick();
     const mat = draw.viewer.transform.invert();
     const scale =
@@ -123,16 +131,18 @@ const saveHandler = async () => {
     const blob = await getImage(draw, "image/png");
     recover();
     await nextTick();
-    return [blob, scale] as const;
+    return [blob, scale, rect] as const;
   });
 
   await saveOverviewData({ store: storeData, viewport: draw!.viewer.transform.m });
   const url = await uploadResourse(new File([blob], `tabulation-cover-${params.id}.png`));
   const cover = {
     url,
-    ...draw.viewer.size!,
+    width: rect.width,
+    height: rect.height,
     proportion: { ...draw.store.config.proportion, scale },
   };
+
   await saveTabulationCover(cover);
   await refreshTabulationData();
 
@@ -145,6 +155,7 @@ const saveHandler = async () => {
     tabulationData.value.store,
     pConfig.size,
     pConfig.margin,
+    paperKey,
     cover
   );
   tabStore.config.compass = storeData.config.compass;

src/example/fuse/views/overview/slide-icons.vue

@@ -27,7 +27,6 @@
 </template>
 
 <script lang="ts" setup>
-import { themeColor } from "@/constant/help-style";
 import { computed, ref } from "vue";
 import { ElCollapse, ElCollapseItem, ElEmpty } from "element-plus";
 import { getSvgContent, parseSvgContent } from "@/utils/resource";
@@ -38,14 +37,22 @@ const emit = defineEmits<{ (e: "exit"): void }>();
 
 const drawIcon = async (url: string) => {
   const svgContent = parseSvgContent(await getSvgContent(url));
-  const addWidth = 100;
-  const addHeight = (addWidth / svgContent.width) * svgContent.height;
+
+  const maxSize = 100;
+  const addHeight = (maxSize / svgContent.width) * svgContent.height;
+  const size = {
+    width: maxSize,
+    height: addHeight,
+  };
+  if (size.height > maxSize) {
+    size.height = maxSize;
+    size.width = (maxSize / svgContent.height) * svgContent.width;
+  }
 
   props.draw.enterDrawShape("icon", {
     url,
-    width: addWidth,
-    height: addHeight,
-    fill: themeColor,
+    ...size,
+    fill: "#000000",
   });
   emit("exit");
 };

src/example/fuse/views/tabulation/gen.ts

@@ -10,6 +10,7 @@ import { TextData } from "@/core/components/text";
 import { ImageData } from "@/core/components/image";
 import { Transform } from "konva/lib/Util";
 import { TabCover } from "../../req";
+import { paperConfigs } from "@/example/components/slide/actions";
 
 const setCoverPosition = (
   size: Size,
@@ -71,8 +72,20 @@ const setCoverScaleTextPosition = (cover: ImageData, title: TextData) => {
   title.mat[5] = y;
 };
 
+export const getCoverPaperScale = (cover: ImageData, paperKey: string) => {
+  let pixelScale =
+    (cover.widthRaw! / cover.width) * cover.proportion!.scale;
+  const realPixelScale = paperConfigs[paperKey as "a4"].scale;
+  return Math.round(realPixelScale * pixelScale);
+}
+export const setCoverPaperScale = (cover: ImageData, paperKey: string, scale: number) => {
+  const realPixelScale = paperConfigs[paperKey as "a4"].scale;
+  cover.width = cover.widthRaw! / ((scale / realPixelScale) /cover.proportion!.scale)
+  cover.height = (cover.heightRaw! / cover.widthRaw!) * cover.width
+  console.log(cover.width / cover.height)
+}
 
-const genDefaultCover = async (cover: TabCover) => {
+const genDefaultCover = async (cover: TabCover, paperKey: string) => {
   const image = await getImage(cover.url);
   const rectScale = image.width / image.height
   const tableCoverScale = tableCoverWidth / tableCoverHeight
@@ -85,19 +98,13 @@ const genDefaultCover = async (cover: TabCover) => {
     height = tableCoverHeight;
     width = rectScale * height;
   }
-
-  // 缩放比例默认给10的倍数
-  let wScale = cover.width / width
-  let scale = Math.round((wScale * cover.proportion.scale) / 10) * 10
-  width = cover.width / (scale / cover.proportion.scale)
-  height = width / rectScale;
+  console.log(width / height, rectScale, cover.width / cover.height)
 
   const coverData = {
     ...getBaseItem(),
     cornerRadius: 0,
     strokeWidth: 0,
     url: cover.url,
-    // lock: true,
     key: tableCoverKey,
     proportion: cover.proportion,
     disableTransformer: true,
@@ -109,6 +116,10 @@ const genDefaultCover = async (cover: TabCover) => {
     height,
     mat: [1, 0, 0, 1, 0, 0],
   };
+
+  // 缩放比例默认给10的倍数
+  let wScale = getCoverPaperScale(coverData, paperKey)
+  setCoverPaperScale(coverData, paperKey, Math.round(wScale / 10) * 10)
   return coverData;
 };
 
@@ -142,7 +153,6 @@ const genDefaultTable = () => {
   
   const data = {
     ...getBaseItem(),
-    lock: true,
     content: [
       [{ ...nameColl, content: "案发时间" }, valueColl],
       [{ ...nameColl, content: "案发地点" }, valueColl],
@@ -162,7 +172,6 @@ export const genDefaultTitle = () => {
   return {
     ...getBaseItem(),
     content: "默认标题",
-    lock: true,
     width: 300,
     heihgt: 42,
     fontSize: 38,
@@ -176,6 +185,7 @@ export const getRepTabulationStore = async (
   store: StoreData,
   size: Size,
   margin: number | number[],
+  paperKey: string,
   cover?: TabCover | null,
   place = true
 ) => {
@@ -190,7 +200,7 @@ export const getRepTabulationStore = async (
     layer = { text: [titleData], table: [tableData] };
 
     if (cover) {
-      const imageData = await genDefaultCover(cover);
+      const imageData = await genDefaultCover(cover, paperKey);
       setCoverPosition(size, margin, imageData);
       layer.image = [imageData];
       layer.text!.push(genDefaultCoverScaleText(imageData))
@@ -206,7 +216,7 @@ export const getRepTabulationStore = async (
     );
 
     if (cover) {
-      const imageData = await genDefaultCover(cover);
+      const imageData = await genDefaultCover(cover, paperKey);
       const imageScaleData = genDefaultCoverScaleText(imageData)
       if (!~coverNdx) {
         setCoverPosition(size, margin, imageData);
@@ -223,7 +233,6 @@ export const getRepTabulationStore = async (
       if (!~coverScaleNdx) {
         setCoverScaleTextPosition(imageData, imageScaleData)
       } else {
-        console.log(imageScaleData)
         layer.text[coverScaleNdx].content = imageScaleData.content
         setCoverScaleTextPosition(imageData, layer.text[coverScaleNdx])
       }

src/example/fuse/views/tabulation/index.vue

@@ -31,6 +31,7 @@ import {
 } from "../../store";
 import { ImageData } from "@/core/components/image";
 import { TextData } from "@/core/components/text";
+import { getCoverPaperScale, setCoverPaperScale } from "./gen";
 
 const full = ref(false);
 const draw = ref<Draw>();
@@ -42,8 +43,18 @@ const init = async (draw: Draw) => {
   draw.config.showGrid = false;
   draw.config.showLabelLine = false;
   draw.config.showComponentSize = false;
-  draw.store.setStore(tabulationData.value.store);
-  draw.store.config.compass.url = "/icons/compass.svg";
+  const config: any = tabulationData.value.store.config || {};
+  draw.store.setStore({
+    ...tabulationData.value.store,
+    config: {
+      ...config,
+      compass: {
+        rotation: 0,
+        ...(config.compass || {}),
+        url: "/icons/compass.svg",
+      },
+    },
+  });
   inited.value = true;
 };
 watch(draw, (draw) => draw && init(draw));
@@ -51,13 +62,13 @@ watch(draw, (draw) => draw && init(draw));
 const cover = computed(
   () => draw.value?.store.items.find((item) => item.key === tableCoverKey) as ImageData
 );
-const coverScale = computed(
-  () =>
-    cover.value &&
-    Math.round(
-      (cover.value.widthRaw! / cover.value.width) * cover.value.proportion!.scale
-    )
-);
+const coverScale = computed({
+  get: () =>
+    cover.value && getCoverPaperScale(cover.value, tabulationData.value.paperKey),
+  set: (val) => {
+    setCoverPaperScale(cover.value, tabulationData.value.paperKey, val);
+  },
+});
 watch(cover, (cover, _, onCleanup) => {
   if (!cover || !draw.value || !cover.widthRaw || !cover.heightRaw || !cover.proportion)
     return;
@@ -72,9 +83,7 @@ watch(cover, (cover, _, onCleanup) => {
         return coverScale.value;
       },
       set value(val) {
-        const oldWidth = cover.width;
-        cover.width = cover.widthRaw! / (val / cover.proportion!.scale);
-        cover.height = (cover.width / oldWidth) * cover.height;
+        coverScale.value = val;
       },
       props: {},
     },

src/example/fuse/views/tabulation/slide.vue

@@ -28,12 +28,14 @@ const menus = reactive([paper, text, serial, table]);
 
 const setPaperAfterHandler = async (paperKey: string, oldPaperKey?: string) => {
   paperRaw.children.find((item) => item.key === paperKey)!.handler(draw);
+  return;
   if (!oldPaperKey) return;
   await nextTick();
   const data = await getRepTabulationStore(
     draw.store.data,
     draw.viewer.viewSize!,
     draw.config.margin || 0,
+    paperKey,
     tabulationData.value.cover,
     true
   );