使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1192 主题	4 听众	2946 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
: A- Z! z, G: W3 I8 |$ A% O g
<html lang="en">
& s7 B% {6 q% j& h5 z0 C3 a6 ?+ J
<head>- o8 b8 p4 r& N6 S- P. |$ B
<meta charset="UTF-8">1 Q\" o7 N) Q! S( ^: x
<meta http-equiv="X-UA-Compatible" content="IE=edge">4 c6 `7 @: w7 q
<meta name="viewport" content="width=device-width, initial-scale=1.0">
' C2 w9 D' e. I6 F
<link rel="stylesheet" >& R# O) u\" z# [' t7 {( Z: k9 [( O* N
<title>vector examples Keyboard</title>
, f4 e& Q, w1 D- {: B' d( q: V0 r; ?
</head>7 y# A) N0 P$ k; {& O\" i/ j9 w
<body>+ |/ Z4 ~' ]% D4 ~
<div id="keyboard"></div>9 G1 U8 |; `& L6 Z1 J* ~
1 Q& d1 b8 Z* ?5 @
<script type="module" src="./temp.js"></script>0 z8 O- q6 v/ a0 p7 x
</body># z$ K/ }8 i' X8 t9 J
</html>. H* ~+ |/ m; g) x6 v( _0 g

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
5 C5 h$ o1 B- \2 l. [! a) Y. j
console.log("Interactive", Interactive);+ H ]1 }1 I& V, F6 J/ C! w

复制代码

