-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
96 lines (82 loc) · 3.05 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
</head>
<body>
<input type="number" id="w1" value="60" />
<input type="number" id="w2" value="65" />
<input type="number" id="w3" value="50" />
<input type="number" id="w4" value="50" />
<button type="button" onclick="generateArea()">Generate Area</button>
<div class="plot" style="width: 200px; height: 200px"></div>
<script>
function getDistance(p1, p2) {
return Math.sqrt(
Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2)
);
}
function createSVG(container, p1, p2, p3, p4) {
let containerRect = container.getBoundingClientRect();
let width = containerRect.width;
let height = containerRect.height;
let viewWidth = 100;
let viewHeight = 100;
let r1 = width / viewWidth;
let r2 = height / viewHeight;
// create svg
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', `0 0 ${viewWidth} ${viewHeight}`);
svg.setAttribute('width', width);
svg.setAttribute('height', height);
// create path
var newpath = document.createElementNS(svg.namespaceURI, 'path');
newpath.setAttributeNS(
null,
'd',
`M${p1[0]} ${p1[1]} L${p2[0]} ${p2[1]} L${p3[0]} ${p3[1]} L${p4[0]} ${p4[1]} Z`
);
newpath.setAttributeNS(null, 'stroke', 'rgb(255, 99, 132)');
newpath.setAttributeNS(null, 'fill', 'rgba(255, 99, 132, 0.2)');
svg.appendChild(newpath);
container.innerHTML = '';
container.appendChild(svg);
// center path
let boundingRect = newpath.getBoundingClientRect();
let tx = (width - boundingRect.width) / (2 * r1);
let ty = (height - boundingRect.height) / (2 * r2);
svg.setAttribute('viewBox', `${-tx} ${-ty} ${viewWidth} ${viewHeight}`);
}
function plotArea(container, sides) {
let [w1, w2, w3, w4] = sides;
let p1 = [0, 0];
let p2 = [0, w1];
let p4 = [w4, 0];
let p3;
for (let angle = 0; angle <= 180; angle++) {
let a = angle * (Math.PI / 180);
p3 = [
Math.round(w2 * Math.sin(a)),
w1 + Math.round(w2 * Math.cos(a)),
];
let targetDistance = Math.round(getDistance(p3, p4));
if (targetDistance === w3) break;
}
createSVG(container, p1, p2, p3, p4);
}
function generateArea() {
let w1 = parseInt(document.getElementById('w1').value);
let w2 = parseInt(document.getElementById('w2').value);
let w3 = parseInt(document.getElementById('w3').value);
let w4 = parseInt(document.getElementById('w4').value);
if (w1 && w2 && w3 && w4) {
plotArea(plot, [w1, w2, w3, w4]);
}
}
const plot = document.querySelector('.plot');
generateArea();
</script>
</body>
</html>