From 539cb5593e251a5182647a5ea55b5d0423351756 Mon Sep 17 00:00:00 2001 From: zhangheng Date: Tue, 14 Apr 2026 15:38:57 +0800 Subject: [PATCH] fix(tool): mousePointer --- .../label/components/AssistShapeComponent.tsx | 14 +++++++++++--- components/label/components/TopTools.tsx | 3 ++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/components/label/components/AssistShapeComponent.tsx b/components/label/components/AssistShapeComponent.tsx index 514d09a..0316000 100644 --- a/components/label/components/AssistShapeComponent.tsx +++ b/components/label/components/AssistShapeComponent.tsx @@ -6,6 +6,7 @@ import React, { useImperativeHandle, useRef, } from "react" +import { useTopToolsStore } from "../useTopToolsStore" interface AssistShapeComponentProps { size: number @@ -16,7 +17,9 @@ const AssistShapeComponent = ( ref: React.Ref | undefined ) => { const { size } = props + const scale = useTopToolsStore((state) => state.scale) const canvasRef = useRef(null) + const lastPointerRef = useRef<{ x: number; y: number } | null>(null) const drawAssistShape = useCallback( (centerX: number, centerY: number) => { @@ -24,7 +27,7 @@ const AssistShapeComponent = ( const ctx = canvas?.getContext("2d") if (!canvas || !ctx) return - const radius = Math.max(1, size) + const radius = Math.max(1, size * scale) const side = radius * 2 const left = centerX - radius const top = centerY - radius @@ -38,7 +41,7 @@ const AssistShapeComponent = ( ctx.arc(centerX, centerY, radius, 0, Math.PI * 2) ctx.stroke() }, - [size] + [scale, size] ) useEffect(() => { @@ -47,7 +50,11 @@ const AssistShapeComponent = ( canvas.width = window.innerWidth canvas.height = window.innerHeight const rect = canvas.getBoundingClientRect() - drawAssistShape(rect.width / 2, rect.height / 2) + const center = lastPointerRef.current || { + x: rect.width / 2, + y: rect.height / 2, + } + drawAssistShape(center.x, center.y) }, [drawAssistShape]) const updateAssistShape = (event: { clientX: number; clientY: number }) => { @@ -56,6 +63,7 @@ const AssistShapeComponent = ( const rect = canvas.getBoundingClientRect() const centerX = event.clientX - rect.left const centerY = event.clientY - rect.top + lastPointerRef.current = { x: centerX, y: centerY } drawAssistShape(centerX, centerY) } diff --git a/components/label/components/TopTools.tsx b/components/label/components/TopTools.tsx index 445e7d7..ff47ff6 100644 --- a/components/label/components/TopTools.tsx +++ b/components/label/components/TopTools.tsx @@ -55,6 +55,7 @@ import { Paintbrush, Pen, SquarePen, + SquareDashedMousePointer, Tag, Timer, } from "lucide-react" @@ -2082,7 +2083,7 @@ const TopTools = ( onClick={() => { setAssistToolEnabled(!assistToolEnabled) }}> - +