-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
118 lines (110 loc) · 3.53 KB
/
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
<html>
<head>
<script>
function x(e) {
console.log(`alt:${e.altKey}, ctrl:${e.ctrlKey}, meta:${e.metaKey}, shift:${e.shiftKey}`)
}
// safari : 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15
// chrome : 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36
// edge : 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.62
// firefox: 5.0 (Macintosh)
console.log(navigator.appVersion)
// userAgent
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15
console.log(navigator.appName) // "Netscape"
console.log(navigator.appCodeName) // "Mozilla"
console.log(navigator.platform) // MacIntel
console.log(navigator)
</script>
</head>
<!--
PointerEvent
altKey (mac: option, opt, ⌥)
metaKey (mac: command, cmd, ⌘, windows: windows key, ⊞ (AltGr, right Alt key)) ⇪⇧
shiftKey:
ctrlKey
pointerId
pointerType (pen, touch, mouse, ...)
pressure (0-1)
tangentialPressure
tiltX, tiltY (-90 to 90)
twist (rotation, 0-359)
PointerEvent.getCoalescedEvents() (not safari)
-->
<body onpointermove="x(event)">
<style>
body {
font-family: sans-serif;
font-size: 12px;
background-color: #323232;
color: #909090;
}
kbd {
color: #fff;
font-family: sans-serif;
border: 1px solid #fff;
border-radius: 3px;
font-size: 12px;
/* padding: 0px 4px 0px 4px; */
/* margin: 0; */
/* text-align: center; */
}
.action {
color: #fff;
}
</style>
<div>
altKey (mac: option, opt, ⌥)
</div>
<div>
metaKey (mac: command, cmd, ⌘ / win: windows key, ⊞ (AltGr, right Alt key)), ❖ ⌫␣⇥⇤⇪
</div>
<div>
pen tool: start new path: <span class="action">click</span>: start with line, <span class="action">drag</span>: start with curve.
</div>
<div>
also: add cursor to continue, add/remove anchors, ...
<span class="action">click</span> or <span class="action">drag</span>: start new path.
<kbd>⌥</kbd>+<span class="action">drag</span>: edge.
<kbd>ctrl</kbd>+<span class="action">drag</span>: straight line
<kbd>⇧</kbd>+<span class="action">drag</span>: snap to 45°.
<kbd>⌘</kbd> edit tool
<kbd>↩</kbd> finish path
</div>
<div>
shiftKey: ⇧
</div>
<div>
ctrlKey: ctrl
</div>
<div>
return (on alphanum) ⏎ ↵ ↩
</div>
<div>
enter: ⌅ (on num pad)
</div>
<div>
⎋ Esc
</div>
<div>
mouse ◰ ◫ ◳
</div>
<div>
menu key ≣
</div>
←→
<!--
<svg style="background-color: linen; width: 640; height: 480;">
<path d="M 0 0 L 640 480" stroke="#00f"/>
<path d="M 0 240
C 100 0 200 0 300 240
C 400 480 500 480 600 240
" stroke="#f80" fill="none"/>
<path d="M 0 240
C 100 0 200 0 300 240
S 500 480 600 240
" stroke="#800" fill="none"/>
-->
</svg>
</body>
</html>