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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<html>
<head>
<style>
svg {
background-color: darkgray;
}
body {
margin: 0;
}
circle {
fill: red;
opacity: 0.33;
}
rect#map {
fill: gainsboro;
opacity: 0;
}
image {
transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */
}
.wall {
fill: none;
stroke: red;
stroke-width: 7px;
opacity: 0.7;
}
</style>
</head>
<body>
<svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg" stroke-width="20">
<defs>
<pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="1in" height="2in" fill="black" />
<rect x="1in" y="0" width="1in" height="2in" fill="white" />
</pattern>
<pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
</defs>
<line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
<line x1="-0.25in" y1="0" x2="-0.25in" y2="22in" stroke="url(#vert)" />
<image href="map1.png" height="6.428in" width="9.971in" />
<rect id="map" x="0" y="0" width="34in" height="22in" />
<rect class="wall" x="3.77in" y="1.49in" width="4.3in" height="7.33in" />
<line class="wall" x1="5.93in" y1="1.49in" x2="5.93in" y2="4.41in" />
<line class="wall" x1="5.93in" y1="5.36in" x2="5.93in" y2="8.82in" />
<line class="wall" x1="6.98in" y1="3.59in" x2="6.98in" y2="5.36in" />
<line class="wall" x1="5.93in" y1="3.59in" x2="8.07in" y2="3.59in" />
<line class="wall" x1="5.93in" y1="5.36in" x2="8.07in" y2="5.36in" />
<line class="wall" x1="5.93in" y1="7.51in" x2="8.07in" y2="7.51in" />
<line class="wall" x1="3.77in" y1="4.41in" x2="5.93in" y2="4.41in" />
<line class="wall" x1="3.77in" y1="7.51in" x2="5.09in" y2="7.51in" />
</svg>
<script>
var rect = document.querySelector('rect#map');
var toFixed = n => Number.parseFloat(n).toFixed(2);
rect.addEventListener('mousemove', e => {
var rect = e.target.getBoundingClientRect();
// console.log(rect)
var x = e.clientX - rect.left; // x position within the element
var y = e.clientY - rect.top; // y position within the element
// console.log("Left? : " + x + " ; Top? : " + y + ".");
// console.log(x/rect.width, y/rect.height);
console.log(
'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"',
'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"'
);
});
var svgns = "http://www.w3.org/2000/svg",
svg = document.querySelector('svg');
var columnCount = 33,
rowCount = 25,
pointDistanceInInches = 1.044;
var isOdd = n => n % 2 === 1;
var columns = [...Array(columnCount).keys()],
rows = [...Array(rowCount).keys()],
columnCoords = columns.map(x => x * pointDistanceInInches),
rowCoords = rows.map(y => y * pointDistanceInInches),
pointCoords = rowCoords.map((y, index) =>
(isOdd(index) ? columnCoords.slice(0, -1) : columnCoords).map(x => [x, y])
);
var xOffset = 0.4,
yOffset = 0.2;
calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.945,
alternatingOffset = pointDistanceInInches / 2;
pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
var circle = document.createElementNS(svgns, 'circle'),
cx = x + xOffset + (isOdd(index) ? alternatingOffset : 0),
cy = calcY * y + yOffset;
circle.setAttributeNS(null, 'cx', `${cx}in`);
circle.setAttributeNS(null, 'cy', `${cy}in`);
circle.setAttributeNS(null, 'r', '0.07in');
svg.appendChild(circle);
}));
</script>
</body>
</html>
|