forked from plungingChode/svg.draw.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
manual-test.html
121 lines (101 loc) · 2.94 KB
/
manual-test.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg.draw.js test</title>
<style>
html, body, #drawing {
height: 100%;
width: 100%;
margin: 0;
cursor: crosshair;
}
body {
background-size: 50px 50px;
background-image:
linear-gradient(to right, lightgray 1px, transparent 1px),
linear-gradient(to bottom, lightgray 1px, transparent 1px);
}
div {
margin: .5rem;
pointer-events: none;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div>
Draw shapes in sequence: line -> polyline -> polygon -> rect -> ellipse -> circle <br/>
<ul>
<li><b>Enter</b> for done (polyline, polygon)</li>
<li>Undo with <b>Ctrl + Z</b></li>
<li>Cancel with <b>Escape</b></li>
<li><b>Backspace</b> for previous shape</li>
<li>Press <b>S</b> to toggle snapping to grid</li>
<li>Press <b>C</b> to toggle drawing circles (line, polyline, polygon)</li>
</ul>
</div>
<svg id="drawing"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
<script src="./dist/svg.draw.min.js"></script>
<script>
// Test w/ nested
const svg = SVG().addTo('#drawing')
let drawing;
let gridSize = 1;
let circles = true;
let i = 0;
const shapes = ['line', 'polyline', 'polygon', 'rect', 'ellipse', 'circle'];
function prepareShape() {
const shape = shapes[i];
i = (i + 1) % shapes.length;
console.log('Draw ', shape);
drawing = svg[shape]().draw({
snapToGrid: gridSize,
drawCircles: circles
});
drawing.stroke('black');
drawing.fill('none');
drawing.on('drawstop', () => { prepareShape() });
}
window.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
drawing.draw('done');
}
if (e.ctrlKey && e.key === 'z') {
console.log('Undo');
drawing.draw('undo');
}
if (e.key === 'Escape') {
console.log('Cancel');
i = Math.max(i - 1, 0);
drawing.off('drawstop');
drawing.draw('cancel');
prepareShape();
}
if (e.key === 'Backspace') {
console.log('Cancel, previous shape');
i = Math.max(i - 2, 0);
drawing.off('drawstop');
drawing.draw('cancel');
prepareShape();
}
if (e.key === 's') {
const on = (gridSize === 1);
gridSize = on ? 50 : 1;
console.log('Turn grid', (on ? 'on' : 'off'));
drawing.draw('param', 'snapToGrid', gridSize);
}
if (e.key === 'c') {
circles = !circles;
console.log('Turn circles', (circles ? 'on' : 'off'));
drawing.draw('param', 'drawCircles', circles);
}
})
prepareShape();
</script>
</body>
</html>