zhangjiming
/
Outline
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复移动端触摸事件与双指缩放

feature/rail
白凤吉 5 months ago
parent
0842caa7d0
commit
e79fb9b34a
1 changed files with 143 additions and 198 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 339
      src/pages/measure/components/konva/MeasurementCanvas.tsx

339
src/pages/measure/components/konva/MeasurementCanvas.tsx
View File

@ -63,9 +63,9 @@ export interface MeasurementCanvasProps {
initialMeasurementDataLeft?: Point[];
initialMeasurementDataRight?: Point[];
initialAnalysisData?: AnalysisData[];
// 新增属性：控制是否显示标准线（benchmark shapes）
// 控制是否显示标准线（benchmark shapes）
showBenchmark?: boolean;
// 新增属性：控制是否显示分析线
// 控制是否显示分析线
showAnalysis?: boolean;
}
@ -80,6 +80,13 @@ export interface MeasurementCanvasRef {
redraw: () => void;
}
interface PinchData {
initialDistance: number;
initialScale: number;
initialOffset: { x: number; y: number };
initialCenter: Point; // 固定的缩放中心
}
const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProps>(
(props, ref) => {
const {
@ -100,19 +107,18 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
initialMeasurementDataLeft = [],
initialMeasurementDataRight = [],
initialAnalysisData = [],
showBenchmark = true, // 默认显示标准线
showAnalysis = true, // 默认显示分析线
showBenchmark = true,
showAnalysis = true,
} = props;
// Stage 物理中心（像素）
const canvasCenter = { x: width / 2, y: height / 2 };
// 当 logicalExtent 范围较小时，自动计算一个 scale 使其铺满整个 Stage
// 计算初始 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,
@ -127,28 +133,17 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
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 [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 [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(() => {
@ -199,80 +194,122 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
const stageRef = useRef<any>(null);
const transform = (pt: Point) => ({
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 };
// 记录当前活跃 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 isDragging = useRef(false);
const lastPos = useRef<{ x: number; y: number } | null>(null);
const dragFrame = useRef<number | null>(null);
const handleMouseDown = () => {
isDragging.current = true;
lastPos.current = stageRef.current.getPointerPosition();
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 handleMouseMove = () => {
if (!isDragging.current) return;
const currentPos = stageRef.current.getPointerPosition();
if (lastPos.current && currentPos) {
if (!dragFrame.current) {
dragFrame.current = requestAnimationFrame(() => {
const last = lastPos.current!;
const newOff = {
x: offset.x + currentPos.x - last.x,
y: offset.y + currentPos.y - last.y,
}
};
setOffset(clampOffset(newOff, scale));
lastPos.current = currentPos;
dragFrame.current = null;
});
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,
};
const handleMouseUp = () => {
isDragging.current = false;
if (dragFrame.current) {
cancelAnimationFrame(dragFrame.current);
dragFrame.current = null;
// 计算新的 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 handleMouseLeave = () => {
isDragging.current = false;
if (dragFrame.current) {
cancelAnimationFrame(dragFrame.current);
dragFrame.current = null;
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;
if (newScale < minZoom * pixelPerMm) newScale = minZoom * pixelPerMm;
if (newScale > maxZoom * pixelPerMm) newScale = maxZoom * pixelPerMm;
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,
@ -281,69 +318,27 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
setOffset(clampOffset(newOffset, newScale));
};
const lastTouchDistance = useRef<number | null>(null);
const handleTouchStart = (e: any) => {
const touches = e.evt.touches;
if (touches && touches.length === 2) {
e.evt.preventDefault();
const [t1, t2] = touches;
const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
lastTouchDistance.current = dist;
} else if (touches && touches.length === 1) {
isDragging.current = true;
lastPos.current = { x: touches[0].clientX, y: touches[0].clientY };
}
};
const handleTouchMove = (e: any) => {
const touches = e.evt.touches;
if (touches && touches.length === 2) {
e.evt.preventDefault();
const [t1, t2] = touches;
const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
if (lastTouchDistance.current) {
const delta = dist / lastTouchDistance.current;
let newScale = scale * delta;
if (newScale < minZoom * pixelPerMm) newScale = minZoom * pixelPerMm;
if (newScale > maxZoom * pixelPerMm) newScale = maxZoom * pixelPerMm;
const center = {
x: (t1.clientX + t2.clientX) / 2,
y: (t1.clientY + t2.clientY) / 2,
};
const L = {
x: origin.x + (center.x - (canvasCenter.x + offset.x)) / scale,
y: origin.y + (center.y - (canvasCenter.y + offset.y)) / scale,
// 辅助函数：将逻辑坐标转换为屏幕坐标
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 newOffset = {
x: center.x - canvasCenter.x - (L.x - origin.x) * newScale,
y: center.y - canvasCenter.y - (L.y - origin.y) * newScale,
};
setScale(newScale);
setOffset(clampOffset(newOffset, newScale));
lastTouchDistance.current = dist;
}
} else if (touches && touches.length === 1 && isDragging.current) {
const t = touches[0];
const pos = { x: t.clientX, y: t.clientY };
if (lastPos.current) {
setOffset((prev) =>
clampOffset(
{
x: prev.x + pos.x - lastPos.current!.x,
y: prev.y + pos.y - lastPos.current!.y,
},
scale
)
);
}
lastPos.current = pos;
}
};
const handleTouchEnd = () => {
isDragging.current = false;
lastTouchDistance.current = null;
lastPos.current = null;
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 = () => {
@ -352,45 +347,25 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
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}
/>
<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}
/>
<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={2}
/>
<Line key="x-axis" points={[xAxisStart.x, xAxisStart.y, xAxisEnd.x, xAxisEnd.y]} stroke="gray" strokeWidth={2} />
);
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={2}
/>
<Line key="y-axis" points={[yAxisStart.x, yAxisStart.y, yAxisEnd.x, yAxisEnd.y]} stroke="gray" strokeWidth={2} />
);
return lines;
};
@ -400,31 +375,16 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
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"
/>
<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"
/>
<Text key={`coord-y-${y}`} x={5} y={pos.y - 6} text={y.toFixed(0)} fontSize={12} fill="black" />
);
}
return texts;
@ -474,9 +434,7 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
startAngle: normalize(startAngle),
endAngle: normalize(endAngle),
anticlockwise:
(normalize(endAngle) - normalize(startAngle) + 2 * Math.PI) %
(2 * Math.PI) >
Math.PI,
(normalize(endAngle) - normalize(startAngle) + 2 * Math.PI) % (2 * Math.PI) > Math.PI,
};
return (
<Shape
@ -569,18 +527,8 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
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"
/>
<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>
);
});
@ -600,14 +548,11 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
ref={stageRef}
width={width}
height={height}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
onMouseLeave={handleMouseLeave}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
onPointerCancel={handlePointerCancel}
onWheel={handleWheel}
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
style={{ background: "#fff" }}
>
<Layer>

Write Preview
Loading…
Cancel
Save