-
Notifications
You must be signed in to change notification settings - Fork 67
/
index.html
66 lines (63 loc) · 1.85 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
<!doctype html>
<html>
<head>
<title>svg.resize.js</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="@svgdotjs/svg.select.js/dist/svg.select.css" />
</head>
<body>
<div
class="test"
style="height: 200vh; overflow: auto; display: flex; flex-direction: column; padding: 20px; margin-left: 10px"
>
<div id="svgcontent" style="flex-grow: 1; margin-top: 50vh"></div>
</div>
<script type="module" src="src/main.js"></script>
<script type="module">
import { SVG, on } from '@svgdotjs/svg.js'
const canvas = new SVG().size('100%', '100%').addTo('#svgcontent')
canvas
.rect(100, 100)
.move(100, 100)
.fill('red')
.select({ createHandle: (el) => el.polyline().css({ stroke: '#666' }) })
.resize()
const polygon = canvas
// star shape
.polygon([
[100, 100],
[200, 100],
[200, 200],
[300, 200],
[200, 300],
[200, 400],
[100, 400],
[100, 300],
[0, 300],
[0, 200],
[100, 200],
])
.move(250, 250)
.fill('blue')
.pointSelect()
.select()
.resize()
canvas.circle(100).fill('green').move(300, 300).select().resize({ preserveAspectRatio: true, aroundCenter: true })
on(document, 'keydown', (e) => {
if (e.key === 'Shift') {
polygon.resize({ preserveAspectRatio: true })
}
if (e.key === 'Control') {
polygon.resize({ preserveAspectRatio: true, aroundCenter: true })
}
if (e.key === 's') {
polygon.resize({ grid: 20, degree: 10 })
}
})
on(document, 'keyup', (e) => {
polygon.resize()
})
</script>
</body>
</html>