1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
export function screenToCanvas({
clientX,
clientY,
canvas,
}: {
clientX: number;
clientY: number;
canvas: HTMLCanvasElement;
}): { x: number; y: number } {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
return {
x: (clientX - rect.left) * scaleX,
y: (clientY - rect.top) * scaleY,
};
}
export function canvasToOverlay({
canvasX,
canvasY,
canvasRect,
containerRect,
canvasSize,
}: {
canvasX: number;
canvasY: number;
canvasRect: DOMRect;
containerRect: DOMRect;
canvasSize: { width: number; height: number };
}): { x: number; y: number } {
const scaleX = canvasRect.width / canvasSize.width;
const scaleY = canvasRect.height / canvasSize.height;
return {
x: canvasRect.left - containerRect.left + canvasX * scaleX,
y: canvasRect.top - containerRect.top + canvasY * scaleY,
};
}
export function positionToOverlay({
positionX,
positionY,
canvasRect,
containerRect,
canvasSize,
}: {
positionX: number;
positionY: number;
canvasRect: DOMRect;
containerRect: DOMRect;
canvasSize: { width: number; height: number };
}): { x: number; y: number } {
const scaleX = canvasRect.width / canvasSize.width;
const scaleY = canvasRect.height / canvasSize.height;
const centerScreenX =
canvasRect.left - containerRect.left + (canvasSize.width / 2) * scaleX;
const centerScreenY =
canvasRect.top - containerRect.top + (canvasSize.height / 2) * scaleY;
return {
x: centerScreenX + positionX * scaleX,
y: centerScreenY + positionY * scaleY,
};
}
export function getDisplayScale({
canvasRect,
canvasSize,
}: {
canvasRect: DOMRect;
canvasSize: { width: number; height: number };
}): { x: number; y: number } {
return {
x: canvasRect.width / canvasSize.width,
y: canvasRect.height / canvasSize.height,
};
}
|
