使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1192 主题	4 听众	2946 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
7 a8 R& W/ V- D t5 M% r: g
<html lang="en">9 b& R/ s n7 }$ X3 Y5 D a
<head>\" l; f7 R# M. U\" x a4 q- [
<meta charset="UTF-8">
3 ?4 g1 i( b$ p) L+ a8 @) r
<meta http-equiv="X-UA-Compatible" content="IE=edge">/ L _6 X; }! y3 S% r) ^* U7 h4 e
<meta name="viewport" content="width=device-width, initial-scale=1.0">
, H8 h2 I\" d( S( C% }' c
<link rel="stylesheet" >+ f# n9 U\" g9 T5 j& l/ x- x U3 ^
<title>vector examples Keyboard</title>. M* T! e, I% W9 Q
</head>- G( P1 H @) S! |
<body>5 J% b$ c8 ?1 G2 @9 M% Q
<div id="keyboard"></div>
\" h' G) \' a* a. u9 i& k4 B
\" Q* T7 n3 O. v$ v: P1 |7 i
<script type="module" src="./temp.js"></script>
3 H w2 v7 M9 e% G
</body>
+ a/ j3 k6 t: }; T$ t
</html>! u f: r$ q2 e; g9 l6 [

复制代码

import Interactive from "https://vectorjs.org/interactive.js";9 ^$ b) K& o# h1 ~! Z0 Y! g
console.log("Interactive", Interactive);( u2 {. m; W9 f. E: ]' r

复制代码

/**% l: f; P4 j6 J! _
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
( T4 R: U$ h7 F/ ?
* @description This interactive demonstrates how key board input can be used to add interactivity.
+ D; y: r. y2 Q I8 H5 _% U6 ^
* @tags [input]
# L/ K! c0 R. [\" e6 h
*/
5 t$ s2 k. u0 W7 d; B: q
// import { Interactive, getScriptName } from "../../index.js";
/ B }. `, }. M. Z
// let interactive = new Interactive(getScriptName());- ^. O- }7 t+ ~* r8 X5 t
import Interactive from "https://vectorjs.org/interactive.js";- S: J8 P, P r8 A
let interactive = new Interactive("keyboard");
( F' v8 }6 X! u' Y( X) B0 m
interactive.width = 768;
) B* T9 G1 A8 a0 r0 Z* i
interactive.height = 300;
) b4 k5 A% R, ~5 f! F) K6 Q
interactive.border = true;
) k) z4 k4 d0 F
let buffer = "";. _; M( y; i, k- T+ P
let keys = [- M) N/ S5 D, G
[
: D8 g2 y% S, _' E$ D, s
"`",
& S: r6 q6 b- F# L. C& B4 ?
"1",
% E5 C3 ]! N0 f# ]+ a3 s8 ?
"2",
0 [$ m0 u( r7 y* @0 r
"3",0 H* ]& [! U: J6 p. ?
"4",8 y( A( T% O, g4 Q\" {8 F
"5",
1 W+ r. R$ Z) k) ]' }4 | ^( ^
"6",7 E, e$ Y! P3 P
"7",
6 u( [* b! t: \. W! P9 ~+ ?+ x
"8",
! E! _: \6 b6 H3 B6 z8 n
"9", g* W) g$ J, u\" B' |
"0",+ ?4 O- K8 m/ d& l
"-",6 b% \4 c* |0 W$ Z' H, N
"=",
9 U% d, P( M$ h$ _( u% i
"Backspace",
# I1 J. \+ }0 E0 x* ?9 I; P4 e+ _
],
K; a9 L, b. j' r$ c: l) A* R
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
6 W, y% t1 T$ W+ E6 A
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],4 s) l& E' N\" L0 X7 C
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
* M) y8 [8 C7 U3 S* v
[5 x( C$ m. C* R' t6 ?
"fn",& ?( d& c' p$ F/ t6 e) H
"Control",
7 I# d2 Z) z: H4 B6 {
"Alt",
/ e0 v N2 W\" |( E3 }\" N6 t8 j+ x
"Meta",
& o% o! t) Q4 c
" ",, C2 s h: \5 f& ^( W# K
"Meta",
) @% L# e2 e! @& G' S: q3 @
"Alt",
- O+ _$ ~; o1 P/ m/ V
"ArrowLeft",
! \: q0 ]; w4 D x
"ArrowUp",
2 }& j5 L1 P( a' M$ E
"ArrowDown",
0 h$ V: P0 A+ R- X! W# G& C
"ArrowRight",
6 n\" v) R5 q4 h
],
' B7 l- y4 h- |7 O9 U
];
0 M0 b7 ~6 L: j/ ?, q' |+ W
let buttons = [];1 r8 ?3 f0 Q2 r
let keycodes = {
1 R; j: q/ w( W4 Q( E9 n\" _
0: { Symbol: 0, Shift: ")" },9 X8 S M: T7 c' p9 x9 S
1: { Symbol: 1, Shift: "!" },9 b& C' ]. P; T' D) f7 [\" \# f
2: { Symbol: 2, Shift: "@" },
; C. q7 l& r# a7 I3 j, M3 d/ q
3: { Symbol: 3, Shift: "#" },
! _+ [/ j- s. O! u
4: { Symbol: 4, Shift: "$" },* I; }7 T4 F& r7 n+ X3 a
5: { Symbol: 5, Shift: "%" },: v4 n1 ^$ }% u3 R n1 [\" K) T: w
6: { Symbol: 6, Shift: "^" },
2 X! J6 z2 T6 A7 U
7: { Symbol: 7, Shift: "&" },
! e/ N: L# E& ~/ M/ V! f) {
8: { Symbol: 8, Shift: "*" },9 Q% h5 a; _( l' Y3 C
9: { Symbol: 9, Shift: "(" },
% O\" ?; Z& n u# l! m# n
a: { Symbol: "a", Shift: "A" },* R7 E, L ^1 P: P4 r: Q
b: { Symbol: "b", Shift: "B" },0 N. ]1 X/ z' X& v. _' h
c: { Symbol: "c", Shift: "C" },1 U; Z2 v' r9 V6 l, h7 ?5 D
d: { Symbol: "d", Shift: "D" },1 F9 z' K! Q2 P$ D
e: { Symbol: "e", Shift: "E" },
: L4 X9 G! ?0 q3 X5 p/ Q8 A
f: { Symbol: "f", Shift: "F" },
3 b% r5 d0 ~! x
g: { Symbol: "g", Shift: "G" },, d& S' z9 W5 C+ x# s
h: { Symbol: "h", Shift: "H" },
9 u( T4 P% s: n2 V% O) r! t
i: { Symbol: "i", Shift: "I" },
3 l- j6 v9 R$ a; p1 [
j: { Symbol: "j", Shift: "J" },( t% Q* t! _+ M% ]& _% ]) d
k: { Symbol: "k", Shift: "K" },
: `( U9 l- d: B7 v. {$ a; W
l: { Symbol: "l", Shift: "L" },
5 w: E. p; M. g+ c$ j, ~; \
m: { Symbol: "m", Shift: "M" },
4 i$ j0 t\" @' B/ O: L
n: { Symbol: "n", Shift: "N" },
# J% B8 k1 y& V3 G, l& d& J
o: { Symbol: "o", Shift: "O" },# a( {/ B- j* U+ r5 U; J
p: { Symbol: "p", Shift: "P" },7 J$ m\" \2 f$ `# {- @3 o$ I+ _% W
q: { Symbol: "q", Shift: "Q" },
$ s0 Y; T( a6 S$ w% I0 } e
r: { Symbol: "r", Shift: "R" },& g2 {8 U6 S0 O3 N5 U/ F1 ~\" r; L
s: { Symbol: "s", Shift: "S" },0 V- R$ W1 {$ t w: b
t: { Symbol: "t", Shift: "T" },
* l9 S5 M3 Z; h/ r* h2 ?
u: { Symbol: "u", Shift: "U" },
4 J2 f% i; T\" r6 D3 `
v: { Symbol: "v", Shift: "V" },
( f) g, u4 a+ n8 }1 N
w: { Symbol: "w", Shift: "W" },; ^* j; i8 A\" o: h) j
x: { Symbol: "x", Shift: "X" },
+ T# A$ T. e) D: u% t# [
y: { Symbol: "y", Shift: "Y" },, m* m; @* g9 ^3 r
z: { Symbol: "z", Shift: "Z" },4 `8 @$ T! t7 B. V9 D
"`": { Symbol: "`", Shift: "~" },; N5 u0 J* j: F1 I
"-": { Symbol: "-", Shift: "_" },
\" \7 l+ [# \ B& N
"=": { Symbol: "=", Shift: "+" },
$ D& E. G% f7 P# n9 j/ O
";": { Symbol: ";", Shift: ":" },
\" V6 {: T/ S) \
"'": { Symbol: "'", Shift: '"' },7 m/ j9 M3 w8 }/ ?+ I
"[": { Symbol: "[", Shift: "{" },4 t0 y; [* M2 N% C* F; }
"]": { Symbol: "]", Shift: "}" },
& E* \3 N( b4 |\" k; C! b
"\\": { Symbol: "\\", Shift: "|" },\" j4 f j8 r4 ]
",": { Symbol: ",", Shift: "<" },
3 ]- }\" _9 `8 @
".": { Symbol: ".", Shift: ">" },6 o! C; C* A! |6 J* C
"/": { Symbol: "/", Shift: "?" },
) U7 Y' Z- S# e- N6 m: B3 }
Backspace: { Symbol: "⌫", Shift: "" },+ p) L: d5 ?6 y$ _) d
tab: { Symbol: " ", Shift: "" },4 Q2 ^ i2 n9 B\" p- a
CapsLock: { Symbol: "⇪", Shift: "" },
. b- G, h: M- b' S. R, i
Shift: { Symbol: "⇧", Shift: "" },
$ l- l- A( Q$ S8 f) p( g
Enter: { Symbol: "⏎", Shift: "" },
* g8 I\" r1 c4 |6 X9 g\" G' V( V
Control: { Symbol: "⌃", Shift: "" },. ^9 x$ y& p\" D: F* y
Alt: { Symbol: "Alt", Shift: "" },
, S, w* a9 V+ m4 r2 b+ ~
Meta: { Symbol: "⌘", Shift: "" },
: S! T! i1 Y8 E& ^\" w& r\" A
ArrowLeft: { Symbol: "←", Shift: "" },; s4 E% e0 r' Y/ B1 m\" l\" f
ArrowUp: { Symbol: "↑", Shift: "" },
5 k7 T4 S1 P8 X. ]
ArrowDown: { Symbol: "↓", Shift: "" },. a3 T# Z- [8 a# D9 v4 c' J2 h p
ArrowRight: { Symbol: "→", Shift: "" },, C+ n* L7 a( y* X
" ": { Symbol: " ", Shift: "" },/ Q- n9 R& R' m- q& K3 @& H- d
};5 Y. r, u: S\" ^2 V1 [6 f1 j
let buttonMap = new Map();- s/ p$ c4 }- z9 N4 Q' L5 y1 y
let height = 32;
& t: s% W' ]9 Z
let margin = 8;7 c( U }# a. o- B! I
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);$ w M7 E, _# v5 O! ~% n( t. p* Y
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
& `# I: \0 k8 T# Y! U
for (let row = 0; row < keys.length; row++) {4 D2 c3 R6 @4 m% [
let x = 32;
2 z! }! E& a: P, L. _
let prev;
3 I4 D9 ?4 e- w, `- X) U
for (let i = 0; i < keys[row].length; i++) {4 O( w+ E2 {# |% f0 A4 M\" L
let key = keys[row][i];
^; `, X; A; W7 Y! D) p; [$ a; I
let width = 32;3 {: ?4 P( R\" E2 Y: V. P }# e) B) \& g
let button;
( z/ v p& f$ {- b/ D' y' L) ~& J* Y
switch (key) {/ L1 M/ R\" F+ o
case "CapsLock":9 Y! M8 H S) U) K$ G) h
button = capslock;
\" @% T( @0 |1 |( \, c
width = 64;* N# M9 Q; E3 d
break;1 U- `; a, Z7 a
case "Shift":
5 M& G9 M* _; y4 R S5 ~
if (shift.x === 0) {
- a' D, I P2 ~+ Y
button = shift;8 @, d5 [\" M\" }2 r
} else {
) [& o- q6 _8 B( u& f/ ^* ~- k
button = interactive.button(2 P$ E7 e! g6 M\" G- u, f+ T
0,
* \\" a+ c5 R+ d- g
0,
! c' B4 Z\" O: M7 A' f
keycodes[key] != undefined ? keycodes[key].Symbol : key' z* P$ S\" r2 f8 d \' L
);: l$ D b* E; ^) h
}8 ]7 u. w- C/ g8 k8 G8 A8 m% B
width = 90;
& _! ?0 g2 U- c( M\" u
break;
% v- H4 I2 ]3 ~
case "tab":0 B: o: X, j2 q H# U
width = 50;
$ _1 U$ C6 F: J% ~& z7 f. R
button = interactive.button(. ]9 j+ s$ n4 s; S
0,
# I% n: T( v/ o* _, S
0,' G3 Q* }! F; H; Z
keycodes[key] != undefined ? keycodes[key].Symbol : key
* k* ? u$ m8 G1 u7 m
);/ m$ `, V9 X! h# A9 Z, i
break;
case " ":
4 f( C7 a' }) P0 ]5 n
width = 176;1 x( g% L3 \% ^9 x, P) Z; r
button = interactive.button(
) z4 s; C3 M8 }9 r& A3 l* w! T
0,0 l3 F7 P\" Q/ O+ X5 L/ Z! O* E
0,! w8 T$ e1 P1 o; X- r8 E% t
keycodes[key] != undefined ? keycodes[key].Symbol : key) ?2 e* h. T, w4 V6 w\" m
);
4 v! v8 m3 U* ~\" b& L\" H8 O
break;; y+ U5 i3 i' K1 E6 w4 B
case "Meta":
; ?' G1 N- }: K( i0 z3 k& N8 N
width = 50;
: Y( S# i8 p, \( Y
button = interactive.button(
9 e, O9 R; o$ Q5 ?
0,
: I2 D- T. i/ n, U& Q \
0,
5 E! E7 e2 g+ b; ~\" G\" {
keycodes[key] != undefined ? keycodes[key].Symbol : key5 W: b6 k! T9 D' G\" F
);) k4 B, _/ _/ U R7 ~1 A
break;/ s$ z% L4 W6 k
default:) j9 i$ _8 \3 [1 K' z. _# a8 H
button = interactive.button(3 B5 I3 W* f* C. c
0,% x+ K6 C# A% V: ~8 j. [
0,9 n2 x- x6 Q5 x6 i
keycodes[key] != undefined ? keycodes[key].Symbol : key) V1 O. M2 q T, w8 j- V& b
);# ] k( v( D. q* l$ N% R3 {
if (keycodes[key] != undefined) {
: b5 L2 c- c. n! C7 i
if (keycodes[key].Shift != "") {
, x0 V+ r1 I _4 l! a. J# M
button.addDependency(shift, capslock);
( |: N8 K# N. U; s- P: y' l
button.update = () => {0 y$ D1 f2 E8 l2 K. O4 N g( _9 G
if (shift.active || capslock.active) {
: X1 d7 a8 X. v' R* |& H
button.label.contents = keycodes[key].Shift;6 Y2 Z+ u0 R. g5 H
} else {
+ F% G. u0 a! q+ }5 k# O
button.label.contents = keycodes[key].Symbol;* k7 ~4 u' r% y5 K- K5 f. R' U: f
}- T, H7 b( \ k2 ~1 ^/ \
};
0 B2 n; y$ E! W# ]7 Y, K# W K7 J
}
# X. p& z+ l; y: e8 a
}: ^; T+ }# W9 J3 @2 M
}6 R* \$ s9 @0 a( G% F. K
button.x = x;
n; ~\" Y2 ]! t0 |
button.y = 64 + row * (height + margin); }: T4 S' L9 g& u
if (button.box.width < width) {
5 C/ `; ^\" Z+ W5 ]8 F' Q
button.box.width = width;
' O& T+ ?# J6 S& m# l) J
}6 t% R2 ?1 d! N
let bbox = button.root.getBBox();! Z4 u Q% V/ C; t' m7 i' O7 p1 N
x += bbox.width + margin;
; F0 J) o& o9 N! h& x3 a
buttons.push(button);
: m; a- N4 G0 D' m. x# x5 @1 q
prev = button;) r* e5 s3 `$ A5 }; j0 k: G+ U
buttonMap.set(key, button);
* W# o7 z, |' l0 R! A, O, I
if (key === "ArrowUp") {: P2 j* @, G2 n) Y( n\" D' b
button.box.height = 16;; s/ g\" O3 _0 ^2 X4 `
button.label.root.style.display = "none";
* w5 q1 B2 B6 |4 O
} else if (key === "ArrowDown") {5 i O# `/ Q/ X
button.box.height = 16;5 ?: J( M. R9 B$ `
button.x -= 32 + margin;( F2 [4 S) |% K, @; J+ N- }! p
button.y += 16;
6 c/ {1 \) j1 M4 p$ q5 S, [# }
button.label.root.style.display = "none";
0 E: {. g! S; L* r
x -= bbox.width + margin;
* ?! Z6 W. T, b/ n1 Y: P
}
* v, d' X6 d3 l+ e
}
8 M\" L9 _# U5 m7 f
let right = prev.x;) s& u7 T0 h+ x\" }9 ^
if (right < 630) {4 H9 P0 U/ T! d& v) B
prev.box.width = 630 - right;2 ]. o7 v+ ~. k: y3 z7 [0 N
} ` H% q9 h( k, j% l* ~5 R
}' h) @) d, `9 I3 @) Y
// console.log(keycodes["0"], shift, capslock);
* [& t. w p* N8 a A3 L, ]
let active = [];3 X+ g4 \5 M6 Y/ V
window.onkeydown = function (event) {
7 L1 g; I. O: I- ?
for (let i = 0; i < buttons.length; i++) {+ H, a e/ R4 ^1 Q+ K% v4 }
let button = buttons[i];$ p) m3 u0 F! C/ F, o* ?
if (1 W) G% w' C/ u, V/ N- A& J( J
button.label.contents === event.key ||4 K; y D* Q2 g- ?* }+ j z8 Y' d
(keycodes[event.key] != undefined &&
! X\" Q( t\" |2 d6 b. b
button.label.contents === keycodes[event.key].Symbol)
% K: _* F) t) {' K
) {
1 K: N3 ~3 ]5 P E8 I! X
button.box.style.fill = "#f8f8f8";
8 o$ Q/ x8 |& W4 p. e& i
button.label.style.fill = "#404040";
* L! F6 n( B8 G. C
button.active = true;
/ t& W6 q2 S' U) Y' m
active.push(button);( i5 N, n, g1 O
}' {2 F0 J6 D3 E P5 O e
}! ?; j6 o, Q/ p6 P* d6 h
buffer += `'${event.key}',`;
: J\" Q0 |4 a\" r( ^+ _ p
};
' M+ } j8 k9 r2 f0 U
window.onkeyup = function (event) {
& F t, ]7 f3 W# J N\" M
let newActive = [];8 V; C, J\" B4 a2 Q% c
for (let button of active) {+ R$ ^6 v9 O; N/ k, r: p
if (
\" H# r& i! b1 i5 y1 @1 R5 J; ]5 P
button.label.contents === event.key ||
& n% p2 b3 f* g: ~. i
(keycodes[event.key] != undefined &&3 O4 v) q1 ]$ C! M& d* M4 P- [: ]5 G
button.label.contents === keycodes[event.key].Symbol)
6 E5 |\" F) [* P7 S( o! d% s+ X
) {# l0 x5 _9 e& A: F* N* o& g
button.box.style.fill = "";- P$ ?9 ^5 \, R9 u) f+ E$ p' n
button.label.style.fill = "";
- G1 S( o- N% ~( E' J/ ~1 }( ^; H
button.active = false;4 F6 G: B: M8 E. Q7 j* h
} else {
* O- i8 n0 Z8 S. V) |: c
newActive.push(button);, T, R9 Z- l, q/ @
}
8 `3 C7 U* s, Y V1 M+ ^6 Q; N
}
: ?. F. m8 Z8 m0 m( W G
active = newActive;
' ]2 ~1 t9 b: K( _! P; Q
};5 L. S* i2 C; b) ~( z5 Z- h i
let bbox = interactive.input.root.getBBox();
; O [0 |. ]- `' ]3 s6 N\" H
interactive.setViewBox(
% K- f8 A+ X+ s1 x: Z
bbox.x - margin,
2 m# {/ l$ |8 {& K8 w
bbox.y,
6 w4 Q$ x1 P [% w, d5 D
bbox.width + 2 * margin,) k$ _4 x1 [2 p, A
bbox.height& F\" y e0 `' \7 D9 B\" H3 P
);# L+ ^; W\" K8 D$ q8 l
//# sourceMappingURL=keyboard.js.map
# C' e. c! ~\" x
* R' H# T( N# ` J' E @