使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1186 主题	4 听众	2923 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>6 ] S; G/ s0 i
<html lang="en">
, p. D# }. C0 U$ _; Y6 Q
<head>8 s0 a+ n* `/ T3 A6 q% y0 a1 S
<meta charset="UTF-8">8 f0 v* x3 A) B9 g7 E& L) V$ ]8 A
<meta http-equiv="X-UA-Compatible" content="IE=edge">
\" w) V' S, E g2 u
<meta name="viewport" content="width=device-width, initial-scale=1.0">$ z& n' q1 c% h8 K# C
<link rel="stylesheet" >$ s1 _& O( |- I% t
<title>vector examples Keyboard</title>6 M! V1 J9 }7 M- h8 @( ]; T
</head>
/ `\" t! h p2 m0 c/ y. q
<body>
, n# T4 C T2 w. r
<div id="keyboard"></div>
! j& G+ {* {\" P
; v z0 T# r V; |9 u
<script type="module" src="./temp.js"></script>
% D# h/ z5 A P9 l2 u5 t8 A
</body>& [, O. w( x\" r6 u' g! g
</html>+ j0 d& d2 g; C

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
\" Q0 f' m4 O# V\" ^7 U+ L
console.log("Interactive", Interactive);: b5 z8 j; b) r/ R9 K( h$ f

复制代码

/**2 I M\" J. s# u\" i\" x
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard% l( }! [3 W6 b# W
* @description This interactive demonstrates how key board input can be used to add interactivity.7 Q, M' D; u8 A) p3 N5 ~* M* G
* @tags [input]; D/ ~+ D/ `8 F* B+ l c2 g2 l
*/( u0 U\" h/ ]5 H- }9 U1 {
// import { Interactive, getScriptName } from "../../index.js";
9 \9 d, Y7 M L( H; V4 J) z( _
// let interactive = new Interactive(getScriptName());: S i' Z# ~/ L) m
import Interactive from "https://vectorjs.org/interactive.js";
7 s0 ^0 \' R) r9 V6 i2 E5 B# f5 R
let interactive = new Interactive("keyboard");
8 p5 w* x1 d# y9 b
interactive.width = 768;& R0 @1 C# z, K\" M
interactive.height = 300;' O7 R' g. X: k6 H. x1 ?# W2 b- j: X
interactive.border = true;) u9 X; c9 w4 X7 Z\" v2 u
let buffer = "";
. L7 W3 M! `7 D* n+ P
let keys = [
1 t2 O* n$ I; B\" t0 t% S, c+ G
[( e& L& s% T- `6 [4 d; T
"`",+ E( L; x4 d9 x+ d& s9 ?; V G
"1",# z5 ]; o# ` M4 p\" t3 e1 s
"2",6 M. z/ t( u' v) _) z4 G
"3",$ } x& w5 s- x1 b4 i4 o- L! s
"4",+ G7 L* |& u: u\" o6 b& r, |% z
"5",2 @, r& ^2 M& ~7 M: p. y3 x
"6",
+ x' d6 G5 U# \* F# j- V3 ~' B u4 U
"7",% H8 n; v; z. h U5 J9 ^\" p1 G
"8",
. L; W\" I$ Z\" ^2 Q
"9",& Z8 D& x4 K8 Y; s- C7 R
"0",
& }3 p! U$ M/ m4 o. e$ |) z
"-",; U: S. S; `3 S+ v2 `
"=",
1 m% J9 j# G8 e
"Backspace",6 Q3 ^; N; x6 }2 ^' r
],3 e: Y! q2 _& g3 N
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],- p) U6 r* b% k\" g/ y8 @% w4 N
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
% ?' Z3 Y$ _( l
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],. w$ g+ q1 w3 V9 F7 w9 R
[& T6 v* A# d! R* G
"fn",
$ u% Z/ e1 c X( L
"Control",
; e0 S% t- \, W: b
"Alt",
. Y) T& Q: x2 F: `0 ]- ]; N
"Meta",
3 M/ H& P* C/ t. S1 V
" ",4 C; x/ ~7 j) o
"Meta",
- r' G1 X4 ?$ m7 \5 A3 [
"Alt",0 l- n, {7 Q) B. L5 m
"ArrowLeft",
0 V/ B3 `6 K\" a3 _( y1 C
"ArrowUp",+ L$ K: v7 t! f; ~% e P\" y
"ArrowDown",
3 ^0 ?! x+ u5 [3 @: c2 h2 i
"ArrowRight",3 r+ _& c8 r b$ m; {$ S) ^
],* Z* \! w9 g* F3 C: a
];
1 S( _6 H; K; e/ ?7 v
let buttons = [];
' ^; ~6 E# F% p' \) B- ~
let keycodes = {
+ G* y {/ [% `3 \
0: { Symbol: 0, Shift: ")" },$ x9 w8 N2 a) @( l/ ? t
1: { Symbol: 1, Shift: "!" },
+ L4 Y! u9 ]% A
2: { Symbol: 2, Shift: "@" }, K/ b( l8 ^4 O
3: { Symbol: 3, Shift: "#" },% V7 n0 C3 L0 g7 [\" i2 F
4: { Symbol: 4, Shift: "$" },
) `1 d2 g/ b% k
5: { Symbol: 5, Shift: "%" },4 G4 [% ^* @. T6 G' v5 I
6: { Symbol: 6, Shift: "^" },
/ U3 K; z. e2 X$ U) d
7: { Symbol: 7, Shift: "&" },
\" H N3 W4 K& a/ k3 n8 M( D: K. q
8: { Symbol: 8, Shift: "*" },
3 E) o, J! q' n
9: { Symbol: 9, Shift: "(" },
8 B$ U9 N9 P/ e0 ]4 z
a: { Symbol: "a", Shift: "A" },* c3 }+ X, }0 g6 q: Z# W
b: { Symbol: "b", Shift: "B" },) F& \) D n# B. E9 E% ]
c: { Symbol: "c", Shift: "C" },
* o1 p+ J: [# @0 i7 ~\" K5 g) O4 M
d: { Symbol: "d", Shift: "D" },
1 Q7 p2 @: h Z+ ~; [2 Y- V' f) @+ \
e: { Symbol: "e", Shift: "E" },
: y4 r/ s; Q\" } Z
f: { Symbol: "f", Shift: "F" },+ n, l! g/ p1 ]; g5 r
g: { Symbol: "g", Shift: "G" },. S/ B: t4 Q1 Y( |
h: { Symbol: "h", Shift: "H" },
& X9 n/ R7 n4 a\" B$ B$ n
i: { Symbol: "i", Shift: "I" },8 v) M1 z* d8 ?7 ?7 b
j: { Symbol: "j", Shift: "J" },
$ b2 l* C9 z, a3 o/ S
k: { Symbol: "k", Shift: "K" },
2 ~1 {' r4 G, J( A
l: { Symbol: "l", Shift: "L" },, a\" u- u, [& K! K( l- w1 i
m: { Symbol: "m", Shift: "M" },
! D6 ^+ X3 Y! y* v0 l\" P( ~
n: { Symbol: "n", Shift: "N" },
. t. {# v! `% a- t1 ]+ }
o: { Symbol: "o", Shift: "O" },
\" e' G0 R9 g% J6 e
p: { Symbol: "p", Shift: "P" },1 Q3 \: m, ]9 j' I
q: { Symbol: "q", Shift: "Q" },* R/ G\" ^1 u- Z2 u1 T/ T& i* N
r: { Symbol: "r", Shift: "R" },
- E9 o\" t\" o+ B/ r9 d2 b
s: { Symbol: "s", Shift: "S" },
6 n. _4 c# i6 a0 U1 v: x) J
t: { Symbol: "t", Shift: "T" },
( r' u6 |$ M6 A9 e
u: { Symbol: "u", Shift: "U" },0 t% P6 y7 u$ [, E
v: { Symbol: "v", Shift: "V" },
& ^- p v$ l' }
w: { Symbol: "w", Shift: "W" },
t4 t% B$ `' W
x: { Symbol: "x", Shift: "X" },
& m2 G( z. {4 s1 K% g
y: { Symbol: "y", Shift: "Y" },- [. r$ J s/ N
z: { Symbol: "z", Shift: "Z" },
9 ^- c- I0 {( K
"`": { Symbol: "`", Shift: "~" },
/ ~7 V8 y+ }; q! S
"-": { Symbol: "-", Shift: "_" },2 Q/ w8 j& R\" I3 p% P1 h4 g0 z
"=": { Symbol: "=", Shift: "+" },5 o9 J* c7 f- ?# P8 `0 N7 h T
";": { Symbol: ";", Shift: ":" },7 W; [+ t' Y2 c/ m
"'": { Symbol: "'", Shift: '"' },
\" `9 O\" Y1 ]; E- j. T, f
"[": { Symbol: "[", Shift: "{" },+ T\" |/ {# j2 f
"]": { Symbol: "]", Shift: "}" },+ ^+ \3 ~' v/ F\" N
"\\": { Symbol: "\\", Shift: "|" },
* G; Z$ I& p6 Y- c' I+ H
",": { Symbol: ",", Shift: "<" },
b2 t+ S; A' P( _3 K8 ~
".": { Symbol: ".", Shift: ">" },/ u0 w H* p8 W% P j7 u$ p
"/": { Symbol: "/", Shift: "?" },. B# |* G3 ]0 n: y1 F\" ?# Z
Backspace: { Symbol: "⌫", Shift: "" }, ^# [+ H- P6 L8 P
tab: { Symbol: " ", Shift: "" },1 x& A( V2 |' G: ]2 p& y
CapsLock: { Symbol: "⇪", Shift: "" },
! w2 u! \0 h* ^# z
Shift: { Symbol: "⇧", Shift: "" },
+ k) G$ \$ e5 T2 U0 q1 d
Enter: { Symbol: "⏎", Shift: "" },
! I. }5 B4 V$ H
Control: { Symbol: "⌃", Shift: "" },9 g! x }1 ^: h
Alt: { Symbol: "Alt", Shift: "" }, z- }6 t9 l7 O$ u: L! E; f( a6 T4 M
Meta: { Symbol: "⌘", Shift: "" },
' m2 r, M X F& N1 ?* g
ArrowLeft: { Symbol: "←", Shift: "" },/ `# ~) H% H% F( A: e
ArrowUp: { Symbol: "↑", Shift: "" },
$ @+ d' A0 ], j* N0 c
ArrowDown: { Symbol: "↓", Shift: "" },. ~ a# ^7 }! f4 y9 `8 K$ O
ArrowRight: { Symbol: "→", Shift: "" },
q8 N( c2 c\" l\" k
" ": { Symbol: " ", Shift: "" },
- M! V7 G( {1 G% v( O! ]
};
5 o( [0 i! [; s a
let buttonMap = new Map();- x8 I4 T2 U/ G/ k8 z! ?5 J
let height = 32;: ]4 q0 n# g2 H9 ]\" u
let margin = 8;
) h3 W6 S6 F9 r$ l0 P+ E
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
) L9 X# X7 ?0 Y& ]! {5 o
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
- {4 I: Z+ p( c9 W$ P6 ]7 q% w
for (let row = 0; row < keys.length; row++) {
9 B) K7 F\" {7 s/ A1 T+ f
let x = 32;
. Q4 g! H9 J+ }# j6 Y; M
let prev;) W4 g0 Q& Z; f! I( r( ?
for (let i = 0; i < keys[row].length; i++) {- l# U+ H1 t) C( Q8 N! t
let key = keys[row][i];
9 h; W/ S& Q3 F* O3 `4 v( e, v
let width = 32;
4 v4 b$ @7 u( Q3 F# d
let button;\" O\" ^& ]3 X5 m u* d0 k
switch (key) {
; @$ z\" _: R& |, K8 [+ a
case "CapsLock":
4 p4 `+ _0 _1 @0 Z& R
button = capslock;
6 h$ d- x- U+ e F9 {
width = 64;
3 F9 G. P9 T0 m z/ J& A* g6 _8 w
break;# o% O; K) q\" H% W* P; C
case "Shift":5 v B9 q; L o: ^5 ?
if (shift.x === 0) {
\" \# ^9 Z1 \ k& S7 X. E( G
button = shift;; x! @; S% c9 q. b
} else {% p( R( q3 Q. @( V* A- @
button = interactive.button(% B$ Z3 |6 G7 C2 M, _' \6 t
0,) [ L2 n2 j7 W8 ~
0,& D; ?3 F. i' M) @1 H
keycodes[key] != undefined ? keycodes[key].Symbol : key
7 Y# `& J; N- b2 r. w1 o
);
; B! K9 g6 I) D* r# @* U6 H
}
4 t4 u% b& [& H1 n4 _, d
width = 90;
# @- w9 k: _7 I {5 Y
break;) N+ h4 [7 `0 q# G& c9 c
case "tab":- r/ y$ N$ Y- F5 y/ D
width = 50;: |/ e7 s T2 K$ b
button = interactive.button(7 F9 f) @3 [\" u! @4 f5 A
0,
( q9 S3 J1 `% z5 S; W
0,
& f$ Z& J) V$ l+ f. ?1 y
keycodes[key] != undefined ? keycodes[key].Symbol : key
);( H- `- s& v, y8 }9 n
break;
; S\" D& n' |4 ^2 d( E7 v\" n4 u
case " ":
! {; {, W) E7 r\" E& H
width = 176;- a1 u' t h! N\" l8 q9 m; l
button = interactive.button( S6 [% |8 v+ F\" R/ z3 {5 b
0,7 d6 [8 |5 U2 W: m3 e! N1 [: z
0,
; y( l. U Y8 c
keycodes[key] != undefined ? keycodes[key].Symbol : key
! [9 u' r( T5 g- V% c+ s9 o
);
: T\" |! N2 _5 y9 E( T\" g: {' H2 F
break;! Q4 g/ z4 d1 j D3 R5 N; A
case "Meta":
3 y3 J4 b8 h$ v
width = 50;. s7 e% }* p% Y
button = interactive.button(( }+ c- G5 Z\" l
0,$ c( ~$ \/ T. n( \3 j
0,
8 _' J6 n% T7 ? m7 D- V8 M
keycodes[key] != undefined ? keycodes[key].Symbol : key
/ }6 a# x: g2 n3 E
);
6 O3 B# }, u) x7 D7 {1 H
break;
7 p w% g6 h9 ?3 [: f ]
default:
, f# \: Q0 D; c) ^
button = interactive.button(3 h1 D- N, e) C6 }/ x( I
0,2 v, t9 I7 l( Q
0,
: t' l1 k% `8 M {5 C$ b2 G
keycodes[key] != undefined ? keycodes[key].Symbol : key
1 u8 F6 T\" e/ q+ d9 t3 g. J4 f
);
, m# V% D- @7 N( j, }. p$ d
if (keycodes[key] != undefined) {7 }! R7 P( u! o% a t; r5 [9 c
if (keycodes[key].Shift != "") {
8 c8 C1 i1 D3 T6 I, V: J) \
button.addDependency(shift, capslock);
& a6 a' V8 k3 _4 N- r
button.update = () => {
. d2 q* w4 p% i% ^8 a T' [- ~
if (shift.active || capslock.active) {
8 J1 g& n\" T- q! B) b5 q% n, b
button.label.contents = keycodes[key].Shift;4 Y; T3 U7 j0 o* s/ I' z' y0 g
} else {
3 P9 @, z$ j% k6 d# f
button.label.contents = keycodes[key].Symbol;
0 y; N\" d2 s& q1 y5 n8 n1 ?7 @
}
3 n' F5 ^3 Q7 U\" s9 b, | A) R
};
* t- q) ?: q. T- A! x
}
% V$ r; V7 i7 S! p\" {, ^: o
}
6 D3 G X8 G\" k9 b( p
}
% V7 R* ]/ ^7 q* I% ?* W
button.x = x;3 j& Z9 j, L- o B7 `1 M
button.y = 64 + row * (height + margin);* s5 j+ s% X; f* C- k, w. ]; A5 n
if (button.box.width < width) {- K1 z4 S\" g$ A0 K
button.box.width = width;: R\" W4 f8 L' d: {. ?, O
}' k4 f6 C, r0 D* i
let bbox = button.root.getBBox();
% x! L3 Q; Q' l* [% n/ ]; ?1 {
x += bbox.width + margin;
9 [4 v3 P& @4 F6 v. `
buttons.push(button);
+ w) m1 J; k' h. C4 l2 m& P
prev = button;) }) e( d) W/ v1 v
buttonMap.set(key, button);1 L C3 @! | z0 m
if (key === "ArrowUp") {
1 I+ X T' v T; |
button.box.height = 16;9 E; @: }6 G) } T
button.label.root.style.display = "none";/ v6 Y% L( L% W
} else if (key === "ArrowDown") {
0 [- d5 `3 z+ _2 l8 J P
button.box.height = 16;% R) ]6 E9 X2 D* v: [: Q
button.x -= 32 + margin;1 |* t6 O4 p, a+ U% l
button.y += 16;
# S; S$ F. e: Y+ C
button.label.root.style.display = "none";
4 D- O/ i. m5 C0 c
x -= bbox.width + margin;
0 S9 H; i a2 X' w! H8 H+ r$ M# Z
}
; s9 z( T& s) s# p2 O
}
6 z) G* O+ B; t8 A, t: K
let right = prev.x;% ?& _/ `, i0 C
if (right < 630) {
5 }) N: X% i. o3 b/ p/ R4 t
prev.box.width = 630 - right;
5 F3 ~) ^4 H4 }+ c
}
: z$ K) d; t! Q: Y1 t; S0 Z
}, G5 r% }- G; x. W6 F2 }3 C% e
// console.log(keycodes["0"], shift, capslock);( c3 n' m# Q7 c6 h; V
let active = [];; D T6 p$ O6 y4 o+ G6 f# C
window.onkeydown = function (event) {$ g' {! k1 T' M& Y) J
for (let i = 0; i < buttons.length; i++) {. y Y( q, `4 Z3 s, z; B7 u B1 b
let button = buttons[i];
! S* a% ]- i. z. Z
if (
; w# l1 J3 q\" k9 g# N6 s
button.label.contents === event.key ||
$ \4 ]# e( j6 C8 A4 n8 {
(keycodes[event.key] != undefined &&+ ?\" J* N/ l1 o3 |4 c5 ]2 }/ M
button.label.contents === keycodes[event.key].Symbol)
\" h# `& R3 g( h7 Z. _' [
) {7 ^& P8 R2 p9 q; O4 y5 S0 z0 B
button.box.style.fill = "#f8f8f8";
9 w\" A0 y& z/ h6 ^
button.label.style.fill = "#404040";
) n; S0 d |6 [! i: S* P* P
button.active = true;
* r3 n* G7 j# h; n1 v `- m: O( `
active.push(button);
! J6 ?' F3 d6 {7 {( }& c! U
}
, k) s P, h- \$ o0 L$ ~
}2 L, j: @' g1 {: c: Y, \9 u' Y: ^
buffer += `'${event.key}',`;% F5 ]) ?- Q( P, z3 }% a
};
6 Q8 F) Z4 }: O. ^3 G! C, g' E
window.onkeyup = function (event) {% R# J1 `+ Q* t6 f x: ]
let newActive = [];
9 ~9 ~8 H2 K3 X
for (let button of active) {- l% G4 L- F. t X7 F
if (1 p# _. l6 p. x# x) R\" J& F
button.label.contents === event.key ||
$ m( V7 H& N& p
(keycodes[event.key] != undefined && V0 s7 ^& ?: y) L: R
button.label.contents === keycodes[event.key].Symbol)
# Z0 S! a( ?2 r
) {
. l5 |! H! `& R% Y% l( w( J
button.box.style.fill = "";0 o' w* P* `1 [) N- R( U
button.label.style.fill = "";; g' J% ^' Y: R0 I
button.active = false;: x1 r; Y3 ~) F. P; N
} else {$ s+ T& d0 \! ~1 U$ T& m
newActive.push(button);* m$ {* N: ~( O, O T* s
}( P5 }7 I& a) a\" o
}
$ c% F% M+ |$ p3 a6 y7 b
active = newActive;; z* i; F: }! _' ^8 z$ M
};
& X9 O2 H0 ]+ P% `4 X% H
let bbox = interactive.input.root.getBBox();
2 |8 C7 R' I& a- m7 l A
interactive.setViewBox(
: Q3 A/ S( m& n\" r) u- n
bbox.x - margin,& j$ z+ M0 Q9 v7 b) }$ ~1 Z( ~
bbox.y,
- u6 S0 _( Z- u% E3 S# u3 u/ q1 M
bbox.width + 2 * margin,
5 u: r4 b1 n+ ^ t* p p
bbox.height0 Z6 G$ i, j& H8 r( Q
);
2 x9 L6 ?3 q# b$ T\" y- A
//# sourceMappingURL=keyboard.js.map8 D% x2 p, ] F
$ d: @0 ?' o |- d% G, F3 L4 ]