使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

发表于 2024-4-27 10:42 |只看该作者 |倒序浏览

|招呼Ta 关注Ta

<!DOCTYPE html>
9 i/ f; L- s+ _' w$ b. |
<html lang="en">
: P; X\" N' i+ L+ M5 s+ [6 |2 I0 O. z
<head>
m+ C$ V+ n0 W
<meta charset="UTF-8">
) s8 P3 D+ M! |1 _% a
<meta http-equiv="X-UA-Compatible" content="IE=edge">8 u1 _. I( z$ C# X1 m+ N
<meta name="viewport" content="width=device-width, initial-scale=1.0">
' ^# r: }$ w3 O+ a
<link rel="stylesheet" >
\" j; Q' z K: d\" O. T3 U\" x
<title>vector examples Keyboard</title>% M+ k7 J) W9 n& M3 h* X/ q2 e
</head>' }0 O1 j6 u2 C8 M# c
<body>
# t5 [: b+ B% d1 }' V
<div id="keyboard"></div>. U! d2 z7 L& o. a5 U' }
0 C! y$ b3 N$ M# J, P) r, i
<script type="module" src="./temp.js"></script>0 y8 {0 p! \# ]: j. N
</body>
$ v' f, Y2 o: r/ Y+ m
</html>8 h% U' \9 G* v! ~' R1 O, M

复制代码

import Interactive from "https://vectorjs.org/interactive.js";$ f: F6 e1 Q9 C) E7 s# p\" P/ I6 J; z
console.log("Interactive", Interactive);
$ a8 K& ~6 M7 c& g/ R1 f

复制代码

