使用html画一个键盘

2744557306

1. <!DOCTYPE html>
   2 i& Q7 B  m3 V
2. <html lang="en">0 z1 H/ H5 v5 Q' [
   
3. <head>
   & m. X! j0 m/ ?& f' t5 I9 n2 q7 O
4.   <meta charset="UTF-8">
   $ ~+ L6 R0 W2 w3 `/ W* u+ k
5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">6 ^4 O\" }! L: p  Z\" y/ T' X
   
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   . O* K' _9 K\" }( y' u/ _2 J$ u; i
7.   <link rel="stylesheet" >
   ! ^* `9 x  |: q! w3 y) G
8.   <title>vector examples Keyboard</title>
   - {: N) T5 R7 V* U/ D* t8 p* S
9. </head>! |1 Y% @( {  _% T
   
10. <body>
    9 b8 V% Q' Y1 Q
11.   <div id="keyboard"></div>
    8 H* C& J' C$ W  \% B$ Y
12.   <!-- <script type="module" src="./Keyboard.js"></script> -->3 D3 G, ], O( |3 H7 Q0 D
    
13.   <script type="module" src="./temp.js"></script>- O- a& [7 T9 Y9 w
    
14. </body>
    9 ]\" |5 a/ i2 a5 |4 M
15. </html>$ H6 j+ d3 ?1 u. m2 @: k; Y
    

复制代码

1. import Interactive from "https://vectorjs.org/interactive.js";' ]( d- c- n# e1 r
   
2. console.log("Interactive", Interactive);
   - Q* g( p' w% h2 \

复制代码

1. /**% F8 |5 Q  r3 T) Z# }5 e
   
2. * [url=home.php?mod=space&uid=634908]@title[/url] Keyboard2 `7 y6 F4 }' @
   
3. * @description This interactive demonstrates how key board input can be used to add interactivity.
   # B; e4 t/ B4 c, Y
4. * @tags [input]
   . z$ Q' d* j' j2 L; R
5. */
   / ]$ F; |4 D$ p0 o! u
6. // import { Interactive, getScriptName } from "../../index.js";3 G8 ~/ x0 X* n- p
   
7. // let interactive = new Interactive(getScriptName());
   # u\" J+ Z: b9 b
8. import Interactive from "https://vectorjs.org/interactive.js";, I& N\" K, E# ]: }\" Y\" y
   
9. let interactive = new Interactive("keyboard");
   ' w, L/ v: P( t: C/ l) V* O* [
10. interactive.width = 768;
    9 |' ?0 Z' e: K4 E7 H5 L7 @9 Q' t
11. interactive.height = 300;
    ' t2 ]% F4 f4 H) H% [
12. interactive.border = true;
    ; a8 U, v5 O/ Y3 ~
13. let buffer = "";8 [4 \$ Q4 i, W2 h
    
14. let keys = [, G* _$ X' l$ x- ]  ~, F
    
15.   [' m3 w\" J7 N7 ]; b
    
16.     "`",
    , w- {& Q* L2 K* E: b( ~
17.     "1",6 B6 L7 T- g6 n
    
18.     "2",
    . J% u- g: h6 {& Y\" G3 q
19.     "3",! \: k! P1 ~1 z\" O. s
    
20.     "4",
    + E1 A7 `  I3 _1 F+ c# O& Y- F( Z
21.     "5",3 i7 T8 [  ~# N( Q0 H; g
    
22.     "6",
    # J6 \* I) s- i3 u/ V; G
23.     "7",
    * g# v9 ^8 N, m' s- ?' \
24.     "8",
      Q3 {% N7 l- S* U* k  a3 j3 Y) h
25.     "9",* V\" y0 D  s% X) G5 s* E
    
26.     "0",& I4 Z2 W' \  h7 k' y- M) o
    
27.     "-",
    7 ]) g! l6 [) w9 v: m! j
28.     "=",4 k# ?/ |8 Y) A/ M
    
29.     "Backspace",$ i- P- W3 B/ v; l6 r$ d
    
30.   ],- ~. H0 |9 O% {
    
31.   ["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
    \" J1 Q' e# e$ D4 Y& \$ f
32.   ["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],9 U/ ^; Y5 B\" ?7 D\" E  j$ k
    
33.   ["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],$ F/ C) W$ N3 _7 n) A7 K5 Q
    
34.   [  Z! w3 z7 a. F# G) h5 ?' S1 `
    
35.     "fn",
    ! L% f- |; L6 D& r% r. J
36.     "Control",. @, {5 k$ m9 m
    
37.     "Alt",6 F! n, I\" |! `# L2 q8 b
    
38.     "Meta",
    2 F8 D9 N2 T0 D
39.     " ",  }) w$ A4 H) K+ \/ V% ]+ q
    
40.     "Meta",
    \" l0 B8 f) v8 N
41.     "Alt",
    & Q5 M. g: z; W) V2 v
42.     "ArrowLeft",5 t% e% a2 W- Y1 v( T8 W
    
43.     "ArrowUp",+ N/ V7 h8 I! W
    
44.     "ArrowDown",( x# @8 X) U6 M) \, p
    
45.     "ArrowRight",
    2 {. H7 `. s8 a+ H; ^$ ^$ D& |
46.   ],% L  j8 j, P/ d. X
    
47. ];
    % O0 _! \  J+ G3 M: R& a
48. let buttons = [];( q& e6 e# A) b  I- Q' ?  E* o2 [
    
49. let keycodes = {
    # J7 Q- s7 w6 |# I; a/ G
50.   0: { Symbol: 0, Shift: ")" },# }+ ~$ Z$ j3 @# D$ I
    
51.   1: { Symbol: 1, Shift: "!" },$ q  n/ i: O4 Y3 M( d\" k( m
    
52.   2: { Symbol: 2, Shift: "@" },1 S3 c; b* D4 v: Y
    
53.   3: { Symbol: 3, Shift: "#" },
    $ ^) v6 n) s5 R) T( w
54.   4: { Symbol: 4, Shift: "$" },
    , `1 @3 V$ Y+ o5 [( ~6 S5 s- s
55.   5: { Symbol: 5, Shift: "%" },# m( v# J2 v) h- |! Q
    
56.   6: { Symbol: 6, Shift: "^" },! v5 c' h: r4 f/ H8 o. W
    
57.   7: { Symbol: 7, Shift: "&" },
    ! R5 S& m$ V( `
58.   8: { Symbol: 8, Shift: "*" },
    * T- ?2 u( u; l! n$ o  K
59.   9: { Symbol: 9, Shift: "(" },8 n4 F( w- X% P( o
    
60.   a: { Symbol: "a", Shift: "A" },) E- y  x- s( B/ j5 Z\" k
    
61.   b: { Symbol: "b", Shift: "B" },+ d8 W; O+ x* }: Z- {; w, F! L
    
62.   c: { Symbol: "c", Shift: "C" },
    6 Y* V# b+ p\" |. b; o
63.   d: { Symbol: "d", Shift: "D" },
    # ^8 K1 ]/ g+ D. _4 f# G
64.   e: { Symbol: "e", Shift: "E" },# {: q+ u( h% l
    
65.   f: { Symbol: "f", Shift: "F" },* l( ^% M) j; |; M8 u& h
    
66.   g: { Symbol: "g", Shift: "G" },
    * U8 `  P( q$ g' i4 f
67.   h: { Symbol: "h", Shift: "H" },! ?8 y6 C- a0 d5 h, G% R) r( B
    
68.   i: { Symbol: "i", Shift: "I" },
    4 ]1 i  q- B1 o6 z
69.   j: { Symbol: "j", Shift: "J" },
    / d/ q2 B* C+ J  U
70.   k: { Symbol: "k", Shift: "K" },
    0 j- E\" o: y! e5 y1 g
71.   l: { Symbol: "l", Shift: "L" },
    3 G' [- t9 c$ L' V+ W( ^5 }
72.   m: { Symbol: "m", Shift: "M" },
    8 l$ }. M5 q9 J: A* e4 s
73.   n: { Symbol: "n", Shift: "N" },; n5 ^0 i  o5 c. f
    
74.   o: { Symbol: "o", Shift: "O" },2 n- e' j( Q! I/ n& G- q3 a4 \
    
75.   p: { Symbol: "p", Shift: "P" },
    . |) E\" J& b: a$ l\" ^& [& y
76.   q: { Symbol: "q", Shift: "Q" },8 q1 [- b9 Z% V2 W\" z9 G# }! z
    
77.   r: { Symbol: "r", Shift: "R" },
    \" T, N# A6 C3 B! U+ t! k% q9 g* R% b
78.   s: { Symbol: "s", Shift: "S" },6 c* Y& k7 g9 E5 v* o7 {
    
79.   t: { Symbol: "t", Shift: "T" },
    ! s\" _7 x4 e% i% O
80.   u: { Symbol: "u", Shift: "U" },9 A7 r\" ^! W\" p+ P  X
    
81.   v: { Symbol: "v", Shift: "V" },! x6 E- |$ k3 s% s  V
    
82.   w: { Symbol: "w", Shift: "W" },# ~3 P% {& t1 X+ F: J, D( T- [
    
83.   x: { Symbol: "x", Shift: "X" },+ _# S% N4 I: k2 }  O\" p$ G* L
    
84.   y: { Symbol: "y", Shift: "Y" },# ?, j- H& S$ t
    
85.   z: { Symbol: "z", Shift: "Z" },( j% i7 r6 Z8 O: G
    
86.   "`": { Symbol: "`", Shift: "~" },* d: U8 a4 W5 n: F5 V& k\" G
    
87.   "-": { Symbol: "-", Shift: "_" },
    ' |) I4 i) J' p  ]& |' D% u, O, o
88.   "=": { Symbol: "=", Shift: "+" },
    ( B+ J3 z/ F& B1 r+ A* y! H1 }
89.   ";": { Symbol: ";", Shift: ":" },. {3 x& {! W5 _# J0 }
    
90.   "'": { Symbol: "'", Shift: '"' },
    % B6 g! w\" L1 L# h4 @2 I& L+ t
91.   "[": { Symbol: "[", Shift: "{" },+ k6 ]1 q8 M8 ^. K/ \$ t4 B7 j
    
92.   "]": { Symbol: "]", Shift: "}" },
    0 k) `, i' g% i8 _  ~; n- [# y
93.   "\\": { Symbol: "\\", Shift: "|" },
    & Y& G- S; m( Q. F
94.   ",": { Symbol: ",", Shift: "<" },
    4 f3 c+ }; R$ j) c) f8 H
95.   ".": { Symbol: ".", Shift: ">" },
    # d& q8 u- N8 `# Y' N# d
96.   "/": { Symbol: "/", Shift: "?" },5 m( G) U\" d8 T! u) |7 }
    
97.   Backspace: { Symbol: "⌫", Shift: "" },
    . ]) \; }; ^\" s8 {
98.   tab: { Symbol: "  ", Shift: "" },
      S\" r6 Q# H! X9 v
99.   CapsLock: { Symbol: "⇪", Shift: "" },8 B$ F7 \6 o& g7 ^) T  O& V. r) [
    
100.   Shift: { Symbol: "⇧", Shift: "" },
     - `7 Z- i5 t( b6 k7 g# H, X! R& E/ K
101.   Enter: { Symbol: "⏎", Shift: "" },\" i# I& @' R/ |6 @% J: Y3 S3 ^
     
102.   Control: { Symbol: "⌃", Shift: "" },0 A) m' ^\" Q4 Y1 W\" F
     
103.   Alt: { Symbol: "Alt", Shift: "" },; K& I4 Q; l1 ~# |; \0 R- C
     
104.   Meta: { Symbol: "⌘", Shift: "" },: ]5 m# V8 o/ ]* }2 ]4 p, z
     
105.   ArrowLeft: { Symbol: "←", Shift: "" },
     7 ]6 Y) i2 j0 J
106.   ArrowUp: { Symbol: "↑", Shift: "" },: w6 g: Z: ^# p+ v3 T6 `# _
     
107.   ArrowDown: { Symbol: "↓", Shift: "" },$ c1 u! l' Q5 H- w7 G
     
108.   ArrowRight: { Symbol: "→", Shift: "" },& c) p5 a+ c# m/ n* J
     
109.   " ": { Symbol: " ", Shift: "" },
     $ F+ [# ~( F/ E* {
110. };2 B& |9 `' P/ P7 B
     
111. let buttonMap = new Map();/ \9 O. D; f\" B
     
112. let height = 32;
     $ I# [! q& m; d
113. let margin = 8;
     / s( B7 T( A5 f7 T2 f
114. let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
       X/ O/ ?' j* E  ^8 Y, m, z
115. let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
     4 P* d! G  y  i  `) B1 ~
116. for (let row = 0; row < keys.length; row++) {
     $ Q6 ^\" {: C: G8 _
117.   let x = 32;+ Y; g8 t& W% T
     
118.   let prev;
     \" ^5 D2 i7 @/ Y1 V( B# l- }
119.   for (let i = 0; i < keys[row].length; i++) {
     ! k7 \! q1 |0 P2 y9 g
120.     let key = keys[row][i];# e' T! B; i; Y$ I( [! u
     
121.     let width = 32;
     2 U8 ^\" s, V, b- f$ N
122.     let button;; c+ d) p3 O# D2 X. o+ _5 C/ b
     
123.     switch (key) {( \8 z' X' t2 ]/ i! ]
     
124.       case "CapsLock":
     6 h! @- n8 s\" A! s
125.         button = capslock;
     * D  R: ]+ s1 q
126.         width = 64;
     5 q& e4 f3 U9 X
127.         break;& r! T7 X$ G3 e+ V) v
     
128.       case "Shift":
     ; U2 J( Q( B5 N, \
129.         if (shift.x === 0) {; ^2 c3 h2 k7 n' N
     
130.           button = shift;; `, l9 K  O+ ^! I2 b
     
131.         } else {
     : A4 C' R: D3 B$ s7 j  D7 U
132.           button = interactive.button(2 i# T6 X9 r, c9 `, C+ ^% ?. |6 [
     
133.             0,! m3 `1 x  H. Z: Y; t' R
     
134.             0,
     3 y# \/ P1 ]( i6 n
135.             keycodes[key] != undefined ? keycodes[key].Symbol : key8 A. h  U  J7 ], \( d8 Q$ k) _
     
136.           );
     5 W# u  y8 \4 U- }7 ]  S- Q# G
137.         }2 u5 T' D4 Q. q+ R6 G
     
138.         width = 90;4 K* Z1 a7 _3 I7 H* r
     
139.         break;
     ; h  K6 X( v5 ]1 s
140.       case "tab":
     % b- P5 E9 {) b0 G0 _
141.         width = 50;
     7 y0 t  {) F* h\" v, P8 S5 ~
142.         button = interactive.button(2 `, V5 O: M) m+ b/ s
     
143.           0,
       o- F8 J  C' G* Q: l3 q
144.           0,
     & q! o% H8 {& i
145.           keycodes[key] != undefined ? keycodes[key].Symbol : key
     5 c; |6 E+ M% c) L\" L. R4 _6 ]* X
146.         );% o' N/ Q( l$ n
     
147.         break;9 U. d# k/ R3 Z  M
     
148.       case " ":
     / A+ y9 O1 O* C3 g( |4 q\" k* g
149.         width = 176;3 ~& q0 T& _% [- m4 y% M
     
150.         button = interactive.button(4 W3 ?1 h+ R; b1 H2 H+ a, z
     
151.           0,
     % _8 P. j6 I$ m. G' k' O4 ^# B% b
152.           0,7 |* u4 j. g4 T: L! N9 s  g& y+ U# I
     
153.           keycodes[key] != undefined ? keycodes[key].Symbol : key
       y5 @, m- h# f: W7 @  Q
154.         );\" Z) u4 J1 ?4 U5 ^5 J  l6 y
     
155.         break;2 I7 P; [) m! M$ h3 i- X, Q\" E8 M
     
156.       case "Meta":
     + z5 S* P- G) n\" u; U% t+ e
157.         width = 50;  z- H* c3 `. n) |
     
158.         button = interactive.button(. y- J8 q! f' ^2 W! `) {- R- P/ c
     
159.           0,
     $ H2 @) R4 j7 U
160.           0,
     % x/ q2 v# c8 A2 l9 I7 Z
161.           keycodes[key] != undefined ? keycodes[key].Symbol : key9 B% h8 i& ]! r  ~  o* w
     
162.         );
     % l' @2 U6 v  T* \
163.         break;7 |3 H. m5 U4 M, A3 R- P9 m5 L/ D
     
164.       default:
     7 s+ T) t8 Y' ]* a2 V; j
165.         button = interactive.button(  W; I% u  G2 \: [$ |/ T; t$ \
     
166.           0,
     $ O4 F$ b\" g+ _$ i. |
167.           0,
     & ^( P4 h) ~' _7 v% ^7 a! E
168.           keycodes[key] != undefined ? keycodes[key].Symbol : key
     4 b# R0 ~) Y. o3 I  g4 J9 g  r
169.         );! F# ~  e# y; J4 Q' `$ V( _: U
     
170.         if (keycodes[key] != undefined) {
     % E0 }- \' S+ P# c; a
171.           if (keycodes[key].Shift != "") {( z. w% j) Q& |7 y) q, q
     
172.             button.addDependency(shift, capslock);
     : F' {& }' }  r
173.             button.update = () => {5 S+ R+ l6 h8 Z1 a
     
174.               if (shift.active || capslock.active) {
     1 O8 P: t3 |6 ~$ c! [% o, V\" M: d& O
175.                 button.label.contents = keycodes[key].Shift;+ ^$ d9 c$ X% F' d3 _# f
     
176.               } else {
     2 J* `& i0 m! ~
177.                 button.label.contents = keycodes[key].Symbol;( o5 E- e9 S1 v1 P. o
     
178.               }5 i4 U4 p3 P# C% V2 J\" l
     
179.             };! D\" p) }7 I2 p+ u( _
     
180.           }) w' U1 J8 x! U3 Y* I\" d
     
181.         }
     ; M9 h' f$ Z5 h+ T9 U
182.     }1 J/ M+ r: L  ]9 W' ^! m8 ]
     
183.     button.x = x;' |$ e6 G+ L2 s; O0 E: e
     
184.     button.y = 64 + row * (height + margin);
     / y) ]! I  Z3 F  q% R; C  f2 x
185.     if (button.box.width < width) {- V) o9 [8 _6 @/ Q: z0 a$ c9 v
     
186.       button.box.width = width;
     $ J) H5 m5 v+ l7 x0 A! B8 z7 c$ m$ B
187.     }  p8 o$ M% z' q0 O$ e$ I' M
     
188.     let bbox = button.root.getBBox();
     * d2 f2 }: X$ j$ L/ C$ p- y
189.     x += bbox.width + margin;
     0 ?, T$ \( ^( H; h( v* J9 }/ [
190.     buttons.push(button);
       J/ v/ U\" H2 D
191.     prev = button;$ u& U8 O& H  f' ]9 G9 }
     
192.     buttonMap.set(key, button);
     ( a7 D( n! d5 n4 ~1 Z/ t9 d
193.     if (key === "ArrowUp") {
     , s8 o\" l' u4 k- E\" C
194.       button.box.height = 16;
     2 J& G, P; @/ e2 y* N# s. B+ {
195.       button.label.root.style.display = "none";
     ' t( ?( h) `% m8 k. d+ t
196.     } else if (key === "ArrowDown") {3 c% w2 O6 G3 o  w4 B& {+ e  h
     
197.       button.box.height = 16;( i6 a$ D0 ^7 G+ e2 V( L5 Q
     
198.       button.x -= 32 + margin;
     ( E/ V3 P5 b\" w1 X: X$ F  P
199.       button.y += 16;5 H( E) [4 [1 Q
     
200.       button.label.root.style.display = "none";! s2 c5 k! a\" a% f\" ~# z/ a5 k
     
201.       x -= bbox.width + margin;
     ( D7 c- ^- _0 ~  x7 o  C
202.     }$ i* j! e! I- P. T# l( ^, F
     
203.   }: ~  w# O& q0 Y/ [% j
     
204.   let right = prev.x;
     ) [- o$ q4 w) j5 W5 d2 n$ ^8 k
205.   if (right < 630) {
     * G% M( R2 v& V9 `* Y; j
206.     prev.box.width = 630 - right;
     $ r) q) d! M/ c5 F2 H6 P6 P
207.   }
     8 w, f+ Y. J* ^8 Q5 J
208. }' z\" [  H: o  O, i+ ~: o
     
209. // console.log(keycodes["0"], shift, capslock);
     9 \\" R$ M* N' O* V, s' M
210. let active = [];4 G; n* O; D( v
     
211. window.onkeydown = function (event) {
     0 Q4 Q  s% G# o! r. L0 L5 V
212.   for (let i = 0; i < buttons.length; i++) {
     % I1 u! _$ G# q4 g& m
213.     let button = buttons[i];
     4 [  Y. h7 K3 T/ Q% s0 ~
214.     if (
     0 L- p8 V2 k7 p& r$ e1 v: Z
215.       button.label.contents === event.key ||, |: X& \4 x1 O\" J0 ]
     
216.       (keycodes[event.key] != undefined &&, m  m2 n/ ^! x# C. s' U
     
217.         button.label.contents === keycodes[event.key].Symbol)2 p1 {4 a' @# W$ X0 @+ f% X. y1 w
     
218.     ) {
     / x) |3 d! ^$ [4 n2 i
219.       button.box.style.fill = "#f8f8f8";0 n( ^( [6 r0 M9 D; ?+ Q
     
220.       button.label.style.fill = "#404040";
     4 `) g( J* ^0 ?# e
221.       button.active = true;% b; e4 S2 V7 x# D' c0 G' S
     
222.       active.push(button);
     ; i, k% E& a+ n7 k& f7 N
223.     }8 x9 s/ x* P, r4 M) k) }6 m
     
224.   }
     + C0 @  J* C; V) K. H2 J
225.   buffer += `'${event.key}',`;; f, }5 q) H0 O/ \
     
226. };# Z. h0 o8 E4 X8 E9 \1 e* j
     
227. window.onkeyup = function (event) {
     7 _( ^- _% N3 e1 d
228.   let newActive = [];% G( r  E- d3 l! i. ?( L- t: u
     
229.   for (let button of active) {
     5 ?. J  G( z# ?* I
230.     if (
     6 A  ^# j! A8 z4 f7 r& W/ q! r
231.       button.label.contents === event.key ||
     ! z2 e) F- f$ H' S8 I3 {% s
232.       (keycodes[event.key] != undefined &&6 o: J0 G. g( v$ T# P
     
233.         button.label.contents === keycodes[event.key].Symbol)
     ( p3 ]3 ?& g( a( F2 {! H  Z
234.     ) {
     & V\" B& s# Q, f  E
235.       button.box.style.fill = "";$ M- d6 Z\" n7 ]6 h; N
     
236.       button.label.style.fill = "";( B% ?: Q0 ^) ^5 l! C/ b) g! ^1 p$ z
     
237.       button.active = false;
     ! t9 N* u. E# ~) t2 _& R
238.     } else {0 [. w\" O  D: b3 \6 Z9 h- b/ R& V8 d
     
239.       newActive.push(button);, d( I+ Z: x* P, m
     
240.     }
     / O6 s* |% L, e( \2 S
241.   }
     , i7 K( C6 j! h* b' X
242.   active = newActive;2 @8 Y: F4 L- j; n
     
243. };: J\" W% m9 J4 x+ g# a
     
244. let bbox = interactive.input.root.getBBox();9 \& g5 |: @8 X, e% j2 {
     
245. interactive.setViewBox(
     , ]6 l9 R2 x& \# c\" H/ v' r
246.   bbox.x - margin,
     / _. u4 {\" C, f. [* G
247.   bbox.y,
     - C\" F9 J4 ?, p: I1 P9 L5 y
248.   bbox.width + 2 * margin,9 V+ f' T7 i( h) p3 ?& _5 l. U
     
249.   bbox.height# k& q) W8 R5 H( C
     
250. );( B4 P+ J. u8 ?3 ^! P6 M8 C
     
251. //# sourceMappingURL=keyboard.js.map
     3 _. D% O# U# {6 R
252. 8 l0 M/ v( f/ q\" M7 X
     

复制代码

3 ]1 H4 x8 U# R8 v7 S+ j# y