zhangjiming
5 months ago
3 changed files with 619 additions and 3 deletions
-
2src/components/CustomNavBar.tsx
-
596src/components/konva/MeasurementCanvas.tsx
-
24src/pages/Measure.tsx
@ -0,0 +1,596 @@ |
|||
import React, { |
|||
useState, |
|||
useRef, |
|||
useImperativeHandle, |
|||
forwardRef, |
|||
useEffect, |
|||
} from "react"; |
|||
import { Stage, Layer, Line, Shape, Text } from "react-konva"; |
|||
|
|||
// 数据类型定义
|
|||
export interface Point { |
|||
x: number; |
|||
y: number; |
|||
} |
|||
|
|||
export interface BenchmarkArc { |
|||
type: "arc"; |
|||
start: Point; |
|||
end: Point; |
|||
radius: number; |
|||
color: string; |
|||
side: "right" | "left" | "up" | "down"; |
|||
} |
|||
|
|||
export interface BenchmarkLine { |
|||
type: "line"; |
|||
start: Point; |
|||
end: Point; |
|||
color: string; |
|||
} |
|||
|
|||
export type BenchmarkShape = BenchmarkArc | BenchmarkLine; |
|||
|
|||
export interface AnalysisData { |
|||
pointA: Point; |
|||
pointB: Point; |
|||
describe: string; |
|||
} |
|||
|
|||
// 逻辑坐标范围（单位：毫米）
|
|||
export interface LogicalExtent { |
|||
minX: number; |
|||
maxX: number; |
|||
minY: number; |
|||
maxY: number; |
|||
} |
|||
|
|||
export interface MeasurementCanvasProps { |
|||
width: number; |
|||
height: number; |
|||
logicalExtent?: LogicalExtent; |
|||
gridStep?: number; |
|||
showGrid?: boolean; |
|||
showScale?: boolean; |
|||
scaleInterval?: number; |
|||
showCoordinates?: boolean; |
|||
coordinateInterval?: number; |
|||
pixelPerMm?: number; |
|||
origin?: Point; |
|||
minZoom?: number; |
|||
maxZoom?: number; |
|||
initialBenchmarkData?: BenchmarkShape[]; |
|||
initialMeasurementDataLeft?: Point[]; |
|||
initialMeasurementDataRight?: Point[]; |
|||
initialAnalysisData?: AnalysisData[]; |
|||
// 控制是否显示标准线（benchmark shapes）
|
|||
showBenchmark?: boolean; |
|||
// 控制是否显示分析线
|
|||
showAnalysis?: boolean; |
|||
} |
|||
|
|||
export interface MeasurementCanvasRef { |
|||
resetCanvas: () => void; |
|||
clearShapes: () => void; |
|||
setBenchmarkData: (data: BenchmarkShape[]) => void; |
|||
setMeasurementDataLeft: (data: Point[]) => void; |
|||
setMeasurementDataRight: (data: Point[]) => void; |
|||
setMeasurementData: (data: Point[]) => void; |
|||
setAnalysisData: (data: AnalysisData[]) => void; |
|||
redraw: () => void; |
|||
} |
|||
|
|||
interface PinchData { |
|||
initialDistance: number; |
|||
initialScale: number; |
|||
initialOffset: { x: number; y: number }; |
|||
initialCenter: Point; // 固定的缩放中心
|
|||
} |
|||
|
|||
const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProps>( |
|||
(props, ref) => { |
|||
const { |
|||
width, |
|||
height, |
|||
logicalExtent = { minX: -100, maxX: 100, minY: -100, maxY: 100 }, |
|||
gridStep = 1, |
|||
showGrid = true, |
|||
showScale = false, |
|||
scaleInterval = 10, |
|||
showCoordinates = false, |
|||
coordinateInterval = 1, |
|||
pixelPerMm = 10, |
|||
origin = { x: 0, y: 0 }, |
|||
minZoom = 1, |
|||
maxZoom = 10, |
|||
initialBenchmarkData = [], |
|||
initialMeasurementDataLeft = [], |
|||
initialMeasurementDataRight = [], |
|||
initialAnalysisData = [], |
|||
showBenchmark = true, |
|||
showAnalysis = true, |
|||
} = props; |
|||
|
|||
// Stage 物理中心（像素）
|
|||
const canvasCenter = { x: width / 2, y: height / 2 }; |
|||
|
|||
// 计算初始 scale 与 offset
|
|||
const logicalWidth = logicalExtent.maxX - logicalExtent.minX; |
|||
const logicalHeight = logicalExtent.maxY - logicalExtent.minY; |
|||
const computedScale = Math.min(width / logicalWidth, height / logicalHeight); |
|||
const initialScale = computedScale > pixelPerMm ? computedScale : pixelPerMm; |
|||
const logicalCenter = { |
|||
x: (logicalExtent.minX + logicalExtent.maxX) / 2, |
|||
y: (logicalExtent.minY + logicalExtent.maxY) / 2, |
|||
}; |
|||
const initialOffset = |
|||
computedScale > pixelPerMm |
|||
? { |
|||
x: -(logicalCenter.x - origin.x) * initialScale, |
|||
y: -(logicalCenter.y - origin.y) * initialScale, |
|||
} |
|||
: { x: 0, y: 0 }; |
|||
|
|||
const [offset, setOffset] = useState<{ x: number; y: number }>(initialOffset); |
|||
const [scale, setScale] = useState<number>(initialScale); |
|||
const [benchmarkData, setBenchmarkData] = useState<BenchmarkShape[]>(initialBenchmarkData); |
|||
const [analysisData, setAnalysisData] = useState<AnalysisData[]>(initialAnalysisData); |
|||
|
|||
// 定时更新测量数据（左右两侧）
|
|||
const leftPointsRef = useRef<Point[]>([...initialMeasurementDataLeft]); |
|||
const rightPointsRef = useRef<Point[]>([...initialMeasurementDataRight]); |
|||
const [measurementDataLeft, setMeasurementDataLeftState] = useState<Point[]>(initialMeasurementDataLeft); |
|||
const [measurementDataRight, setMeasurementDataRightState] = useState<Point[]>(initialMeasurementDataRight); |
|||
const [measurementData, setMeasurementDataState] = useState<Point[]>([]); |
|||
const refreshInterval = 50; |
|||
const refreshTimer = useRef<number | null>(null); |
|||
useEffect(() => { |
|||
if (!refreshTimer.current) { |
|||
refreshTimer.current = window.setInterval(() => { |
|||
setMeasurementDataLeftState([...leftPointsRef.current]); |
|||
setMeasurementDataRightState([...rightPointsRef.current]); |
|||
}, refreshInterval); |
|||
} |
|||
return () => { |
|||
if (refreshTimer.current) { |
|||
clearInterval(refreshTimer.current); |
|||
refreshTimer.current = null; |
|||
} |
|||
}; |
|||
}, []); |
|||
|
|||
useImperativeHandle(ref, () => ({ |
|||
resetCanvas: () => { |
|||
setScale(pixelPerMm); |
|||
setOffset({ x: 0, y: 0 }); |
|||
}, |
|||
clearShapes: () => { |
|||
leftPointsRef.current = []; |
|||
rightPointsRef.current = []; |
|||
setMeasurementDataLeftState([]); |
|||
setMeasurementDataRightState([]); |
|||
setAnalysisData([]); |
|||
setMeasurementDataState([]); |
|||
}, |
|||
setBenchmarkData: (data: BenchmarkShape[]) => { |
|||
setBenchmarkData(data); |
|||
}, |
|||
setMeasurementDataLeft: (data: Point[]) => { |
|||
leftPointsRef.current = data; |
|||
}, |
|||
setMeasurementDataRight: (data: Point[]) => { |
|||
rightPointsRef.current = data; |
|||
}, |
|||
setMeasurementData: (data: Point[]) => { |
|||
setMeasurementDataState(data); |
|||
}, |
|||
setAnalysisData: (data: AnalysisData[]) => { |
|||
setAnalysisData(data); |
|||
}, |
|||
redraw: () => { |
|||
setScale((prev) => prev); |
|||
}, |
|||
})); |
|||
|
|||
const stageRef = useRef<any>(null); |
|||
|
|||
// 记录当前活跃 pointer（pointerId -> Point）
|
|||
const pointersRef = useRef<Map<number, Point>>(new Map()); |
|||
// 单指拖拽的上一次位置
|
|||
const lastDragPosRef = useRef<Point | null>(null); |
|||
// 针对鼠标，记录是否按下
|
|||
const isDraggingRef = useRef<boolean>(false); |
|||
// 记录双指缩放的初始数据（只在两指刚开始时记录一次）
|
|||
const pinchDataRef = useRef<PinchData | null>(null); |
|||
|
|||
// 辅助函数：从事件中获取正确的指针位置
|
|||
const getPointerPosition = (e: any): Point => { |
|||
const pos = stageRef.current.getPointerPosition(); |
|||
return pos ? pos : { x: e.evt.clientX, y: e.evt.clientY }; |
|||
}; |
|||
|
|||
const handlePointerDown = (e: any) => { |
|||
const point = getPointerPosition(e); |
|||
const pointerId = e.evt.pointerId; |
|||
pointersRef.current.set(pointerId, point); |
|||
// 判断是否为触摸事件
|
|||
const isTouch = e.evt.touches && e.evt.touches.length > 0; |
|||
if (!isTouch) { |
|||
isDraggingRef.current = true; |
|||
} |
|||
if (pointersRef.current.size === 1) { |
|||
lastDragPosRef.current = point; |
|||
} |
|||
// 当检测到两个手指时，记录初始数据——固定缩放中心
|
|||
if (pointersRef.current.size === 2) { |
|||
const pts = Array.from(pointersRef.current.values()); |
|||
const initialCenter = { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 }; |
|||
const initialDistance = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y); |
|||
pinchDataRef.current = { |
|||
initialDistance, |
|||
initialScale: scale, |
|||
initialOffset: offset, |
|||
initialCenter, // 固定的缩放中心
|
|||
}; |
|||
} |
|||
}; |
|||
|
|||
const handlePointerMove = (e: any) => { |
|||
const isTouch = e.evt.touches && e.evt.touches.length > 0; |
|||
if (!isTouch && !isDraggingRef.current) { |
|||
return; |
|||
} |
|||
const pointerId = e.evt.pointerId; |
|||
const point = getPointerPosition(e); |
|||
pointersRef.current.set(pointerId, point); |
|||
if (pointersRef.current.size === 1) { |
|||
// 单指拖拽
|
|||
if (lastDragPosRef.current) { |
|||
const dx = point.x - lastDragPosRef.current.x; |
|||
const dy = point.y - lastDragPosRef.current.y; |
|||
setOffset((prev) => clampOffset({ x: prev.x + dx, y: prev.y + dy }, scale)); |
|||
} |
|||
lastDragPosRef.current = point; |
|||
} else if (pointersRef.current.size >= 2 && pinchDataRef.current) { |
|||
// 双指缩放：固定缩放中心，与鼠标滚轮缩放逻辑一致
|
|||
const pts = Array.from(pointersRef.current.values()); |
|||
const currentDistance = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y); |
|||
const { initialDistance, initialScale, initialOffset, initialCenter } = pinchDataRef.current; |
|||
const scaleFactor = currentDistance / initialDistance; |
|||
let newScale = initialScale * scaleFactor; |
|||
newScale = Math.max(minZoom * pixelPerMm, Math.min(newScale, maxZoom * pixelPerMm)); |
|||
// 计算逻辑坐标 L：与鼠标滚轮缩放公式一致，固定 pointer 为初始记录的 initialCenter
|
|||
const L = { |
|||
x: origin.x + (initialCenter.x - (canvasCenter.x + initialOffset.x)) / initialScale, |
|||
y: origin.y + (initialCenter.y - (canvasCenter.y + initialOffset.y)) / initialScale, |
|||
}; |
|||
// 计算新的 offset
|
|||
const newOffset = { |
|||
x: initialCenter.x - canvasCenter.x - (L.x - origin.x) * newScale, |
|||
y: initialCenter.y - canvasCenter.y - (L.y - origin.y) * newScale, |
|||
}; |
|||
setScale(newScale); |
|||
// 此处调用 clampOffset 确保缩放过程中不会超出边界
|
|||
setOffset(clampOffset(newOffset, newScale)); |
|||
} |
|||
}; |
|||
|
|||
const handlePointerUp = (e: any) => { |
|||
const pointerId = e.evt.pointerId; |
|||
pointersRef.current.delete(pointerId); |
|||
const isTouch = e.evt.touches && e.evt.touches.length > 0; |
|||
if (!isTouch) { |
|||
isDraggingRef.current = false; |
|||
} |
|||
// 当手指数不足2时重置双指缩放初始数据
|
|||
if (pointersRef.current.size < 2) { |
|||
pinchDataRef.current = null; |
|||
} |
|||
if (pointersRef.current.size === 1) { |
|||
const remaining = Array.from(pointersRef.current.values())[0]; |
|||
lastDragPosRef.current = remaining; |
|||
} else if (pointersRef.current.size === 0) { |
|||
lastDragPosRef.current = null; |
|||
} |
|||
}; |
|||
|
|||
const handlePointerCancel = (e: any) => { |
|||
handlePointerUp(e); |
|||
}; |
|||
|
|||
// 鼠标滚轮缩放（仅适用于 PC）
|
|||
const handleWheel = (e: any) => { |
|||
e.evt.preventDefault(); |
|||
const oldScale = scale; |
|||
const pointer = stageRef.current.getPointerPosition(); |
|||
if (!pointer) return; |
|||
const L = { |
|||
x: origin.x + (pointer.x - (canvasCenter.x + offset.x)) / oldScale, |
|||
y: origin.y + (pointer.y - (canvasCenter.y + offset.y)) / oldScale, |
|||
}; |
|||
let newScale = e.evt.deltaY < 0 ? oldScale * 1.1 : oldScale / 1.1; |
|||
newScale = Math.max(minZoom * pixelPerMm, Math.min(newScale, maxZoom * pixelPerMm)); |
|||
const newOffset = { |
|||
x: pointer.x - canvasCenter.x - (L.x - origin.x) * newScale, |
|||
y: pointer.y - canvasCenter.y - (L.y - origin.y) * newScale, |
|||
}; |
|||
setScale(newScale); |
|||
setOffset(clampOffset(newOffset, newScale)); |
|||
}; |
|||
|
|||
// 辅助函数：将逻辑坐标转换为屏幕坐标
|
|||
const transform = (pt: Point | null): { x: number; y: number } => { |
|||
if (!pt) return { x: 0, y: 0 }; |
|||
return { |
|||
x: canvasCenter.x + offset.x + (pt.x - origin.x) * scale, |
|||
y: canvasCenter.y + offset.y + (pt.y - origin.y) * scale, |
|||
}; |
|||
}; |
|||
|
|||
const clampOffset = (newOffset: { x: number; y: number }, currentScale: number) => { |
|||
const left = canvasCenter.x + newOffset.x + (logicalExtent.minX - origin.x) * currentScale; |
|||
const right = canvasCenter.x + newOffset.x + (logicalExtent.maxX - origin.x) * currentScale; |
|||
const top = canvasCenter.y + newOffset.y + (logicalExtent.minY - origin.y) * currentScale; |
|||
const bottom = canvasCenter.y + newOffset.y + (logicalExtent.maxY - origin.y) * currentScale; |
|||
let clampedX = newOffset.x; |
|||
let clampedY = newOffset.y; |
|||
if (left > 0) clampedX -= left; |
|||
if (right < width) clampedX += width - right; |
|||
if (top > 0) clampedY -= top; |
|||
if (bottom < height) clampedY += height - bottom; |
|||
return { x: clampedX, y: clampedY }; |
|||
}; |
|||
|
|||
const renderGridAndAxes = () => { |
|||
const lines = []; |
|||
for (let x = logicalExtent.minX; x <= logicalExtent.maxX; x += gridStep) { |
|||
const p1 = transform({ x, y: logicalExtent.minY }); |
|||
const p2 = transform({ x, y: logicalExtent.maxY }); |
|||
lines.push( |
|||
<Line key={`v-${x}`} points={[p1.x, p1.y, p2.x, p2.y]} stroke="#eee" strokeWidth={1} /> |
|||
); |
|||
} |
|||
for (let y = logicalExtent.minY; y <= logicalExtent.maxY; y += gridStep) { |
|||
const p1 = transform({ x: logicalExtent.minX, y }); |
|||
const p2 = transform({ x: logicalExtent.maxX, y }); |
|||
lines.push( |
|||
<Line key={`h-${y}`} points={[p1.x, p1.y, p2.x, p2.y]} stroke="#eee" strokeWidth={1} /> |
|||
); |
|||
} |
|||
const xAxisStart = transform({ x: logicalExtent.minX, y: 0 }); |
|||
const xAxisEnd = transform({ x: logicalExtent.maxX, y: 0 }); |
|||
lines.push( |
|||
<Line key="x-axis" points={[xAxisStart.x, xAxisStart.y, xAxisEnd.x, xAxisEnd.y]} stroke="gray" strokeWidth={1} /> |
|||
); |
|||
const yAxisStart = transform({ x: 0, y: logicalExtent.minY }); |
|||
const yAxisEnd = transform({ x: 0, y: logicalExtent.maxY }); |
|||
lines.push( |
|||
<Line key="y-axis" points={[yAxisStart.x, yAxisStart.y, yAxisEnd.x, yAxisEnd.y]} stroke="gray" strokeWidth={1} /> |
|||
); |
|||
return lines; |
|||
}; |
|||
|
|||
const renderCoordinates = () => { |
|||
const texts = []; |
|||
const minSpacing = 30; |
|||
const dynamicXInterval = Math.max(coordinateInterval, Math.ceil(minSpacing / scale)); |
|||
const dynamicYInterval = Math.max(coordinateInterval, Math.ceil(minSpacing / scale)); |
|||
for (let x = logicalExtent.minX; x <= logicalExtent.maxX; x += dynamicXInterval) { |
|||
const pos = transform({ x, y: 0 }); |
|||
texts.push( |
|||
<Text key={`coord-x-${x}`} x={pos.x - 10} y={height - 20} text={x.toFixed(0)} fontSize={12} fill="black" /> |
|||
); |
|||
} |
|||
for (let y = logicalExtent.minY; y <= logicalExtent.maxY; y += dynamicYInterval) { |
|||
const pos = transform({ x: 0, y }); |
|||
texts.push( |
|||
<Text key={`coord-y-${y}`} x={5} y={pos.y - 6} text={y.toFixed(0)} fontSize={12} fill="black" /> |
|||
); |
|||
} |
|||
return texts; |
|||
}; |
|||
|
|||
const renderBenchmarkShapes = () => { |
|||
return benchmarkData.map((shape, idx) => { |
|||
if (shape.type === "line") { |
|||
const p1 = transform(shape.start); |
|||
const p2 = transform(shape.end); |
|||
return ( |
|||
<Line |
|||
key={`benchmark-line-${idx}`} |
|||
points={[p1.x, p1.y, p2.x, p2.y]} |
|||
stroke={shape.color} |
|||
strokeWidth={1} |
|||
/> |
|||
); |
|||
} else if (shape.type === "arc") { |
|||
const dx = shape.end.x - shape.start.x; |
|||
const dy = shape.end.y - shape.start.y; |
|||
const d = Math.hypot(dx, dy); |
|||
const Mx = (shape.start.x + shape.end.x) / 2; |
|||
const My = (shape.start.y + shape.end.y) / 2; |
|||
const halfChord = d / 2; |
|||
const h = Math.sqrt(shape.radius * shape.radius - halfChord * halfChord); |
|||
const candidate1 = { |
|||
cx: Mx - (dy / d) * h, |
|||
cy: My + (dx / d) * h, |
|||
}; |
|||
const candidate2 = { |
|||
cx: Mx + (dy / d) * h, |
|||
cy: My - (dx / d) * h, |
|||
}; |
|||
const chosen = shape.side === "right" ? candidate2 : candidate1; |
|||
const startAngle = Math.atan2(shape.start.y - chosen.cy, shape.start.x - chosen.cx); |
|||
const endAngle = Math.atan2(shape.end.y - chosen.cy, shape.end.x - chosen.cx); |
|||
const normalize = (angle: number): number => { |
|||
while (angle < 0) angle += 2 * Math.PI; |
|||
while (angle >= 2 * Math.PI) angle -= 2 * Math.PI; |
|||
return angle; |
|||
}; |
|||
const params = { |
|||
cx: chosen.cx, |
|||
cy: chosen.cy, |
|||
r: shape.radius, |
|||
startAngle: normalize(startAngle), |
|||
endAngle: normalize(endAngle), |
|||
anticlockwise: |
|||
(normalize(endAngle) - normalize(startAngle) + 2 * Math.PI) % (2 * Math.PI) > Math.PI, |
|||
}; |
|||
return ( |
|||
<Shape |
|||
key={`benchmark-arc-${idx}`} |
|||
sceneFunc={(ctx, shapeObj) => { |
|||
ctx.beginPath(); |
|||
ctx.arc( |
|||
canvasCenter.x + offset.x + (params.cx - origin.x) * scale, |
|||
canvasCenter.y + offset.y + (params.cy - origin.y) * scale, |
|||
params.r * scale, |
|||
params.startAngle, |
|||
params.endAngle, |
|||
params.anticlockwise |
|||
); |
|||
ctx.strokeStyle = shape.color; |
|||
ctx.lineWidth = 1; |
|||
ctx.stroke(); |
|||
ctx.fillStrokeShape(shapeObj); |
|||
}} |
|||
/> |
|||
); |
|||
} |
|||
return null; |
|||
}); |
|||
}; |
|||
|
|||
const renderMeasurementCurveLeft = () => { |
|||
if (measurementDataLeft.length === 0) return null; |
|||
const pts = measurementDataLeft |
|||
.map((pt) => { |
|||
const p = transform(pt); |
|||
return [p.x, p.y]; |
|||
}) |
|||
.flat(); |
|||
return ( |
|||
<Line |
|||
points={pts} |
|||
stroke="red" |
|||
strokeWidth={2} |
|||
tension={1} |
|||
lineCap="round" |
|||
lineJoin="round" |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
const renderMeasurementCurveRight = () => { |
|||
if (measurementDataRight.length === 0) return null; |
|||
const pts = measurementDataRight |
|||
.map((pt) => { |
|||
const p = transform(pt); |
|||
return [p.x, p.y]; |
|||
}) |
|||
.flat(); |
|||
return ( |
|||
<Line |
|||
points={pts} |
|||
stroke="red" |
|||
strokeWidth={2} |
|||
tension={1} |
|||
lineCap="round" |
|||
lineJoin="round" |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
const renderMeasurementCurve = () => { |
|||
if (measurementData.length === 0) return null; |
|||
const pts = measurementData |
|||
.map((pt) => { |
|||
const p = transform(pt); |
|||
return [p.x, p.y]; |
|||
}) |
|||
.flat(); |
|||
return ( |
|||
<Line |
|||
points={pts} |
|||
stroke="purple" |
|||
strokeWidth={2} |
|||
tension={1} |
|||
lineCap="round" |
|||
lineJoin="round" |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
const renderAnalysis = () => { |
|||
return analysisData.map((item, idx) => { |
|||
const pA = transform(item.pointA); |
|||
const pB = transform(item.pointB); |
|||
return ( |
|||
<React.Fragment key={`analysis-${idx}`}> |
|||
<Line points={[pA.x, pA.y, pB.x, pB.y]} stroke="red" strokeWidth={1} /> |
|||
<Text x={pA.x - 15} y={pA.y - 15} text={item.describe} fontSize={14} fill="black" /> |
|||
</React.Fragment> |
|||
); |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<div |
|||
style={{ |
|||
width, |
|||
height, |
|||
border: "1px solid #ccc", |
|||
position: "relative", |
|||
touchAction: "none", |
|||
}} |
|||
> |
|||
<Stage |
|||
ref={stageRef} |
|||
width={width} |
|||
height={height} |
|||
onPointerDown={handlePointerDown} |
|||
onPointerMove={handlePointerMove} |
|||
onPointerUp={handlePointerUp} |
|||
onPointerCancel={handlePointerCancel} |
|||
onWheel={handleWheel} |
|||
style={{ background: "#fff" }} |
|||
> |
|||
<Layer> |
|||
{showGrid && renderGridAndAxes()} |
|||
{showBenchmark && renderBenchmarkShapes()} |
|||
{renderMeasurementCurveLeft()} |
|||
{renderMeasurementCurveRight()} |
|||
{renderMeasurementCurve()} |
|||
{showAnalysis && renderAnalysis()} |
|||
</Layer> |
|||
{showCoordinates && <Layer>{renderCoordinates()}</Layer>} |
|||
</Stage> |
|||
{showScale && ( |
|||
<div |
|||
style={{ |
|||
position: "absolute", |
|||
bottom: 10, |
|||
left: 10, |
|||
background: "rgba(255,255,255,0.8)", |
|||
padding: "2px 4px", |
|||
border: "1px solid #ccc", |
|||
fontSize: 12, |
|||
pointerEvents: "none", |
|||
}} |
|||
> |
|||
<div |
|||
style={{ |
|||
width: gridStep * scaleInterval * scale, |
|||
borderBottom: "2px solid black", |
|||
marginBottom: 2, |
|||
}} |
|||
></div> |
|||
<div>{`${gridStep * scaleInterval} mm`}</div> |
|||
</div> |
|||
)} |
|||
</div> |
|||
); |
|||
} |
|||
); |
|||
|
|||
export default MeasurementCanvas; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue