diff --git a/components/label/LabelNossr.tsx b/components/label/LabelNossr.tsx index eb0044f..d098e9f 100644 --- a/components/label/LabelNossr.tsx +++ b/components/label/LabelNossr.tsx @@ -329,10 +329,6 @@ const LabelPage = ({ const activeRasterScale = usePaperStore( (state) => state.rasterScale[activeImage] ?? 1 ) - const activeRasterSize = usePaperStore( - (state) => state.rasterSize[activeImage] ?? null - ) - const currentGroup = usePaperStore((state) => state.group) const { setDescOperations, metaOperation, @@ -347,22 +343,6 @@ const LabelPage = ({ viewScale: scale, }) }, [activeRasterScale, scale]) - const scaleOffsets = useMemo(() => { - if (!currentGroup || !activeRasterSize?.[0] || !activeRasterSize?.[1]) { - return { - offsetX: 0, - offsetY: 0, - } - } - - const displayedWidth = activeRasterSize[0] * displayedImageScale - const displayedHeight = activeRasterSize[1] * displayedImageScale - - return { - offsetX: displayedWidth / 2 - currentGroup.position.x, - offsetY: displayedHeight / 2 - currentGroup.position.y, - } - }, [activeRasterSize, currentGroup, displayedImageScale]) const asyncGetProjectDetail = useCallback(async () => { if (projectId) { @@ -2727,8 +2707,6 @@ const LabelPage = ({ style={{ overflow: "hidden" }}> = (props) => { const { options, mode } = props const canvasRef = useRef(null) + const FLOAT_EPSILON = 0.0000001 const getFixed = (sparsity: number) => { const pointIdx = String(sparsity).indexOf(".") @@ -22,8 +21,13 @@ const ScaleComponent: React.FC = (props) => { } const isCloseToInteger = (num: number) => { - return Math.abs(num - Math.round(num)) < 0.0000001 + return Math.abs(num - Math.round(num)) < FLOAT_EPSILON } + + const normalizeScaleValue = (num: number) => { + return Math.abs(num) < FLOAT_EPSILON ? 0 : num + } + const getSparsity = (scale: number) => { if (scale <= 1) { return Math.round(100 / scale) @@ -63,20 +67,30 @@ const ScaleComponent: React.FC = (props) => { ctx.font = "12px serif" ctx.beginPath() - const { offsetX, offsetY, scale } = options - const offset = mode === "horizontal" ? offsetX : offsetY + const { scale } = options + if (!Number.isFinite(scale) || scale <= 0) { + ctx.restore() + return + } // 间隔 const sparsity = getSparsity(scale) // 间隔内有多少条线 const part = 10 const pixelPerUnit = scale * sparsity const gap = pixelPerUnit / part + const unitGap = sparsity / part const fixed = getFixed(sparsity) - let index = offset % gap > 0 ? gap - (offset % gap) : -offset % gap + if (mode === "horizontal") { ctx.translate(31.5, 0) - do { - const num = ((offset + index) / pixelPerUnit) * sparsity + const maxWidth = Math.max(0, w - 32) + for ( + let tickIndex = 0; + tickIndex * gap <= maxWidth + FLOAT_EPSILON; + tickIndex += 1 + ) { + const index = tickIndex * gap + const num = normalizeScaleValue(tickIndex * unitGap) if (isCloseToInteger(num / sparsity)) { ctx.moveTo(index, h * 0.5) ctx.lineTo(index, h) @@ -87,12 +101,16 @@ const ScaleComponent: React.FC = (props) => { ctx.moveTo(index, h * 0.7) ctx.lineTo(index, h) } - index += gap - } while (index < w) + } } else { ctx.translate(0, 0.5) - do { - const num = ((offset + index) / pixelPerUnit) * sparsity + for ( + let tickIndex = 0; + tickIndex * gap <= h + FLOAT_EPSILON; + tickIndex += 1 + ) { + const index = tickIndex * gap + const num = normalizeScaleValue(tickIndex * unitGap) if (isCloseToInteger(num / sparsity)) { ctx.moveTo(w * 0.5, index) ctx.lineTo(w, index) @@ -110,8 +128,7 @@ const ScaleComponent: React.FC = (props) => { ctx.moveTo(w * 0.7, index) ctx.lineTo(w, index) } - index += gap - } while (index < h) + } } ctx.closePath() ctx.stroke() @@ -129,7 +146,7 @@ const ScaleComponent: React.FC = (props) => { if (mode === "horizontal") { return { ...baseStyles, - width: "100vw", + width: "100%", height: "32px", cursor: "col-resize", }