使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1186 主题	4 听众	2922 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
0 y; [( ]5 t: k! i# [ |
<html lang="en">4 a9 l- o ~6 x5 P+ `2 `
<head>
# I, e\" p+ K% f% f. j
<meta charset="UTF-8">
5 ?9 [+ ]4 u4 S7 t) g, _
<meta http-equiv="X-UA-Compatible" content="IE=edge">
# {\" r\" D% x* ]\" L0 h6 q
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7 f$ Y! |& R1 J
<link rel="stylesheet" >
- l) a\" a( X; B$ c& [; L7 L
<title>vector examples Keyboard</title>( Q ]$ a. d$ H' f7 l! T
</head>
\" Q3 d, s1 n! s& j3 n1 W
<body>
) s$ J! D6 u y1 m% J
<div id="keyboard"></div>; P$ q- Q# f# D$ s: Q7 y7 c
R/ M% `: @; B+ l: B\" }, Z
<script type="module" src="./temp.js"></script>
3 g2 b/ x p; e7 _5 Z3 A5 e
</body>
, S3 {% r) ~$ P0 \3 `
</html>) Y4 Y2 z' X/ e0 i+ [

复制代码

import Interactive from "https://vectorjs.org/interactive.js";$ h ?8 P) C: X; S9 M- h6 k# w\" ~
console.log("Interactive", Interactive);2 T2 _& q. F) d

复制代码