/**
6 Z0 G( ^7 J) h
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
- [$ M\" B# W/ r$ r2 o
* @description This interactive demonstrates how key board input can be used to add interactivity.# y# B0 v2 w! j: k
* @tags [input]* K2 ]) l$ c5 A0 p
*/& Z1 J8 y/ @1 m, k @
// import { Interactive, getScriptName } from "../../index.js";
6 M% R+ j& z& r: Q& |% l
// let interactive = new Interactive(getScriptName());9 G+ R8 W' {6 m* J; M
import Interactive from "https://vectorjs.org/interactive.js";. v\" [5 m( q0 r: `
let interactive = new Interactive("keyboard");
) z% ]. g/ J2 E. V
interactive.width = 768;4 E( j1 h. D! |9 o% `) J\" j
interactive.height = 300;
$ C) H8 e3 F/ h: f: v
interactive.border = true;
$ X1 Z! |0 a\" L+ b- p8 e
let buffer = "";& P7 q# q\" `, P
let keys = [& t2 p# Z) x) b( ?
[
) R1 d\" {* A) f' }5 _
"`",
\" o% r3 ~3 G! z- ]4 z% N
"1",
1 N T% X5 G# J3 \% _
"2",4 y% G3 }& x\" U) e$ r/ [
"3",
1 ^* }: k9 I8 Y: X5 y) Y) c' x
"4",
0 q/ O, X# B' d% l2 _& o) y1 Q' ^
"5",+ Z6 o) c\" ]- S! P
"6",' A, ~9 l* ]1 a
"7",
I- \* `( }: d7 L$ I# ~ T4 a
"8",
* K, M: Y E2 J, ~7 e+ {# u0 H
"9",
2 {) ^: M( t\" @: G
"0",
9 o2 F* i z5 l6 {9 [2 B; c7 s2 I
"-",# \ ?$ T\" L7 t/ ?
"=",3 Y9 Q# E* h) ]
"Backspace",
: S- t' W; m9 Z0 f4 Q: \! @+ G
],( W' M# i( H2 Q+ [+ E* k/ x
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
9 L\" i2 d7 ^: V d. Y# G7 H4 `
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],! T! R! e; ~, d* X
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
( d, F* a! |6 @8 b: u0 `
[7 C$ Q6 F1 i1 G- g! w: ?# H
"fn",3 G7 t! @; K3 ~' g( v! \
"Control",5 i: E: q, Z9 E( v: [, E
"Alt",! v$ j$ F+ c3 @- _1 c
"Meta",
( {# b2 z* }' t& F% \) Z\" @
" ",. f1 c# ^9 j) d' l
"Meta",
. Z) a$ v/ ?0 y+ @
"Alt",
1 P6 g) _' r) X+ ?
"ArrowLeft",
: N3 W# G) R6 j, t% a
"ArrowUp",% N% P: W' V) _& k- g0 y5 _( r( p
"ArrowDown",
9 ?; X# g, U0 E; r7 ^: B
"ArrowRight",
# X5 q' r: ]6 {) t
],
- ^$ A f$ ^5 R V
];
$ M8 G) |0 z( O$ ?' F' u7 g1 ]! M
let buttons = [];
* O3 \$ V+ S. p# R% U* E. h
let keycodes = {) I0 i; Z: ^3 Q6 y+ q) Q; Z
0: { Symbol: 0, Shift: ")" },! d8 x' M4 t4 V9 y: N4 U
1: { Symbol: 1, Shift: "!" },) T7 E( ]1 e. _, F
2: { Symbol: 2, Shift: "@" },% M: a/ J1 E; d& g8 e8 r( h. h
3: { Symbol: 3, Shift: "#" },; D4 o) ^9 p3 W$ ^
4: { Symbol: 4, Shift: "$" },/ m' L/ j* r: z4 W
5: { Symbol: 5, Shift: "%" },$ c2 U7 i3 N, h3 a d
6: { Symbol: 6, Shift: "^" },# ~) _, n: X4 U `2 J
7: { Symbol: 7, Shift: "&" },3 W; y2 j8 D4 T
8: { Symbol: 8, Shift: "*" },0 `% N- s7 C\" d n$ p8 Y4 Y2 F) Q/ ~
9: { Symbol: 9, Shift: "(" },
/ N7 Z& P! ?$ E) Q% s; \# M! B* q
a: { Symbol: "a", Shift: "A" },
! e4 F+ E2 D# z
b: { Symbol: "b", Shift: "B" },) K! N8 I' Y/ y$ X9 o% |& W
c: { Symbol: "c", Shift: "C" },' Y% }9 S; g0 a
d: { Symbol: "d", Shift: "D" },
7 d2 S) ^' M, Y( ?- Q% }
e: { Symbol: "e", Shift: "E" },
1 d2 t( n& k; `. Y, |& j- N
f: { Symbol: "f", Shift: "F" },
g: { Symbol: "g", Shift: "G" },
\" h/ ?& D) N- P9 i9 ]
h: { Symbol: "h", Shift: "H" },
; S% n3 ?, B- g$ U4 |+ Q
i: { Symbol: "i", Shift: "I" },
* _9 h5 c3 G/ O$ a& m
j: { Symbol: "j", Shift: "J" },
* y4 o% a+ S$ I q) n
k: { Symbol: "k", Shift: "K" },
: p; {+ H8 T3 x& k4 e) [' W
l: { Symbol: "l", Shift: "L" },
9 W4 E7 {. a6 Y\" u1 w5 d5 I; Z
m: { Symbol: "m", Shift: "M" },
; s/ ~* U L0 B' R9 [( S5 m
n: { Symbol: "n", Shift: "N" }, v) k( L8 m\" }
o: { Symbol: "o", Shift: "O" },
6 b8 K# z! V% T7 X3 K! \1 q
p: { Symbol: "p", Shift: "P" },
8 w( D! @\" y; l
q: { Symbol: "q", Shift: "Q" },) M% I7 u3 o( C: Y+ G& f
r: { Symbol: "r", Shift: "R" },$ u! ]& G8 M# U2 ]( q) r$ a
s: { Symbol: "s", Shift: "S" },! }5 ?* X8 F# ^# T0 L: K
t: { Symbol: "t", Shift: "T" },3 B( q6 m1 A( B j
u: { Symbol: "u", Shift: "U" },& |8 Y& g1 z/ s1 X/ Z8 ~1 I
v: { Symbol: "v", Shift: "V" },
4 x$ X, N/ v4 g( Z! |2 U- S
w: { Symbol: "w", Shift: "W" },& C; C7 w\" B! v! p
x: { Symbol: "x", Shift: "X" },
$ e% ?8 R6 O6 s4 w# Y$ D
y: { Symbol: "y", Shift: "Y" },
9 |7 m4 P$ P' C5 e; o
z: { Symbol: "z", Shift: "Z" },) R- w; V7 Z$ ?
"`": { Symbol: "`", Shift: "~" },$ ~1 S0 r$ o/ A* r
"-": { Symbol: "-", Shift: "_" },5 E\" {/ b( Z8 A\" ~2 r6 m
"=": { Symbol: "=", Shift: "+" },/ `' ?, \4 c Q6 S
";": { Symbol: ";", Shift: ":" },
"'": { Symbol: "'", Shift: '"' },
+ Q0 \1 U$ C J
"[": { Symbol: "[", Shift: "{" },
/ E) c1 F, M0 v' B8 q0 Z
"]": { Symbol: "]", Shift: "}" },
3 r' q5 O$ i) B
"\\": { Symbol: "\\", Shift: "|" },
\" u' J( q& I3 R0 O
",": { Symbol: ",", Shift: "<" },
1 ]6 u' g' `7 j9 B; D: O
".": { Symbol: ".", Shift: ">" },
4 m* u3 g4 _6 e' f8 w/ S* m+ v
"/": { Symbol: "/", Shift: "?" },
1 M1 E5 P% X, M( r7 |7 m q
Backspace: { Symbol: "⌫", Shift: "" },$ I1 R k5 `* }
tab: { Symbol: " ", Shift: "" },! v2 e\" u* @/ k# g9 V
CapsLock: { Symbol: "⇪", Shift: "" },
9 o. u0 x9 P1 V& x, D y
Shift: { Symbol: "⇧", Shift: "" },
# P2 h( `0 @$ E
Enter: { Symbol: "⏎", Shift: "" },# L; Z& ?# f' ~2 ^: K\" x
Control: { Symbol: "⌃", Shift: "" },' }. p' x( r1 t+ L
Alt: { Symbol: "Alt", Shift: "" },
( {! Y7 a: |' Y& d4 U5 L9 b
Meta: { Symbol: "⌘", Shift: "" },
* t! }6 R( a# Z5 r8 F0 _% t
ArrowLeft: { Symbol: "←", Shift: "" },. y3 _1 ~; C6 N0 O1 x# `( r
ArrowUp: { Symbol: "↑", Shift: "" },
) ]% t4 m$ `$ _! t8 A' W* I& H
ArrowDown: { Symbol: "↓", Shift: "" },* p }5 X) ?! B+ M2 T2 U% |
ArrowRight: { Symbol: "→", Shift: "" },* i/ e- l) Q7 n/ P6 t) v\" i
" ": { Symbol: " ", Shift: "" },
\" q' N/ i) J# t8 N$ m3 _4 e6 n
};) c3 H, a) ^' s( M
let buttonMap = new Map();0 M& F, e8 E# C\" T8 g
let height = 32;
1 a( K, V8 [3 D; c\" R
let margin = 8;1 K0 ~* c3 q! x% K4 Z( i/ v1 f
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
! C* Y5 \/ i6 ^6 {* f; a+ s- i: U( B
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
9 e+ e; p' m- }$ W
for (let row = 0; row < keys.length; row++) {
! m5 _& w' p/ p9 `0 X$ z
let x = 32;* S, y: r; x% F& t- i! `7 j& v, x# K/ }
let prev;/ x9 O, I! c t* @
for (let i = 0; i < keys[row].length; i++) {' H5 K* b* i, Q+ T' H X# T
let key = keys[row][i];' u7 @) {. `, R4 Y\" o
let width = 32;- U4 ^# f8 A; i, o, ]3 ^9 m0 i9 C4 N& @
let button;3 ?6 |) r1 O0 S\" v
switch (key) {
2 C8 `: h7 F- i1 J
case "CapsLock":
* G& A% m3 F6 w0 J
button = capslock; _ G: \. h( }$ c9 s$ h6 m
width = 64;\" M! U9 ]/ Y\" x! }; P
break;
& k& A9 K: d$ f# R\" ~
case "Shift":
4 n9 {! m; p% e# T+ A6 ^# Q
if (shift.x === 0) {4 W5 Z- i' i4 w& n' A. k+ x
button = shift;$ j1 I, K3 g1 K, ?( x7 g
} else {
7 e. }. M8 ~& z, |* m6 U; r. B& K
button = interactive.button(
$ I% u/ V+ {\" T! q0 l6 v3 h
0,5 B) j: Y5 A# h7 l\" H
0,
+ D+ ?. p* H2 G# E- h
keycodes[key] != undefined ? keycodes[key].Symbol : key
$ y- C- J5 Y7 m# Z4 d
);
! N j, j5 g* o% C4 O5 U) [
}
- C6 d; N( t# ?6 u\" S# {2 g
width = 90;# A/ m! b. n L3 s R8 N
break;
) t/ Y' d2 _1 W4 n8 @* c* Q
case "tab":
8 m2 Y9 \2 q8 n4 K3 z/ y& M
width = 50;& t9 R2 H' J) I% V# j8 H1 _/ |; F! ]
button = interactive.button(- u6 {# A\" A: Y( F
0,' E9 @# a3 Q: w\" }7 P# i
0,
$ g& V* H y/ a/ A' y3 X
keycodes[key] != undefined ? keycodes[key].Symbol : key% H6 Q: |\" e( k4 f\" `- W
);. b# k' N0 O( G( j7 \
break; f O- r0 }/ U! T: {& X
case " ":
# ~% T) i/ ?9 z5 w9 g
width = 176;
4 o$ `+ [4 \8 D' r; r
button = interactive.button(
$ y) ~8 x4 a( @/ K- M) x ] S8 |
0,+ C/ P# z: ?) {% ~; P; y5 G1 b
0,; B% j/ h5 z$ h# K; p4 E/ y% R
keycodes[key] != undefined ? keycodes[key].Symbol : key9 Q6 x- O$ r: s, ]) x/ z$ J
);
9 D E' v6 X; p& |* N
break;
0 v7 B, |. L) N2 q- `, J
case "Meta":
|3 [& q& j2 c/ {! p# J2 m
width = 50;0 T+ s) u8 M\" ^ x. v8 A; c0 o
button = interactive.button(; \! W3 J& v* ]. H; C
0,
. }* v3 A) z+ N4 e+ R; ?, S
0,# f* f& {, @7 I7 J\" s* ]5 l0 _
keycodes[key] != undefined ? keycodes[key].Symbol : key0 {( ?! k4 G1 Z7 S
);7 k1 ^/ A; S' d! S- {6 z6 O/ K
break;
; s5 w, S4 J: Q1 ^2 }$ S
default:* r* d) h9 T2 d w4 _3 y4 R
button = interactive.button(
5 m7 {+ C5 v6 m
0,% Y$ D! O, G& m1 O' B
0,) e+ v& l) M& [6 e3 t; h# J2 c% ~
keycodes[key] != undefined ? keycodes[key].Symbol : key2 O/ z8 `$ L. R! p; v2 b# Q
);. V& |1 O% v9 X: O# o
if (keycodes[key] != undefined) {2 d V5 l D$ a/ o ~8 m
if (keycodes[key].Shift != "") {* ?6 p0 a2 R; O, F\" v
button.addDependency(shift, capslock); _\" e2 Q/ t( T( E* \
button.update = () => {
% u( j( ?' ~5 X; ~
if (shift.active || capslock.active) {8 f \) z; `2 o8 Q9 j% O Y
button.label.contents = keycodes[key].Shift;/ t' R; @) f% e! z$ U: x1 u$ Z! j
} else {
$ p V& ^: i, g. |$ D& l
button.label.contents = keycodes[key].Symbol;
$ k6 x9 x3 F R2 R& _# A! {
}7 Z0 I a. a; g
};* U- \/ |# f2 ~
}# G\" N6 ?, F$ L( P/ I
}: Y# q, E0 [\" K$ w
}# p* X: e/ ]: L, F% ` m* u0 a
button.x = x;* ~8 S8 r# D- s, K* V) K3 L+ y# P
button.y = 64 + row * (height + margin);$ M2 b. _4 I: [2 D9 l
if (button.box.width < width) {
* w* P' U: M0 j @
button.box.width = width;
8 z- J; _\" F8 ]1 o, o
}/ ]2 H: k\" c8 a. c
let bbox = button.root.getBBox();( \, p9 ^% q6 _: @& U3 m
x += bbox.width + margin;. z. t/ G1 N4 M* w5 q# o
buttons.push(button);& G; J8 \0 \6 F) }! S
prev = button;$ `2 Q6 C D V/ O1 x! j\" n
buttonMap.set(key, button);\" c, ~1 f G3 }' Y' i
if (key === "ArrowUp") {
5 F- M2 i+ @$ O& O; e8 n
button.box.height = 16;
s! z9 x7 z' N1 K8 ?+ w8 K9 B! ?
button.label.root.style.display = "none";% k1 R6 z3 @& x
} else if (key === "ArrowDown") {' }1 P. t' v$ O! W! j+ x
button.box.height = 16;6 s+ c6 d7 g. X7 x6 H7 v* D- |
button.x -= 32 + margin;$ |: B: p+ Z4 C: w
button.y += 16;8 `' p5 l' c7 P4 C! l1 k
button.label.root.style.display = "none";
8 z* h1 S2 C+ V
x -= bbox.width + margin;
8 [2 R& q6 f3 y3 f- G: \8 E' W
}
' ~! H5 T. L% y\" }. P
}
1 J! U5 h7 p7 t# d: |
let right = prev.x;1 @! t\" b/ w3 l' H
if (right < 630) {' C: Q4 t& W7 i
prev.box.width = 630 - right;
0 M/ d) Q1 Y2 R1 j R
}
3 u ^( t# x3 N
}
4 ]4 M* }\" X0 _/ @4 d5 |# f
// console.log(keycodes["0"], shift, capslock);* O\" z1 L6 m2 g; }
let active = [];/ B& {( Z/ T) R: y. A5 {
window.onkeydown = function (event) {
: }& ^3 b- M; ?( [
for (let i = 0; i < buttons.length; i++) {! y( G5 B2 S- {+ E9 U1 i
let button = buttons[i];7 c: a0 V( z1 z# q3 ^9 Y/ m4 L\" _
if (
3 T4 \3 R1 c; N4 _7 _- w& U
button.label.contents === event.key ||* \- I& @. V! l, v& _
(keycodes[event.key] != undefined &&
: B, l. G* G9 G+ b% `. o) U4 R
button.label.contents === keycodes[event.key].Symbol)2 z0 s) b' F- T
) {+ }* `& ]% b( y# g0 H0 W( `
button.box.style.fill = "#f8f8f8";
\" H, o9 l) t( U N
button.label.style.fill = "#404040";
1 F; R# S H/ T/ {( e! l. t
button.active = true;' U) O. O L* [+ j% S! M
active.push(button);+ ?5 i# z3 u' ?5 T\" i9 M: `1 w
}& S& h. `3 W3 d4 b) H- f
}
! o4 a) o3 W3 n
buffer += `'${event.key}',`;
8 j0 w( F: @\" l0 I# e4 V# B
};$ }% {7 P. I1 u$ q7 M
window.onkeyup = function (event) {- n$ b: k' w: C/ Z, W3 B) [5 l, E: Y
let newActive = [];! Z' f+ M' J* Y+ v6 r2 v; e
for (let button of active) {
B# P2 F3 f' V/ f# s
if (6 A2 I$ U) K! x
button.label.contents === event.key ||
$ H! M& V% s2 f+ e\" e3 B+ c
(keycodes[event.key] != undefined &&
& K$ @. N. E/ f\" u- l* I
button.label.contents === keycodes[event.key].Symbol)6 z7 l1 I/ A- W- _$ J
) {
& L* L: J\" E& W
button.box.style.fill = "";( B\" N% o% ], C6 O5 |
button.label.style.fill = "";
7 x9 ^* V7 V N8 W, J
button.active = false;
. D6 T# r3 Z: w a3 S5 t( n
} else {
0 ^( A7 C9 l; I( q3 d
newActive.push(button);
1 k5 V+ _4 V\" t$ z* Q
}
- O( _$ v8 z. a\" d, U4 y; g& c% G\" M
}9 X# o\" e3 |; u- ?
active = newActive;
, Z, i2 d: V8 C+ h0 _! U+ h
};
9 Z; I5 u6 c6 V8 x
let bbox = interactive.input.root.getBBox();7 B5 T+ w9 C7 q# B! o
interactive.setViewBox($ w4 n8 n3 G/ j! \$ i
bbox.x - margin, |' A2 v0 q6 N; c0 _/ H* |5 ]: D
bbox.y,
8 F5 m\" d2 D, I
bbox.width + 2 * margin,
$ K3 i. Z$ m/ v2 I7 B4 p) c x
bbox.height7 b; O! E; T. L8 _0 H) q3 }/ G' x
);9 ^% m$ c1 L2 b8 B1 Z& B
//# sourceMappingURL=keyboard.js.map
\" T1 q% W S9 s
; ` V9 s1 S: j/ b7 h