使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

796 主题	1 听众	1985 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>4 c( V _) L! B- ?3 I1 B
<html lang="en">
$ E: r\" W& r! O' N) i- G, ]$ Y! `6 T
<head>/ I0 ~2 J W6 z) U! ?- }
<meta charset="UTF-8">6 k2 Q y' U+ V: U- b2 C3 d9 F
<meta http-equiv="X-UA-Compatible" content="IE=edge">1 V& N+ i s* U1 g
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4 J5 T\" E4 e+ K. K
<link rel="stylesheet" >
7 @' Y\" x4 a2 D+ z
<title>vector examples Keyboard</title>
$ o( M9 N$ d; H: M* x4 y/ c
</head>
% H! m4 S8 j0 G% h. }$ w7 C
<body>
: R- ~7 f/ w, P) b2 O
<div id="keyboard"></div>% b' {1 x* f. D2 T3 m
; D7 _0 s\" y0 }0 N7 t/ c8 p% |4 E
<script type="module" src="./temp.js"></script>
' E\" M\" a4 D) L% |
</body>
) p7 K/ O9 k% W4 A3 A8 s2 b
</html>
\# c+ _& z, r8 m5 S& d

复制代码

import Interactive from "https://vectorjs.org/interactive.js";( o1 Q: i$ U9 s
console.log("Interactive", Interactive);
- h$ ?2 O, p7 S2 k

复制代码

/**0 p' y- x3 `) l+ _3 c* u+ }. h7 D
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard6 |/ `6 I R& |
* @description This interactive demonstrates how key board input can be used to add interactivity.2 [7 O! h! _+ C5 `( c$ b( x& |3 m
* @tags [input]1 M# o/ J9 M. \: ]
*/; {1 P1 c Y0 E) N2 X6 X
// import { Interactive, getScriptName } from "../../index.js";
; k3 Y* {; X4 s* S c4 X7 M. ^
// let interactive = new Interactive(getScriptName());\" O1 y5 C, D7 o
import Interactive from "https://vectorjs.org/interactive.js";
7 w: R) m! ^. y
let interactive = new Interactive("keyboard");
. {5 d7 T\" h% B9 S
interactive.width = 768;
) x9 p3 u3 L2 ?! ^2 I) Z& E4 S
interactive.height = 300;
* y; n6 s\" Q6 g9 l/ a2 F
interactive.border = true;: n. Y: \0 u- ?7 `+ t
let buffer = "";) Y; ^, l: G! Y' l8 r% F% X# c
let keys = [) T( U2 w! h+ F: @' h* b
[& ]7 Y8 F& f7 e4 U$ `
"`",$ I\" ^1 Q9 _& D* |
"1",# \4 G: L# q1 ], u
"2",7 @( k! Y, |& D( B9 p! |6 z R
"3",2 c* J* |# B# H, J* h. C) i$ |8 `
"4",( ^3 q* v& D t5 q0 ^, u% B+ x8 K
"5", \+ C$ h% M f\" l6 E
"6", G6 _) I! O! k! `: z: M; B% F
"7",) ?% D% F+ R+ |, r; H# r
"8",8 V/ v( U7 H9 \% s& Q% ]
"9",6 V$ N4 n\" ^+ A( C3 q [
"0",; F% s, L9 Z# E3 R1 A, k: R6 }
"-",/ E& @1 m4 u8 o+ _
"=",
& l# ~\" A4 T% y7 x3 P4 i
"Backspace",7 T, M8 }' ~6 Q* D3 Z, S* W
],
( g4 z. E1 j$ z- m. @
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],% E: t5 _6 R3 q) o$ a7 V
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
) _ O. l\" `: y/ |. ]\" m ]
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"], z% N; h V- x
[
1 `! R! o- B R1 p) |7 E
"fn",$ `, S7 K( S7 i, Y+ Q) Z6 ?
"Control",
9 O( c( R5 P p
"Alt",
9 J4 Z3 V' p$ D8 @8 l* ^2 e1 L
"Meta",! I, }# X/ l( I' ^8 E5 V4 g9 m
" ",
* y! E% O2 p, [* { x% ]
"Meta",
4 I; I+ C\" E8 ?\" X- k5 F
"Alt",1 H7 P; S: [' `% v+ f' |
"ArrowLeft",
"ArrowUp",- | r% l) \& j7 S4 f
"ArrowDown",
& S H/ K. \- ] v, G5 o
"ArrowRight",5 H8 Q( u) [. J. i
],5 T- Z\" s9 s6 l1 [1 P! z! \3 I
];
! b( a4 [1 M/ d9 l- ?/ B
let buttons = [];& Z9 S7 B& n2 b$ p% z
let keycodes = {
0 S# y$ O3 c, j1 K) \
0: { Symbol: 0, Shift: ")" },
, n& }, W+ q: n
1: { Symbol: 1, Shift: "!" },9 T4 ~5 }/ Q( x& R
2: { Symbol: 2, Shift: "@" },
9 d: o9 }: d; K0 \9 F0 ^
3: { Symbol: 3, Shift: "#" },- b/ e' A. A$ N+ O( y* _
4: { Symbol: 4, Shift: "$" },
0 F4 v1 Z# ]# l% ~! u/ b s/ r: b3 a
5: { Symbol: 5, Shift: "%" },
2 B/ B' z6 `) s) L( l; c1 p$ T
6: { Symbol: 6, Shift: "^" },& L3 x\" m3 [9 m0 J9 h! R+ b1 k
7: { Symbol: 7, Shift: "&" },, P1 l0 |& t4 v0 B F
8: { Symbol: 8, Shift: "*" },6 B) R) y$ j\" n5 p, {\" }4 D
9: { Symbol: 9, Shift: "(" },
- q9 \\" y+ ]7 x' K
a: { Symbol: "a", Shift: "A" },
4 [* s5 v; C# L+ u\" h6 x/ m
b: { Symbol: "b", Shift: "B" },9 m7 x5 f' g/ D# R9 H. i/ y
c: { Symbol: "c", Shift: "C" },5 |0 h: f9 p; t
d: { Symbol: "d", Shift: "D" },: d$ E0 X& f u8 Y- r; u
e: { Symbol: "e", Shift: "E" },2 ^( x0 ^: K( H0 Q+ H% W. v
f: { Symbol: "f", Shift: "F" },, ^& _7 K& z1 M3 T
g: { Symbol: "g", Shift: "G" },
- m6 y8 _( u# }* n6 D9 s& ]
h: { Symbol: "h", Shift: "H" },
+ D7 W3 a! _ L2 N\" q* p f
i: { Symbol: "i", Shift: "I" },1 {! C/ q9 D9 X k9 G0 ?8 w& g
j: { Symbol: "j", Shift: "J" },5 M& z5 r9 }- B3 Q
k: { Symbol: "k", Shift: "K" },
' p0 U( a$ X4 ~\" R/ Q5 E: ?0 X
l: { Symbol: "l", Shift: "L" },
; |7 B9 e4 |& u( k& O
m: { Symbol: "m", Shift: "M" },. x$ S: a! \) J- v$ {; H; Q! n+ P' V
n: { Symbol: "n", Shift: "N" },# y3 Y# c x6 t: a: I9 W+ H, \: ^
o: { Symbol: "o", Shift: "O" },# P, L6 f. W6 w1 v
p: { Symbol: "p", Shift: "P" },9 j2 [ \. F( N- q9 m
q: { Symbol: "q", Shift: "Q" },# M, c7 v3 [\" J* B4 j
r: { Symbol: "r", Shift: "R" },% n7 j0 O0 ?% r7 r
s: { Symbol: "s", Shift: "S" },
+ I, U- R- |. C, z8 F, S) y$ v
t: { Symbol: "t", Shift: "T" },) O5 O: M# ?4 ~7 q: r' X
u: { Symbol: "u", Shift: "U" },) b# ^& T2 q0 U: x t
v: { Symbol: "v", Shift: "V" },
9 t8 {\" m. b, ]
w: { Symbol: "w", Shift: "W" },
7 O3 f. `: Y7 o: Z. k+ w7 B
x: { Symbol: "x", Shift: "X" },
. z( m3 Y6 M. p) `
y: { Symbol: "y", Shift: "Y" },5 M6 s! P6 d; ^. l$ B3 E
z: { Symbol: "z", Shift: "Z" },
7 w$ Z/ H( g/ D4 T+ X- ]% @
"`": { Symbol: "`", Shift: "~" },
: b( x V6 \4 o1 ?; s3 x) L* g
"-": { Symbol: "-", Shift: "_" },* `; b4 b3 h4 A5 M# m
"=": { Symbol: "=", Shift: "+" },
+ E, s8 E\" O; `& e ?
";": { Symbol: ";", Shift: ":" },
3 x9 w7 Y2 K2 [- H4 i
"'": { Symbol: "'", Shift: '"' },
9 L/ q _& g7 i/ f! n
"[": { Symbol: "[", Shift: "{" },
6 {2 |9 G$ D5 U* j
"]": { Symbol: "]", Shift: "}" },+ r5 U: a2 s# t
"\\": { Symbol: "\\", Shift: "|" },! |9 C, m( N9 Q. n# b4 q- B
",": { Symbol: ",", Shift: "<" },* G, s2 U, [- r% }+ v
".": { Symbol: ".", Shift: ">" },+ B2 Q1 i9 k/ d& {% c
"/": { Symbol: "/", Shift: "?" },
9 ~\" y% e6 o# }8 ]
Backspace: { Symbol: "⌫", Shift: "" },
/ X. W$ X$ W/ E0 s7 t
tab: { Symbol: " ", Shift: "" },8 ]3 c4 V7 }7 I
CapsLock: { Symbol: "⇪", Shift: "" },
\" ~& B4 `4 u( Q3 u1 \5 M: C
Shift: { Symbol: "⇧", Shift: "" },
' p, d- u. C+ s( I$ {1 P
Enter: { Symbol: "⏎", Shift: "" },$ @3 A! ~' M1 d: Y8 ]7 V4 v
Control: { Symbol: "⌃", Shift: "" },; W0 T2 Y0 [* n0 `) B1 G\" h
Alt: { Symbol: "Alt", Shift: "" },
H. ^' w& n3 s+ ]& c4 J\" N
Meta: { Symbol: "⌘", Shift: "" },9 Z: m5 B5 m+ \) }6 t5 u
ArrowLeft: { Symbol: "←", Shift: "" },$ \# a# ~ D8 S% \
ArrowUp: { Symbol: "↑", Shift: "" },
7 G( f; y2 F0 ]\" \
ArrowDown: { Symbol: "↓", Shift: "" },; v* b% W7 G2 h9 {
ArrowRight: { Symbol: "→", Shift: "" },2 b0 Q% P% ]; L' F; B; I
" ": { Symbol: " ", Shift: "" },
) t1 a4 V& x1 u* _& C' Q
};
\$ U9 O, F\" J& b
let buttonMap = new Map();
3 ^, w* K7 G4 a( W! L
let height = 32;
: h+ I/ P, b1 W% J1 X\" ^1 |
let margin = 8;
$ Y5 W: d% l; X6 ?( K& j3 l
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
1 u+ s\" Y\" q\" L1 T1 d0 T
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
* H7 v5 f- c' {8 R3 P
for (let row = 0; row < keys.length; row++) {0 [0 O Q8 }) `
let x = 32;
% i% M$ }, o+ X7 d* }6 s
let prev;
) e, `, Q# A5 `3 E- t' G$ Z2 x: _# O
for (let i = 0; i < keys[row].length; i++) {
5 k8 A% q$ O! Y( J
let key = keys[row][i];
( N6 c# t0 U% `4 _
let width = 32;
, V) m, S. L6 ]! q7 N
let button;2 p\" C# I% `% \4 v& `
switch (key) {+ Z( W$ `* h! d. m
case "CapsLock":8 Z$ Y. S+ m5 K4 `( I' u7 R
button = capslock;
7 g# z$ i& R\" ~1 [+ M
width = 64;! V6 _6 f! c8 s) A% f5 g
break;
6 |7 x: u8 T) ]- K, k
case "Shift":
- Z\" u% C2 k' v
if (shift.x === 0) {
6 k9 R: R# L# z
button = shift;9 a6 I# ]+ Q5 p/ D, n! ]: k& D6 R. V/ }
} else {
9 v\" O: j: u9 \
button = interactive.button(. `% F( {3 {! g* ?) x
0,
. Z0 c2 D1 N: j: Z- D+ _! N- c, n6 S
0,! P B, o2 j9 h9 T
keycodes[key] != undefined ? keycodes[key].Symbol : key
! q y9 C: O, J- L% M
);
% D6 b' r. D7 S6 ~. e
} x3 l% A7 Z2 v# B4 G
width = 90;
1 @* ^! \\" t; C! V0 m$ E\" g
break;
2 B7 T* r7 N2 G$ k# q7 K1 a7 V# r
case "tab":$ b3 h2 |/ x4 ~- h. d& h; Z& j
width = 50;
0 D, ?: u1 G3 S, m! n1 D: E2 t2 I
button = interactive.button(+ P2 O' {$ B5 f
0,
, W! Q5 ^+ a& a& } F6 f
0,
7 W1 P1 x( |; }
keycodes[key] != undefined ? keycodes[key].Symbol : key1 }8 A& w6 M6 T8 z% W3 ~8 P5 I
);
! i/ v6 F5 _3 c2 r$ v' s* f* N
break;4 Q: c4 H# M; d8 j0 \. t
case " ":2 d. n* j1 ^' n x. t
width = 176;- Y5 Z& B4 |6 `\" I4 y9 K, y2 r9 f
button = interactive.button(. ^4 T: A5 B$ N; c8 D
0,
\" `3 m- M7 ^, q4 t0 M9 K
0,
$ _- N+ [ x; V/ ^. L
keycodes[key] != undefined ? keycodes[key].Symbol : key, B5 P) L3 c% d ]2 m- V
);1 ]6 u2 H; D& s) @' {
break;
r0 |$ |6 m5 H* D, d+ s
case "Meta":& M4 O! x/ a0 `+ ?8 n
width = 50;
( E, B\" U; {; V
button = interactive.button(
5 w) w) S6 }3 [/ L; M5 c\" f
0,
9 Y' \& K1 ^2 e, U; Z
0,) Z5 F3 G7 q9 ~9 M\" ?; q
keycodes[key] != undefined ? keycodes[key].Symbol : key
J9 o# z\" b d M4 S! t) u
);
& u. h\" L% ^1 T7 n# v+ i$ f
break;
/ r2 R1 G- F. k) `
default:
9 {6 {9 }; o6 P
button = interactive.button(7 V4 u) ]) M, b2 q+ W
0,
. c. K0 Q5 p7 z' c4 m, e0 u% l/ B/ G6 g
0,
6 s) k7 r8 g* `4 G\" W3 p& d
keycodes[key] != undefined ? keycodes[key].Symbol : key
' o2 u Z- G( J9 Z+ e d\" O
);5 ]; _0 W, z1 h+ D6 e1 K+ q
if (keycodes[key] != undefined) {
2 l; h- y/ ?8 `5 v- Z% d: K
if (keycodes[key].Shift != "") {3 l2 O4 _8 y- n( r3 E
button.addDependency(shift, capslock);4 H! e, m1 _\" z% e
button.update = () => {0 Z1 s) }( e8 z/ N
if (shift.active || capslock.active) {
7 s$ v\" H2 q3 B8 l8 F- _8 p
button.label.contents = keycodes[key].Shift;
) S, v* T4 S+ G3 X
} else {
! [2 s; ?! W/ }) q* \
button.label.contents = keycodes[key].Symbol;
0 ?1 {$ e/ U; H* W' ]7 F
}
% w* O$ Y: }2 s( _2 Z$ ^% B
};
/ [, d/ [6 B- q ~
}
' ]7 t9 N5 j% ^* X: r( G& c- r$ b
}
}0 U5 H- m8 r* o, F( A
button.x = x;9 d2 i1 L4 l& h5 c2 ^8 i* q
button.y = 64 + row * (height + margin);9 ~( ]5 Y% N) m* d& V2 y+ g: m
if (button.box.width < width) {; G\" {. U$ `0 N% m1 e( i
button.box.width = width;
; |0 i4 y2 \( u
}) J$ j6 k1 l/ J; U! h& Y& @
let bbox = button.root.getBBox();3 U5 N: \, H0 q
x += bbox.width + margin;
6 d\" u* e- Z1 c; F- S E
buttons.push(button);
\" _2 \ ^. c. |
prev = button;/ a; x\" J$ R V' s, |- ~7 d
buttonMap.set(key, button);' Y2 i\" R: S) \% W' o
if (key === "ArrowUp") {
M. H- @; v& s
button.box.height = 16;
- U/ u. k q6 D( B7 y& u# q: A
button.label.root.style.display = "none";# a0 ~6 D g$ A. ^) d
} else if (key === "ArrowDown") {: q5 w\" e/ W# p) e# ]2 Y6 P& z
button.box.height = 16;) R; W2 Y* K4 {9 p+ }) G D
button.x -= 32 + margin;
' |$ J1 v' E) C5 E( v
button.y += 16;$ S; X! ?2 W9 V0 w
button.label.root.style.display = "none";
+ a4 H5 K5 c7 ]2 s! }\" U
x -= bbox.width + margin;9 {0 T/ ]1 \\" H6 I
}4 P* q8 O4 V* s! D! z5 X
}
; l6 K' p# l2 W. e- q8 L' C6 ~
let right = prev.x;- d$ {; k9 ]) y7 ^8 A+ x
if (right < 630) {6 T6 \3 S7 }7 a
prev.box.width = 630 - right;
% \: @% Z% z% V+ E9 y6 Z
}3 V3 z2 ^! S# d; i
}\" x$ Y2 D+ N8 X
// console.log(keycodes["0"], shift, capslock);3 _ }( c1 P\" w( j
let active = [];
% u r: A8 M2 I9 |3 B, q
window.onkeydown = function (event) {* k( W9 B) h1 z! S1 W. P\" D7 B
for (let i = 0; i < buttons.length; i++) {
/ x) W# c\" b* }$ _
let button = buttons[i];3 Q$ L' o% E+ I) B' K; ]/ ~0 e% |8 h
if (1 V# W! R0 y* \5 J
button.label.contents === event.key ||
: ~$ I( r, {2 W6 h
(keycodes[event.key] != undefined &&% [\" {0 C6 e, v4 o$ P( t6 X9 m
button.label.contents === keycodes[event.key].Symbol)
6 g- m$ |! i5 k+ p# ~ q( Q. r
) {* ^4 w. |) d% g' F) s7 E
button.box.style.fill = "#f8f8f8";
d0 ^. ^ c% [\" P) n( r4 l
button.label.style.fill = "#404040";
* s4 {7 ?$ W* b: @
button.active = true;
- {6 |* ~! h: m: W7 w3 E0 _ ^
active.push(button);) X9 }3 k& B7 p3 S/ V o0 u2 q' U
}/ } Y; [, K& U
}
, @/ }/ y- H( t, }- m$ f+ r
buffer += `'${event.key}',`;, P$ z5 i2 L. q9 d
};
+ }( u5 X$ j- _4 t$ k
window.onkeyup = function (event) {
+ W5 Y; R# [# G# _
let newActive = [];
8 ?, u: n& r5 X, g\" }0 L# Y
for (let button of active) {
3 p$ p& G q5 D: G! [\" J
if (5 a, w) _( k\" _ d; ~& h) R J' i
button.label.contents === event.key ||
+ g; _) O2 h V( k+ {
(keycodes[event.key] != undefined &&
\" G3 k' t4 K& y% [' j5 m, x+ `
button.label.contents === keycodes[event.key].Symbol)+ j6 S: D5 C% N
) {
1 L+ i1 O* g0 ^! P* K
button.box.style.fill = "";% M+ w4 `\" T& c8 N$ `
button.label.style.fill = "";$ M7 p5 _\" H! H+ F: G* s. N
button.active = false;
/ s* O+ L/ I, {- h. ]! w
} else {
' |6 i) z; S1 M: \8 |
newActive.push(button);) m7 ` g. `: r- n
}# x% U! L _5 ?/ @/ O' N6 ~
}
\" G( D0 K# Y5 a X
active = newActive;/ W, U/ v7 y$ s, e* T
};
. x. s6 R; R. s3 d' L4 O
let bbox = interactive.input.root.getBBox();
) ^ y8 M/ L# ^+ ^& [
interactive.setViewBox(* O& ~( s\" o' ~. ]4 g3 m
bbox.x - margin,
+ Z6 y/ r0 g; e( Q M7 m
bbox.y,
8 G+ M9 ?\" P1 ^1 p/ |- w& _
bbox.width + 2 * margin,
7 K0 Y: C9 a\" \8 Z* b) A; | o
bbox.height$ |3 s! R0 B; @& a P, f4 n
);* `5 @+ ^' n2 S! W7 b
//# sourceMappingURL=keyboard.js.map
\" X$ `/ e* I3 W$ U
7 O9 [8 y' v: r& u [7 Q5 }: K% c