/**: D3 _6 w/ I\" Z7 p7 `0 `
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard; b: F, J0 ?2 x3 ], ^
* @description This interactive demonstrates how key board input can be used to add interactivity.
* D% l/ Y. ^ e( I C7 H
* @tags [input]! M8 Q/ [! n' I0 m S& u
*/2 V. U6 _* ]4 I; Q9 w8 c/ b\" g6 O
// import { Interactive, getScriptName } from "../../index.js";/ J8 o6 H0 A- X; t; a
// let interactive = new Interactive(getScriptName());
7 }; _) D: @' U# S8 Z* C2 `
import Interactive from "https://vectorjs.org/interactive.js";. N\" ^9 S) ?$ E8 l$ q' j( w
let interactive = new Interactive("keyboard");
9 e5 f' D4 M8 ?+ C8 u
interactive.width = 768;
# v\" u7 ]6 j4 d! A) K( z
interactive.height = 300;/ b\" A; [& y( k9 U
interactive.border = true;( [ e) s- p/ p0 e8 j9 [
let buffer = "";
& [( B$ t( k) m9 N
let keys = [
, M, y. z7 j- [1 ?! O8 _3 w
[
+ n: V) f0 U, ` g$ m% Y6 T; S
"`",
\" }' t5 t1 u. t8 H
"1",7 S! N( C% ^; @9 [4 c! E' V2 y
"2",
: Z9 _+ ?/ I: I% x8 _\" }; G& N
"3",
$ L) l9 a9 x R E\" M+ z% b
"4",
; r& d+ w\" I0 b$ }
"5",* J$ m! \9 }: G2 r. V
"6",+ K8 D: \- z$ X! H5 G* D* Y6 S0 ?
"7",2 a% R1 K+ V: C6 y. \
"8",
# V! ` ?* h4 k- |4 U9 l
"9",
( M/ c\" A3 y7 |* t3 N) v/ P- w
"0",
% V9 U! D1 T$ Z
"-",
a B\" u8 p) P
"=",: i- a' [2 Z& h3 B/ X) \
"Backspace",% ~% {, W; B- @* z/ M) f7 v
],
5 H; ^( e7 C8 T; I
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
/ X2 e# U6 h7 y' X; }; m
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],: t9 v4 D/ r' p& i1 g\" {
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
1 T, t( R4 k$ k: u
[& [1 [2 l% l3 F& \2 f
"fn",
- T! D, W7 o\" B/ l' ]
"Control",! Y w) o! C1 }5 j
"Alt",2 ~6 I# f; s }5 x; j
"Meta",1 y' a, V) R+ y+ @+ y+ ^, h
" ",
O5 R% T) X2 j
"Meta",; }( b/ g. X) p* L) _
"Alt",
- y2 W$ u* G\" d* A3 C3 U# B2 {
"ArrowLeft",
+ E/ k5 G( k. b! K
"ArrowUp",
# n L% {1 ~, a: t v2 Y
"ArrowDown",
5 c6 t% D4 j: x2 X\" S
"ArrowRight",
: o: U: z& W6 \ |7 X5 X
],5 }# O( Y\" ~: b' S8 i- b6 T+ T3 A4 ?
];; z% ^, H# T- f1 u5 \4 f
let buttons = [];
3 C! t\" X( U& N4 \
let keycodes = {
; k; c1 {# u4 z% b\" A4 y
0: { Symbol: 0, Shift: ")" },0 e+ w4 h) n4 }1 y
1: { Symbol: 1, Shift: "!" },
9 O5 W) ]2 ?5 I, L* M
2: { Symbol: 2, Shift: "@" },
7 E; g. @+ }# ~3 z: U- @9 l: h
3: { Symbol: 3, Shift: "#" },
6 s6 P2 }8 c4 [ C3 D! {
4: { Symbol: 4, Shift: "$" },
- v/ I4 C- Z: v, s c
5: { Symbol: 5, Shift: "%" },% z$ h6 f! m/ {* B7 [
6: { Symbol: 6, Shift: "^" },
/ M2 l& G% M: o/ u5 h) f! @
7: { Symbol: 7, Shift: "&" },
5 W5 |\" Z. K: x& ?# b, |9 a1 Y3 B0 B
8: { Symbol: 8, Shift: "*" },( @\" b! C. V. J& @$ J
9: { Symbol: 9, Shift: "(" },
9 e% |$ X! {/ e' y! @
a: { Symbol: "a", Shift: "A" },
_, s+ k* F3 }7 i! q. N
b: { Symbol: "b", Shift: "B" },9 v1 x) w0 @, E, b! |2 X& ^) h% t) ] K
c: { Symbol: "c", Shift: "C" },
9 X! Q. X: p7 ^/ x9 o
d: { Symbol: "d", Shift: "D" },
\" ^1 D\" a) D3 i' v
e: { Symbol: "e", Shift: "E" },4 p3 _1 g$ B% T6 H& X
f: { Symbol: "f", Shift: "F" },
\" `4 w' b* v1 S
g: { Symbol: "g", Shift: "G" },& g6 X* C, p\" R) n: Z# P
h: { Symbol: "h", Shift: "H" },+ p7 ]' x$ N. @# {0 W* F
i: { Symbol: "i", Shift: "I" },
Z7 a1 \' p. Y\" A4 W9 l
j: { Symbol: "j", Shift: "J" },! k! r* F- E* @8 [
k: { Symbol: "k", Shift: "K" },
* Y0 S0 A# f8 y( G) x: z
l: { Symbol: "l", Shift: "L" },
. o/ r, s) S% W# p* t- y/ B$ R, Q
m: { Symbol: "m", Shift: "M" },' v+ ?7 W; G; ~$ _. ]+ w: L
n: { Symbol: "n", Shift: "N" },; t: j/ w( G, D; H& d
o: { Symbol: "o", Shift: "O" },
( k! `( z/ l% R! i
p: { Symbol: "p", Shift: "P" },\" ` u- z0 i/ d7 Z
q: { Symbol: "q", Shift: "Q" },
. _* F! a) _/ X2 i4 l5 s1 G7 C
r: { Symbol: "r", Shift: "R" },5 z- }1 ^3 r# Z8 l: r
s: { Symbol: "s", Shift: "S" },
9 ]; ]+ I& q( g k
t: { Symbol: "t", Shift: "T" },
3 G3 s+ h9 s* ?$ O/ k# u% v3 G2 ^
u: { Symbol: "u", Shift: "U" },2 }0 ~. n! {* z. c1 y
v: { Symbol: "v", Shift: "V" },
. o1 i! `3 t n7 f: W! z! d
w: { Symbol: "w", Shift: "W" },7 q( i* S% o% T' P3 Z' s7 J* j. u
x: { Symbol: "x", Shift: "X" },
. M, z, Y\" X% W: F
y: { Symbol: "y", Shift: "Y" },
9 {5 S# C) c\" c; i1 x
z: { Symbol: "z", Shift: "Z" },( K/ b/ m+ k/ t; q- K
"`": { Symbol: "`", Shift: "~" },\" r: m8 n3 t1 ]# L$ T. F/ p* ?
"-": { Symbol: "-", Shift: "_" },+ o2 q; e2 b8 [! j2 u$ |! J
"=": { Symbol: "=", Shift: "+" },
% x7 x. R3 B7 F2 v( Y9 j1 J' |
";": { Symbol: ";", Shift: ":" },# n$ p! n\" f) \7 H
"'": { Symbol: "'", Shift: '"' },4 _4 b/ A. r* A( F) A
"[": { Symbol: "[", Shift: "{" },9 ^% x- m) X7 {9 G8 {\" X* n# O
"]": { Symbol: "]", Shift: "}" },
6 O3 l0 S: G\" S
"\\": { Symbol: "\\", Shift: "|" },
7 }: z2 P0 M: j
",": { Symbol: ",", Shift: "<" },
".": { Symbol: ".", Shift: ">" },
\" T8 T5 Y/ J/ q# E+ d: a\" N\" c. Z
"/": { Symbol: "/", Shift: "?" },
\" _; b$ L\" z: ~! X\" l1 z( h
Backspace: { Symbol: "⌫", Shift: "" },) H- k8 y& H. l
tab: { Symbol: " ", Shift: "" },2 R' d3 r) ^& x' o+ q+ @% `! R
CapsLock: { Symbol: "⇪", Shift: "" },
& |0 s6 C1 P9 i
Shift: { Symbol: "⇧", Shift: "" },
# |% x: q0 m\" M6 q- ?; {; v7 U
Enter: { Symbol: "⏎", Shift: "" },
& {* B- | j- i( h b7 U6 S+ `
Control: { Symbol: "⌃", Shift: "" },; e) V) E8 o6 G: p2 m, Q2 q
Alt: { Symbol: "Alt", Shift: "" },
* j$ ^! \- M' P4 {5 a9 J6 i- T/ k' z
Meta: { Symbol: "⌘", Shift: "" },
[4 d7 m- w: s
ArrowLeft: { Symbol: "←", Shift: "" },
\" G f2 |8 Y; G- o( C0 Q
ArrowUp: { Symbol: "↑", Shift: "" },
7 m' O+ N$ }7 }( u# t! ]\" L
ArrowDown: { Symbol: "↓", Shift: "" },) w7 ]0 |* I V! g: m\" \: o
ArrowRight: { Symbol: "→", Shift: "" },
" ": { Symbol: " ", Shift: "" },
8 ]+ U/ w( J& B1 d\" }
};
, T; l, H+ s2 ~* v8 {
let buttonMap = new Map();
' B5 A% k( A% Y4 C, c5 X
let height = 32;\" z. |8 E4 s8 Q: r/ P$ h
let margin = 8;) D8 g7 Y( Q( C4 J! _$ f; Y( f7 z
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);# [# g# b! z\" ?/ f\" G! W& x& g
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
( |9 f1 a0 _+ d3 Z3 \\" V, ?
for (let row = 0; row < keys.length; row++) {
) F; U/ n4 C3 ~3 l# H7 x
let x = 32;
+ ^\" _0 y- U3 Y0 D, V
let prev;8 U! ]! ?/ \% K' ^, q: Z% c/ m
for (let i = 0; i < keys[row].length; i++) {
$ t+ e9 `6 c; T8 a0 a
let key = keys[row][i];7 W5 W$ Y) e# i& p& w
let width = 32;$ s) F/ z2 u' t. A
let button;4 M% |; S/ f\" v\" p) i& Q
switch (key) {# j6 _6 j' A5 S; v7 U7 l t0 v, E+ C
case "CapsLock":
, A, t7 V6 v) c( X
button = capslock;1 k# G7 Y4 S/ b; J+ M! n. T
width = 64;
& P1 U0 s4 H3 i5 i! U
break;
- O$ e8 m3 l9 r1 O0 K2 B& A. n
case "Shift":
* E5 g8 F: ^% T! g1 {/ y
if (shift.x === 0) {
$ w( {% S: K0 Z& D4 v% C
button = shift;# d! R) h* A4 l9 D7 K9 `
} else {) w$ P, @& d$ x4 U* W- C
button = interactive.button(, | C; E0 I. f$ ?$ q7 I* s( X; \
0,, @' D0 V$ n& f+ v
0,
9 Z% d g1 A j
keycodes[key] != undefined ? keycodes[key].Symbol : key
$ i6 l1 ^6 k7 z6 `$ b
);
4 x6 k1 E4 G2 Z- r; V e
}& t( i/ Q: q, p: U( D
width = 90;$ F$ i: o2 ^; |( g3 }7 s
break;
. b2 e: Y d; l2 p3 D8 v' N1 s
case "tab":
& u2 C9 T3 z) k7 n7 d
width = 50;\" z% e0 y3 h+ M1 r( ~/ x
button = interactive.button( _\" x\" N9 a0 C+ t4 O$ b
0,
3 J, L3 H* ~3 ?8 a% I6 k
0,+ z2 L- _8 W: G9 ?( H' W
keycodes[key] != undefined ? keycodes[key].Symbol : key
$ P& N4 `! L. X! h6 ?+ R: M/ t& G
);
- X- k. p\" e1 z# k& s
break;6 k& }, P0 v) v8 r
case " ":. ?2 g9 h# z m% X4 ~\" s
width = 176;( Z5 `% q; A( S
button = interactive.button(
* i$ C6 l; b/ ~4 b
0,5 \5 ]+ {4 \( X% Y8 c; V
0,* l3 x! }/ B8 R1 e* P# |2 j6 ?
keycodes[key] != undefined ? keycodes[key].Symbol : key
4 D# g5 [2 B1 X7 r, |
);
6 V: V u1 c* v% R6 H/ S1 [# k9 _
break;% N8 b. ~ C, p0 y5 }9 L6 S
case "Meta":# C, Y, [6 W1 z
width = 50;8 c ^; i1 y, q6 g4 V6 z5 Y% u+ b
button = interactive.button(
* r/ C r$ x! p q) t0 S
0,
% x$ O% v: g# V8 g\" ^
0,$ C6 V& X6 g5 M/ Q
keycodes[key] != undefined ? keycodes[key].Symbol : key
3 ?; O6 \9 Q- Q4 A\" ?
);/ n! W# q- B0 i4 U! D
break;
# n3 c$ B. G1 G/ [
default:( G6 B& B! C) g; t K U
button = interactive.button(1 |. b3 Z2 Y4 r. j, f* l/ s y
0,
1 r/ ~' y$ `' s- F5 ?1 s
0,
2 \ N2 h) ^8 _7 j
keycodes[key] != undefined ? keycodes[key].Symbol : key
* s\" k3 Q) P* l% h
);
9 v6 q# N0 q Z( V
if (keycodes[key] != undefined) {
4 P4 m3 u( t% [$ r\" H
if (keycodes[key].Shift != "") {) h* p6 }: i5 K' N
button.addDependency(shift, capslock);
1 ~2 Z# o9 w4 v
button.update = () => {1 Z- `) ~+ d. r; W# ^; z+ g [
if (shift.active || capslock.active) {# V( S! c: \/ ]0 P; l9 ^
button.label.contents = keycodes[key].Shift;
7 [1 |- M4 p+ \4 Z* Q$ |
} else {
* T. |% [4 P; V, `
button.label.contents = keycodes[key].Symbol;9 v3 H$ N! V! p4 Q* ]7 A& f$ i$ P+ `
}
- q- n5 o: z7 W( N0 T5 Y4 v& K\" g
};
) v\" \1 ?! p: E
}
' L% l7 P3 [2 \# T; p7 E' k4 G
}
( h1 G7 y/ F: b8 Y5 ]. B
}
! ]. x, C* p o$ \1 `
button.x = x;
% V% n# k; ] T% i9 P
button.y = 64 + row * (height + margin);; ]+ o2 e/ S. Z) l2 t
if (button.box.width < width) {& n, D( e0 S0 G
button.box.width = width;
+ e9 F( [+ u6 `4 q
}
: N* C8 j1 _3 D5 C: {3 A& u
let bbox = button.root.getBBox();& e1 g% q! Y$ Q2 c: x2 G
x += bbox.width + margin;) [) J5 Q' H& P8 b2 l8 \( B
buttons.push(button);* Y% t. j1 Q1 B. q1 M6 k9 M& A
prev = button;0 e( t' A- d\" C9 b3 z6 _* f9 Q% y
buttonMap.set(key, button);; |* A8 ^# |- Q8 H2 G3 k7 s6 R/ Y3 j# I
if (key === "ArrowUp") {; R4 w, E% ~8 G. n- s. }, ~3 n
button.box.height = 16;
2 O0 N/ G\" H\" v\" G
button.label.root.style.display = "none";9 ?* n\" y6 L+ o8 ]7 p
} else if (key === "ArrowDown") {) C4 A\" d! \5 j$ o/ m5 t s' H; Y
button.box.height = 16;% x3 ?8 E. W$ I- D: H1 v
button.x -= 32 + margin;! ]: A W5 a$ @0 S& a
button.y += 16;, h ?2 x& _' s: C6 f
button.label.root.style.display = "none";
8 ?0 F, S3 ~! \3 q
x -= bbox.width + margin;
\" F4 g+ r/ O. j. U4 B# y) d2 S4 ?
}# ^4 d9 K; Q0 z( K c0 n- C\" ]' V
}
( i\" B4 A) S1 i* {* D$ Q
let right = prev.x;
' v! n2 C, q# @, z3 K p
if (right < 630) {
4 D' D$ @: A$ x! b$ e' X5 G2 Y
prev.box.width = 630 - right;
. ]2 j0 n: D$ X: q2 o' ]- C
}9 w4 `5 O& h7 |- x7 `& h: M
}
( z! {& n0 c- O3 N! M0 u
// console.log(keycodes["0"], shift, capslock);
, _2 y- \/ m- X! g g9 k1 t
let active = [];
+ o- s n; m' S
window.onkeydown = function (event) {
$ V F5 Q' j2 Q, f4 f+ m0 |
for (let i = 0; i < buttons.length; i++) {& }9 s% U: J: l) g
let button = buttons[i];
& w, S/ @8 Z0 r3 i\" e' v( |* h; j
if (, R\" a; S8 I5 I4 \3 }, l& P
button.label.contents === event.key || @/ g9 N$ [) M; ?$ i
(keycodes[event.key] != undefined &&
. _3 s9 d+ u. m @) a
button.label.contents === keycodes[event.key].Symbol)
& Z/ S& f3 P% d5 E5 I0 c5 u- b
) {( q# v6 m( r\" j& a t
button.box.style.fill = "#f8f8f8";
& t3 v8 @! l y, K J8 f
button.label.style.fill = "#404040";
2 _4 [, ?. y; N# ]
button.active = true;) h! N' `1 I I6 j6 ]
active.push(button);6 _1 e4 P* `2 m4 M3 e1 C
}/ U% }/ ]\" w+ M
}
+ V: f+ U/ U' F\" H$ l0 X
buffer += `'${event.key}',`;
9 w) D$ G- X1 S8 q9 u7 B
};8 i; r7 s8 R: C* w
window.onkeyup = function (event) {' R+ w s, n$ z, S: X! y9 U0 f6 x
let newActive = [];% I8 x$ M\" n% q4 |0 k1 w
for (let button of active) {
' S) H8 ?9 v$ ?5 k
if (
$ K1 z- ]+ v# P8 j
button.label.contents === event.key ||2 V3 Q7 r\" V: L( K; \
(keycodes[event.key] != undefined &&
# ^' i3 t3 g: p. J8 S
button.label.contents === keycodes[event.key].Symbol)+ q0 J. @. P! J/ i. b' W
) {7 b. l- ]6 O! J! d( ? N7 b
button.box.style.fill = "";
) g- s& h! [* L/ G
button.label.style.fill = "";
$ S# Y, ^* E; o+ G
button.active = false;% P\" o; [& [+ B3 q/ a6 ^3 |
} else {
% _) S1 R% v* N+ C( O$ D
newActive.push(button);
0 I1 H' {; s1 K% c# y
}% F- g z+ I6 x
}7 b# e- t6 m+ c\" }; F
active = newActive;5 s1 V* p( A0 E4 c3 S5 _& m) L# D
};( @7 |0 S2 m# M$ T
let bbox = interactive.input.root.getBBox();9 C0 r2 J) J. c7 e
interactive.setViewBox(4 ]1 A4 s( B C1 d( u6 [
bbox.x - margin,. b; h' O, k2 r0 M\" W; _/ n
bbox.y,
% T. n& m J8 }' H p9 X
bbox.width + 2 * margin,
2 D, y4 b C' j0 v. ^
bbox.height# J8 p3 U3 ~5 T4 j8 F
);
( z3 H, g9 l2 `! W( e* y9 X
//# sourceMappingURL=keyboard.js.map
' f+ K7 A7 W* M, C6 N
9 V. A, x' C2 z7 a) c