-
Notifications
You must be signed in to change notification settings - Fork 4
/
gridtest.html
81 lines (80 loc) · 2.15 KB
/
gridtest.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
<!DOCTYPE html>
<html>
<head>
<title>jQuery Line - Test Page</title>
<meta charset="UTF-8">
<style>
body {
background: url(gridtest-bg.png);
margin: 0;
}
.jquery-line {
border: 5px solid black;
margin: 20px;
}
.jquery-line, .misc {
opacity: .6;
filter: alpha(opacity=60);
}
.scaleMargin {
margin: 0 25px;
}
.scalePadding {
padding: 0 25px;
}
.scaleBorder {
border-color: black;
border-style: solid;
border-width: 0 25px;
}
</style>
</head>
<body>
<script src="lib/jquery.js"></script>
<script src="jquery.domline.js"></script>
<script src="lib/jquery.transform2d.min.js"></script>
<script>
$(function () {
for (var i = 0; i < 3; i++) {
var xoff = i * 400,
l = xoff + 50,
lrm = xoff + 200,
r = xoff + 350,
t = 50,
tbm = 200,
b = 350,
tl = {x:l, y:t},
tm = {x:lrm, y:t},
tr = {x:r, y:t},
mr = {x:r, y:tbm},
br = {x:r, y:b},
bm = {x:lrm, y:b},
bl = {x:l, y:b},
ml = {x:l, y:tbm},
thickness = i * 10 + 1;
// 90° angles
$.line(tl, tr, {lineColor:'black', lineWidth:thickness});
$.line(tr, br, {lineColor:'red', lineWidth:thickness});
$.line(br, bl, {lineColor:'blue', lineWidth:thickness});
$.line(bl, tl, {lineColor:'green', lineWidth:thickness});
// 45° angles
$.line(tl, br, {lineColor:'gold', lineWidth:thickness});
$.line(bl, tr, {lineColor:'purple', lineWidth:thickness});
// 22.5° angles, with double-back
$.line(tl, mr, {lineColor:'pink', lineWidth:thickness});
$.line(mr, tl, {lineColor:'white', lineWidth:thickness});
$.line(tl, bm, {lineColor:'pink', lineWidth:thickness});
$.line(bm, tr, {lineColor:'aqua', lineWidth:thickness});
$.line(mr, bl, {lineColor:'chartreuse', lineWidth:thickness});
var scaleX = xoff + 200,
scaleY = 425,
scaleStart = {x:scaleX - 75, y:scaleY},
scaleEnd = {x:scaleX + 75, y:scaleY},
classExtra = ['scaleMargin', 'scalePadding', 'scaleBorder'];
$.line(scaleStart, scaleEnd, {lineColor:'teal', lineWidth:25, className:'misc ' + classExtra[i]})
.css('transform', 'scale(2)');
}
});
</script>
</body>
</html>