diff --git a/components/label/usePaperStore.ts b/components/label/usePaperStore.ts index 468b75c..9ddc6d1 100644 --- a/components/label/usePaperStore.ts +++ b/components/label/usePaperStore.ts @@ -5328,6 +5328,15 @@ export const usePaperStore = create((set) => ({ }) as paper.Item[] tagItems.forEach((item) => { if (item.data?.tag_category === "mask") return + const anchor = item.data?.tag_anchor + if (Array.isArray(anchor) && anchor.length >= 2) { + const anchorX = Number(anchor[0]) + const anchorY = Number(anchor[1]) + if (Number.isFinite(anchorX) && Number.isFinite(anchorY)) { + item.scale(1 / newScale, new paper.Point(anchorX, anchorY)) + return + } + } item.scale(1 / newScale) }) } diff --git a/components/label/useRenderTag.ts b/components/label/useRenderTag.ts index ad10f98..e60ea48 100644 --- a/components/label/useRenderTag.ts +++ b/components/label/useRenderTag.ts @@ -19,8 +19,20 @@ const useRenderTag = () => { const dataMap = useLabelStore.getState().label const activeImage = useBottomToolsStore.getState().activeImage const group = usePaperStore.getState().group + if (!group) return const visible = useTopToolsStore.getState().showTags const configs = useTopToolsStore.getState().showTagsConfigs + const groupScale = + Number.isFinite(group.scaling?.x) && group.scaling.x !== 0 + ? group.scaling.x + : 1 + const applyTagCompensation = ( + item: paper.Item, + anchor: [number, number] + ) => { + if (Math.abs(groupScale - 1) < 0.000001) return + item.scale(1 / groupScale, new paper.Point(anchor[0], anchor[1])) + } // 清空之前渲染的标签 removeTagTexts() @@ -38,7 +50,8 @@ const useRenderTag = () => { const path = usePaperStore.getState().getItemById(id) if (path) { const bounds = path.bounds - let pos = [bounds.left, bounds.top - 6] + const tagAnchor: [number, number] = [bounds.left, bounds.top - 6] + const pos = [...tagAnchor] let pathData = path.data let content = `` if (configs.includes("ID")) @@ -68,10 +81,12 @@ const useRenderTag = () => { id, type: "tag", tag_category: "text", + tag_anchor: tagAnchor, }, parent: group, visible, }) + applyTagCompensation(text, tagAnchor) // 文本框 const textMask = new paper.Path.Rectangle(text.bounds) @@ -84,10 +99,12 @@ const useRenderTag = () => { id, type: "tag", tag_category: "text_mask", + tag_anchor: tagAnchor, }, parent: group, visible, }) + applyTagCompensation(textMask, tagAnchor) // 标注对象外接框 const mask = new paper.Path.Rectangle(bounds) mask.set({ @@ -108,7 +125,7 @@ const useRenderTag = () => { path.children.forEach((child) => { const segments = (child as paper.Path).segments segments.forEach((segment) => { - let pointTextPosition = [ + const pointTextPosition: [number, number] = [ segment.point.x - 10, segment.point.y + 5, ] @@ -122,17 +139,19 @@ const useRenderTag = () => { id, type: "tag", tag_category: "point_text", + tag_anchor: pointTextPosition, }, parent: group, visible: visible && configs.includes("点ID"), }) + applyTagCompensation(pointText, pointTextPosition) index++ }) }) } else { const segments = (path as paper.Path).segments segments.forEach((segment, index) => { - let pointTextPosition = [ + const pointTextPosition: [number, number] = [ segment.point.x - 10, segment.point.y + 5, ] @@ -146,10 +165,12 @@ const useRenderTag = () => { id, type: "tag", tag_category: "point_text", + tag_anchor: pointTextPosition, }, parent: group, visible: visible && configs.includes("点ID"), }) + applyTagCompensation(pointText, pointTextPosition) }) } }