/**1 e U) P1 W1 H @
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard' F1 ~+ u3 k, s! D# t- k: ?
* @description This interactive demonstrates how key board input can be used to add interactivity.1 W+ r0 o4 w/ r- l# v) x
* @tags [input]0 ?7 X* j\" r. o# ?+ K5 s6 p1 s4 i( R
*/ E0 a, a9 J4 u1 r- g9 w
// import { Interactive, getScriptName } from "../../index.js";
+ S1 O' h' }) X
// let interactive = new Interactive(getScriptName());
7 ~! F2 s\" W6 |5 l5 R. B- _
import Interactive from "https://vectorjs.org/interactive.js";7 n) Y4 D O/ {) r5 x
let interactive = new Interactive("keyboard");0 Z$ Q/ s3 _7 e7 O! J+ h- n
interactive.width = 768;5 X% o1 T9 `* B( ?) K
interactive.height = 300;
3 w3 I. p4 m( u- R# _
interactive.border = true;
- d- W\" {5 ~* z1 L
let buffer = "";
. q* x. O J- G$ s5 q
let keys = [
$ r- ^6 Q\" K\" h/ _. j
[- O9 D\" _# Y, x. r) h
"`",
; P+ @) ~# p1 \, ?2 F, p& Q
"1",( {7 k1 ?# e# ~9 v% Y, ]% H% X! z2 s
"2",
' Q6 i3 f4 P% N1 |7 C9 y% g
"3",
' g# W( W4 T% }: s% w0 O
"4",! M4 I/ b) R% j* A8 k
"5",* x h: X) a0 F- e( f3 H
"6",
2 l& A- L6 P# m9 G% {+ a- M3 W: b
"7",
. u6 g/ M Z, Z5 |
"8",
) \2 f3 X: @6 i/ O8 F' G0 U; S
"9",
' @* H9 T5 Y4 z
"0",
1 L k6 ~2 ^% `% e( S
"-",
+ _6 F4 I6 W, @( J. E
"=",
5 j5 G& I$ h! a
"Backspace",- t: o8 G# L# o4 I! d
],
+ C9 F, p3 R9 L$ U0 H. U z
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],, }0 k\" m$ o! v6 L. v
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
0 B/ G8 ~ i% S) ]
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
3 U* O) ^4 ` z
[
- h) ], V1 F6 u/ [$ n) S, M
"fn",' k X* R# a, g2 g
"Control",- n% \) {' I9 v' {
"Alt",
4 ~9 H. v$ N2 h\" P\" K p
"Meta",2 m7 E7 ]3 H% o: k2 w
" ",
# j; Q; F4 Z; r\" ` ^ G* H7 |
"Meta",
! W9 Y6 ]; p! R% |
"Alt",# p+ x9 `3 A2 X7 J$ k8 p) g- ?/ \. b% j
"ArrowLeft",
9 E' \* M9 G2 F5 J% x
"ArrowUp",. M' \0 p. a1 b; J9 e
"ArrowDown",
$ B: w\" s% X# J, u5 |& p
"ArrowRight",
* a; Z( N8 X' x$ X3 f) x* s7 ^' S
],
) e0 V, W( @- U3 G) T7 _% \
];2 E* I% H3 n4 F5 y8 V+ V0 D; a
let buttons = [];\" @! W, f( M4 g' X
let keycodes = {8 L+ B) A: ?. N5 W! Z% y4 ?/ g
0: { Symbol: 0, Shift: ")" },
0 a( E! [, m- w, R3 Z
1: { Symbol: 1, Shift: "!" },4 S7 p: t( o( ?, [) d! ]
2: { Symbol: 2, Shift: "@" },
0 I0 @# ]1 H9 C9 G5 e& @
3: { Symbol: 3, Shift: "#" },/ c# e2 @; l7 y0 ^/ O* }
4: { Symbol: 4, Shift: "$" },
# b. N6 w\" P\" Y, l2 ~+ C
5: { Symbol: 5, Shift: "%" },
$ H% |, Z\" R3 X1 ^! b\" L9 S
6: { Symbol: 6, Shift: "^" },2 I* m( C4 k) o+ \# c
7: { Symbol: 7, Shift: "&" },
9 [, C, W) a, F: U
8: { Symbol: 8, Shift: "*" },* U9 B6 x- E( \- b; T
9: { Symbol: 9, Shift: "(" },
; y; n3 w; B: O2 ~
a: { Symbol: "a", Shift: "A" },
0 B+ b# B2 L) b% t9 O
b: { Symbol: "b", Shift: "B" },
& [$ C, T& p# t( I8 o
c: { Symbol: "c", Shift: "C" },, S! t, B6 l* e) d. e: V. W
d: { Symbol: "d", Shift: "D" },) ^+ d: v6 F: k1 P5 n$ m, Q
e: { Symbol: "e", Shift: "E" },! l7 d\" B4 u4 k! I4 ]4 V
f: { Symbol: "f", Shift: "F" },
4 I; V( c/ ]) R# _% b
g: { Symbol: "g", Shift: "G" },
+ g4 Y- p6 z) G+ L/ ~
h: { Symbol: "h", Shift: "H" }, s/ M0 p- ?& P
i: { Symbol: "i", Shift: "I" },! w+ E: p/ g2 S( F0 c/ D' } r9 V
j: { Symbol: "j", Shift: "J" },; O7 {* T; Q2 X# O
k: { Symbol: "k", Shift: "K" },
' W& c; X3 d. K. X1 U9 j
l: { Symbol: "l", Shift: "L" },
4 }+ e, l2 @) R1 g- e
m: { Symbol: "m", Shift: "M" },
) o. i% ^' c3 O5 K1 W3 p# U. J
n: { Symbol: "n", Shift: "N" },
: h0 J# }* w0 R6 H0 A
o: { Symbol: "o", Shift: "O" },* E1 U7 P* k1 x m9 p\" z; z, E! ^
p: { Symbol: "p", Shift: "P" },
0 ]7 s: I3 M# g7 }& G- ]' w0 p* x
q: { Symbol: "q", Shift: "Q" },
; Z) L! Z- N. l& ]$ V+ r- u) T- ~
r: { Symbol: "r", Shift: "R" },
8 Q1 H' H& v8 r7 a+ A\" p* n
s: { Symbol: "s", Shift: "S" },5 K( O; V/ w+ Y
t: { Symbol: "t", Shift: "T" },
\" R! m\" l: {9 I* o5 j5 p
u: { Symbol: "u", Shift: "U" },1 \. u& q ^) K
v: { Symbol: "v", Shift: "V" },
9 u3 D0 o% p1 J1 @
w: { Symbol: "w", Shift: "W" },' b% K4 Y5 j7 I; `8 j* t, R
x: { Symbol: "x", Shift: "X" },
& c4 d7 v) a5 i Z$ h& V- i3 W
y: { Symbol: "y", Shift: "Y" },
\" [5 [0 j( y) F) z% U; r\" B
z: { Symbol: "z", Shift: "Z" },$ v# C& n' G$ J8 v) g d
"`": { Symbol: "`", Shift: "~" },8 d9 `& j3 E7 i' p' `! Q; r
"-": { Symbol: "-", Shift: "_" },
/ M7 z, K2 t1 P* \2 X
"=": { Symbol: "=", Shift: "+" },& ~2 [0 Y7 u+ d' T( l. |
";": { Symbol: ";", Shift: ":" },4 r' A- j2 E5 o# ^. @! e
"'": { Symbol: "'", Shift: '"' },
' L6 o9 L1 @! v: D
"[": { Symbol: "[", Shift: "{" },8 W2 [- z( [% s/ D; [
"]": { Symbol: "]", Shift: "}" },
"\\": { Symbol: "\\", Shift: "|" },
4 g8 u# A7 j& z
",": { Symbol: ",", Shift: "<" },
4 i3 q. h; l( k8 l) f( k% s( `
".": { Symbol: ".", Shift: ">" },
U# G3 X3 D+ U4 Y- o8 A) i
"/": { Symbol: "/", Shift: "?" },0 z! j$ [) ~& y2 }4 ]
Backspace: { Symbol: "⌫", Shift: "" },2 N$ p6 Z! S# V
tab: { Symbol: " ", Shift: "" },- h) h7 F\" E\" ?3 r( |! B4 r) m
CapsLock: { Symbol: "⇪", Shift: "" },' a! b2 Z4 b$ ?' H Q* M6 L
Shift: { Symbol: "⇧", Shift: "" },
`6 ?) a5 a\" R
Enter: { Symbol: "⏎", Shift: "" },
5 o% s5 M( C! f1 q
Control: { Symbol: "⌃", Shift: "" },
% n& C; o$ s. ~6 I0 ^5 |8 i8 p
Alt: { Symbol: "Alt", Shift: "" },( S. T2 @+ P) e% p3 d% F
Meta: { Symbol: "⌘", Shift: "" },* R\" v/ H m0 e- {$ _0 Q# h/ x* w6 o: Q\" U
ArrowLeft: { Symbol: "←", Shift: "" },
: g! F' M4 W, t
ArrowUp: { Symbol: "↑", Shift: "" },7 ~\" R9 C6 ] T
ArrowDown: { Symbol: "↓", Shift: "" },
9 X5 u( ~: G7 G% F
ArrowRight: { Symbol: "→", Shift: "" },, }) z, w2 f+ l
" ": { Symbol: " ", Shift: "" },$ u- e8 A r2 w7 e7 P
};
^8 N/ R9 s4 `! ]) Z7 M
let buttonMap = new Map();\" I! D8 D, k# d
let height = 32;; @, H, b$ y( u$ V8 e) p& C2 }/ W
let margin = 8;
) F* ?$ {\" I1 `! ]
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
* U) ^4 I# U. y9 i( }* f, E; J' W
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);: z) Q; i/ s9 Z' i' u( @
for (let row = 0; row < keys.length; row++) {
1 ?, \0 G' [ n, i5 U
let x = 32;/ e; B! `# W$ z# [% a; n+ M
let prev;
; C( c) k# T+ J$ f) M6 e
for (let i = 0; i < keys[row].length; i++) {
7 i- d, W/ g- k: W$ j& a\" p
let key = keys[row][i];
- K2 ~8 p\" w/ F, s! Q/ {. t
let width = 32;
( G$ ?! l2 W/ \8 ?5 q
let button;, C5 R0 Z5 I: x6 m% d V. u9 E6 S
switch (key) {6 `* z: i; i\" C1 f
case "CapsLock":7 |3 m: v) y9 d
button = capslock;
' N3 s2 T$ d2 X9 k\" y\" o9 [
width = 64;: e$ s, J% x( m1 T1 ~$ H
break;
. u$ x! @% w/ D6 B0 P
case "Shift":
' G/ S% q$ D6 v# t6 i5 ~
if (shift.x === 0) {) N& X\" T1 S) Q! `2 B' E
button = shift;
: i$ I x8 V. r9 l
} else {
# J0 ~1 j5 I' E1 D, ^
button = interactive.button(4 ]/ e; p) m/ N5 |
0,
* h* i4 |& D% q8 I0 D4 z
0,. B' K) X+ x4 j* `( w: ~
keycodes[key] != undefined ? keycodes[key].Symbol : key
/ ?# `( K6 d6 \; X p+ n5 F
);/ M% V: P: P' ], f. w8 b
}
! E9 v9 r1 |$ ?/ j) V0 a7 x
width = 90;; ]. d y! F% _, r\" k1 |
break;. Q: L/ E/ Q6 ^0 T- s
case "tab":
+ G7 o\" A. F( u
width = 50;
button = interactive.button(
6 k0 ~) Y' m) L/ p
0,+ E6 I3 r$ x0 {
0,
, |0 H8 }( @9 i% \6 ]5 q! u
keycodes[key] != undefined ? keycodes[key].Symbol : key D. E s8 b5 f7 ]1 e' x- H
);
. S/ |1 {7 p) h6 f+ p
break;
; O6 W% Y\" A7 @% b! v- k6 a5 c5 ]
case " ":
; b ~' h4 K/ g! ~! X\" j; w7 ]
width = 176;5 b( R. u$ y1 M: `/ U1 B
button = interactive.button(
) K9 D' z, E3 W) H4 k5 {# |( Q7 T
0,
; Z- A0 B5 f( h- D
0,/ d+ p9 K9 Z2 a1 R
keycodes[key] != undefined ? keycodes[key].Symbol : key
& g/ V1 H7 U+ ^! f! b
);0 _9 U& l/ X/ E: r5 b6 Q# {$ ]
break;
& Q+ s8 W8 E7 X( K0 [
case "Meta":& I. ~/ `) C9 J8 V& s4 j
width = 50; d- n( p9 J( ?7 B' o
button = interactive.button(% V+ w2 R7 S O5 h
0,8 {: ?. w. ]5 p+ o' y
0,
8 R7 K0 K$ x6 u* ^; h! P
keycodes[key] != undefined ? keycodes[key].Symbol : key4 T- n( X' _* U5 J0 m5 u8 {
);
% Y4 g6 W0 U4 P# C7 f% d1 I9 ^
break;5 j2 D: j5 Q1 x; u
default:, W! n! | l! ?. C5 c x
button = interactive.button(
( h+ B9 y4 }9 s/ w
0,
& r4 f& H! ~6 h% Z- [% ~
0,; |\" n: K' Q8 t$ K- Q: W
keycodes[key] != undefined ? keycodes[key].Symbol : key
/ G5 D3 L0 h4 T5 G: B6 Y* r! f! b2 @
);
2 u7 Y8 p6 Y/ P) _. u
if (keycodes[key] != undefined) {) m: k) i( E; [, j! K: Q
if (keycodes[key].Shift != "") {' t6 ^9 w# L7 k5 q' H. E
button.addDependency(shift, capslock);
! P5 c5 u+ W) b5 T: I4 p
button.update = () => {/ r% W' j0 {3 w& h+ f/ Z% U
if (shift.active || capslock.active) {. m7 g7 d% _ w( P4 {+ d: P$ d
button.label.contents = keycodes[key].Shift;$ V2 ^\" T* O5 ~. D
} else {6 Y2 K; |: {\" i/ J
button.label.contents = keycodes[key].Symbol;
# k) a& V4 \4 z Q) R3 V
}
) ]; R5 V/ u# W |
};
\" f' n% h/ u8 i2 ~
}\" D6 L; O& _\" t4 s) o) o+ a
}
- q9 w' K4 [2 P) o3 g- \; Q
}
) s/ t }( S4 R
button.x = x;
) i4 J/ H, y, `: g: c3 [0 |: D& s
button.y = 64 + row * (height + margin);
, `+ p8 M/ m! K
if (button.box.width < width) {
\" d8 \5 Y* z8 P8 c1 W K! g
button.box.width = width;6 q; E. `2 r \: h
}
* o9 o4 R: w* m2 ?\" e8 D5 Y
let bbox = button.root.getBBox();
6 M6 o3 @; S: p/ a
x += bbox.width + margin;
. L* X\" s$ Y) p$ B* }) K
buttons.push(button);
3 N$ x9 }\" ~& A e d! h8 ^
prev = button;
$ j4 G! T- K9 d/ {
buttonMap.set(key, button);- B6 \; v. r) R& z3 S8 y6 g* z1 O
if (key === "ArrowUp") {
' ]. ?9 H5 G5 S7 @4 p8 x0 R
button.box.height = 16;$ d) K, x7 D W8 S$ l
button.label.root.style.display = "none";
* L# R3 \- M( z5 q
} else if (key === "ArrowDown") {! f% ]/ @ \! T2 i9 m
button.box.height = 16;9 q, b1 y5 q7 A
button.x -= 32 + margin;% C1 D5 l; Q- s' W! ~) T
button.y += 16;0 x9 [6 i+ E& s* j- B
button.label.root.style.display = "none";
4 G6 I, n1 U8 R\" M% ~
x -= bbox.width + margin;9 d: O) Y) l3 ^6 b4 c
}( X6 Z3 _/ X, X\" z3 Z1 u
}
9 h6 Q M) r( P* `! `5 q' N
let right = prev.x;2 b B\" L' J6 |' X
if (right < 630) {
, a1 H* q5 O; T$ b$ e2 c
prev.box.width = 630 - right;
8 U6 ^7 s\" U7 m
}6 W; N# W8 u7 H; m7 C
}
F( ]# G0 {8 W0 C\" g6 i2 ?
// console.log(keycodes["0"], shift, capslock);
, x$ f8 R* v: E5 c' L
let active = [];. P- F+ J0 y% E& M+ U
window.onkeydown = function (event) {
% Y! m\" \ v6 K# J) b
for (let i = 0; i < buttons.length; i++) {
* w9 k6 u9 X* x\" ^; Z
let button = buttons[i];
. R! z! [9 _9 N& S
if (0 K7 {2 Z* D) w2 E1 |) w* N
button.label.contents === event.key ||
\" H* q\" d' v% p# w/ k. m$ X# Q
(keycodes[event.key] != undefined &&& o! a6 R' p4 C6 G
button.label.contents === keycodes[event.key].Symbol)$ S\" T\" q\" v, V( ~
) {) f8 s( j+ R7 @& ^0 d* B
button.box.style.fill = "#f8f8f8";! Y4 b2 v; g2 a9 s0 G1 _- f
button.label.style.fill = "#404040";5 c! w* q' n+ T8 N\" a- S; w
button.active = true;
5 p9 ~/ Y! C- T/ G\" D
active.push(button);
5 T- z2 _! s( ]. o
}2 x A4 H4 D2 r/ y% j\" a9 I& u0 T
}# r# J2 M4 e2 d; k3 a
buffer += `'${event.key}',`;
; \9 m+ z* J8 ^' g5 o* Z% z
};
' f( ~' R- O+ v
window.onkeyup = function (event) {\" h$ n# M* c9 G1 N& F, y0 m! H
let newActive = [];
+ L' D e- o% p$ a2 ~% ?- g
for (let button of active) {
; |6 o$ w\" r% m7 T7 k n
if (
; J I( A7 F9 {8 B
button.label.contents === event.key ||
; W- F- m2 C* g! @1 j& v
(keycodes[event.key] != undefined &&
4 _1 a) f ~* o$ N! H
button.label.contents === keycodes[event.key].Symbol)+ m* U- n9 N- \5 ^\" P! \( i! h
) {
4 \8 O4 I {+ [; u) {' o# v: @
button.box.style.fill = "";
, Q# {* u$ T+ g% A6 ^
button.label.style.fill = "";4 B. x4 C; b! a4 A
button.active = false;
1 v1 Q v, e- s6 Z# _# ?. H
} else {7 `, m0 w0 G4 r\" |
newActive.push(button);
2 n+ B9 ~\" p+ e z+ m- I! m9 U
}
0 ~. j8 H, ]7 h/ l' I0 J( Z9 P
}3 A9 u& c, f5 J0 F ~6 E, p
active = newActive;3 k\" u\" S e3 J- G) m- N
};+ v& R l8 Y) b0 q/ i1 O; s
let bbox = interactive.input.root.getBBox();
s( v+ }: ~5 h$ r' {1 c
interactive.setViewBox(
9 P( k7 O+ w1 n! D/ I% b( Q
bbox.x - margin,8 I9 F- n\" R. d) o
bbox.y,
1 N- V5 n/ i( f7 C
bbox.width + 2 * margin,
& t, ^\" C( i\" M5 U. C# D
bbox.height
) q' O( C8 R: d, H7 a1 \( }
);
3 w, ]( l; @2 \, ]\" [& o
//# sourceMappingURL=keyboard.js.map4 ^7 t! o6 S$ Z$ f3 M
3 r7 i8 i0 l/ u+ K- k0 t