使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1186 主题	4 听众	2922 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
, S8 t# G2 c6 F6 Y/ X
<html lang="en">( v1 A; i% [& q8 D1 A0 W
<head>
* C' N: x+ Y3 B% X- Z
<meta charset="UTF-8">) i2 g, E* {3 ^! {$ s
<meta http-equiv="X-UA-Compatible" content="IE=edge">
4 C$ x; I7 F( ?- p
<meta name="viewport" content="width=device-width, initial-scale=1.0">
\" h) Q6 T8 z2 l$ i: f
<link rel="stylesheet" >
1 f/ k9 J' w M* J
<title>vector examples Keyboard</title>* f* g* ~9 {! e$ m/ y5 E* C3 p) s( o
</head>
0 [, n+ p, R3 ~\" V, M3 h1 F
<body>
/ E9 \\" n\" K+ E J( h+ W& P
<div id="keyboard"></div>* |& l8 v1 ?$ X! m9 t, J' Y3 P
! g6 P3 M: ` s. q
<script type="module" src="./temp.js"></script>
6 g4 u1 h! F% S) O0 k: h
</body>5 x; U4 w; s6 v: e. z\" ]
</html>* ?0 k+ ]7 Y/ ], q: s/ }1 I7 |\" I

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
, q# I5 n6 q' ]6 U) E# ~0 j
console.log("Interactive", Interactive);
5 i# R* w: R% s- M

复制代码

/**4 t\" b4 ^1 X9 g. C
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
8 E1 t) u9 |4 Z, ?
* @description This interactive demonstrates how key board input can be used to add interactivity.6 }3 s4 q8 Y) y) K3 @4 j' M! Q% W; N
* @tags [input]5 K7 x5 `: D6 H' e
*/4 v* Y: i; p9 @) D. B
// import { Interactive, getScriptName } from "../../index.js";& S- P3 r\" O6 j! u
// let interactive = new Interactive(getScriptName());
. E% ?9 Q& ]: {, Z6 w+ d- v6 j
import Interactive from "https://vectorjs.org/interactive.js";
' C& B: Z$ U7 `\" ] B* C
let interactive = new Interactive("keyboard");
( R, E C0 `5 {3 R
interactive.width = 768;
8 j& Q5 b C; C0 C9 x& H% \# _
interactive.height = 300;
6 u( l& n) u$ a: M4 O5 c' ^% A
interactive.border = true;4 i6 N8 e4 y( v h- {. u. U6 W
let buffer = "";
! m8 j. n' v4 [% d/ x1 x( k- }
let keys = [
0 x$ ?! C& ~$ g9 Z; r
[$ {) M7 L! e( I) l' n
"`",1 `1 b! {1 ^' A% Y ^. d0 W* B% g2 x
"1",
, b) f! V# k4 X) Z: U6 @( U6 [
"2",
2 p+ y9 Y0 |* n2 ?
"3",) h3 P- }' K. y- X1 g0 ?$ R
"4",
/ c) i$ n3 q! b/ _4 ^- w4 Y
"5",8 C& C6 ]. `) ~\" C' l
"6",
2 w' N. z7 z6 m' w5 W. ?! c
"7",9 v: U1 o, j. h: {
"8",
) _1 V7 Y t3 H
"9",* F8 n `$ {; x5 |+ R( n
"0",; u( I: z7 F9 `& e6 z! }' K
"-",
; u( m9 ` ]& A% [! K; ]- U
"=",
! s& B7 X* [1 a3 C: ?
"Backspace",
0 u L2 N1 n, s7 x k: g\" ?, y1 p
],# f- U2 x( _$ r6 S; M3 O: e
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
& ~8 }5 I8 D/ b, o q$ x0 b
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],, ?& T& k& R# `
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
; a8 E M% o1 n0 [3 q
[
\" I3 e [, f1 {' J! K
"fn",
/ r& S m* X: ^( D6 O- U: S\" q
"Control",: |( S/ T* b5 E% ?4 P1 Z) W. O6 l
"Alt",
\" a1 p6 U1 i6 }; X\" n. R1 A6 @
"Meta",* t4 D# g* Y3 [+ ]' O
" ",0 T# c( c, p+ D0 q# u% u+ H, v
"Meta",* Q) G( J( x7 {. o& y p8 c\" T2 g. p\" u
"Alt",
8 n( t s5 d1 K
"ArrowLeft",
9 R3 E& D6 q# @1 b( j' B8 R Q
"ArrowUp",/ [; @. l$ E% H& ]# L5 ?* ?4 X
"ArrowDown",
3 I) C) K( ]/ n3 s- w# R7 |; M# M! p
"ArrowRight",
# R+ o$ N2 a& _- A: U/ a' s$ x- o
],
& v1 f# V1 q. T8 J0 b
];
$ P# j% i7 {& B4 u7 X% P: O
let buttons = [];
$ j, Z+ H4 _1 r# [9 g! j5 W
let keycodes = {9 i1 U2 T( }, d. s4 X9 E& Y
0: { Symbol: 0, Shift: ")" },* Y& G$ b9 Q; S\" t- x
1: { Symbol: 1, Shift: "!" },
' r/ E; W7 B! q- F
2: { Symbol: 2, Shift: "@" },
( h! B3 y j\" e& w) T) i
3: { Symbol: 3, Shift: "#" },. k4 _/ W A o a' H
4: { Symbol: 4, Shift: "$" },
5 {; T; {7 b\" Q; ^
5: { Symbol: 5, Shift: "%" },
' L# t- Z\" p# g2 v( I9 K7 T
6: { Symbol: 6, Shift: "^" },% v2 n- Y( U3 M/ X; ]
7: { Symbol: 7, Shift: "&" },: ~0 I* X/ r2 v3 { E% R/ f
8: { Symbol: 8, Shift: "*" },
, F' ?, g4 `) i7 H9 D6 k% I5 k
9: { Symbol: 9, Shift: "(" },2 m& E! Q, x4 w9 u) Q
a: { Symbol: "a", Shift: "A" },
, T' [5 w8 s\" Q1 Y2 E
b: { Symbol: "b", Shift: "B" },0 W% B; p/ J! \, Z z' q2 U
c: { Symbol: "c", Shift: "C" },
3 \0 n8 Q6 B+ `3 a, t; r
d: { Symbol: "d", Shift: "D" }, ?% \& `: \0 P) g0 E+ R% h$ f
e: { Symbol: "e", Shift: "E" },
) |3 t$ i# s4 i$ |. S% G% I# n4 J' E# q
f: { Symbol: "f", Shift: "F" },' }! K8 B( ^\" v9 e. n, p
g: { Symbol: "g", Shift: "G" },
; r& k/ ^& J1 }$ ^\" U; O) y
h: { Symbol: "h", Shift: "H" },4 f- W9 S- K) m- s2 }
i: { Symbol: "i", Shift: "I" },, z5 |# p0 i+ c) _, I5 a0 q
j: { Symbol: "j", Shift: "J" },2 ~: m4 X( l/ H; W7 q( E3 J
k: { Symbol: "k", Shift: "K" },: K- \/ ]2 `+ `# j4 a6 i
l: { Symbol: "l", Shift: "L" },
- F& G+ b/ [% Z. s) x; x7 {\" @
m: { Symbol: "m", Shift: "M" },; `, Y* ^7 `. f2 f7 H, Q
n: { Symbol: "n", Shift: "N" },
6 e: I7 R3 x* H\" L3 x4 n
o: { Symbol: "o", Shift: "O" },
$ E+ G9 ~3 k9 k3 ~; ^5 j
p: { Symbol: "p", Shift: "P" },
( S% `+ q) A! i* i( ^1 M
q: { Symbol: "q", Shift: "Q" }, {. f% F3 n& h# V- p
r: { Symbol: "r", Shift: "R" },
4 p1 @; m1 C; b
s: { Symbol: "s", Shift: "S" },) i+ u4 D3 k( V: b9 O* h, }7 M
t: { Symbol: "t", Shift: "T" },
8 a& m! Z1 r7 V- \6 b5 E
u: { Symbol: "u", Shift: "U" },4 ?+ x) k- e' b\" P2 n7 d
v: { Symbol: "v", Shift: "V" },, I* n\" f' f\" G. y8 g' P# g4 x6 ~
w: { Symbol: "w", Shift: "W" },
4 L& V& r3 I5 d
x: { Symbol: "x", Shift: "X" },
, J: o0 p) W* Z+ n\" [! }% e
y: { Symbol: "y", Shift: "Y" },
1 G$ S; O\" ~8 P, R5 ^
z: { Symbol: "z", Shift: "Z" },
U+ k; a) u+ ^$ F% H$ B7 a\" O
"`": { Symbol: "`", Shift: "~" },
, l0 N$ m# I6 M+ g4 m
"-": { Symbol: "-", Shift: "_" },; }6 i% Z\" n- m. k4 g7 l8 M
"=": { Symbol: "=", Shift: "+" },- b4 ~4 n2 X- P2 ~1 D; C# }
";": { Symbol: ";", Shift: ":" },( f\" w- q2 A( ~3 w
"'": { Symbol: "'", Shift: '"' },
+ N( k) E1 M* {
"[": { Symbol: "[", Shift: "{" },
4 |9 V- h2 A; }) W9 h
"]": { Symbol: "]", Shift: "}" },/ e8 i2 S\" ~ @- _, z
"\\": { Symbol: "\\", Shift: "|" },
: V: L1 l2 O! g4 K1 q; I9 q
",": { Symbol: ",", Shift: "<" },
* N; Q, t/ r# m0 K# p# e% `; l) ^
".": { Symbol: ".", Shift: ">" },
3 W& w9 X% M0 T6 {
"/": { Symbol: "/", Shift: "?" },& e! w3 d# `. ]- d\" a/ D; n$ c
Backspace: { Symbol: "⌫", Shift: "" },& U* ]) ~1 A+ _3 E# Y5 d5 ~, B
tab: { Symbol: " ", Shift: "" },2 C3 D& e' q. C( R2 i: d
CapsLock: { Symbol: "⇪", Shift: "" },\" E6 T% m4 H- Z; o3 \: o
Shift: { Symbol: "⇧", Shift: "" },, b8 @; T. F) R- N
Enter: { Symbol: "⏎", Shift: "" },
1 F/ R' B- H. w* e, \( F
Control: { Symbol: "⌃", Shift: "" },8 G; w6 ~! @5 X1 k. A# V
Alt: { Symbol: "Alt", Shift: "" },
0 D, t0 o G, }3 J# Y1 r
Meta: { Symbol: "⌘", Shift: "" },
, X# d6 q. f$ f2 }) x
ArrowLeft: { Symbol: "←", Shift: "" },
% Q# [' p2 |6 Y5 Q0 [
ArrowUp: { Symbol: "↑", Shift: "" },
: b) w2 a9 y' u! Z% V! p2 J& ^$ s
ArrowDown: { Symbol: "↓", Shift: "" },
4 B# o3 b$ h, \% v/ Y- D+ O% D
ArrowRight: { Symbol: "→", Shift: "" },
+ Q( T0 }$ }% O
" ": { Symbol: " ", Shift: "" },
8 X* C6 V/ ?5 z0 p* B# d0 k# _! v
};5 i) Q/ |9 d3 @0 E7 q* ^, V( V) }
let buttonMap = new Map();4 m/ l' S8 P3 F( V- s\" i
let height = 32;
. } T( p7 A! I0 N4 `) e
let margin = 8;# q s4 d6 N/ Q4 ^# C: s7 B- f
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);- I6 A. D' i: k( ^5 C9 d) m5 g
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);/ g: @! S6 J- }/ w1 \5 Y
for (let row = 0; row < keys.length; row++) {
- Y) L# r! z9 M9 b' s( d
let x = 32;- c$ Z0 C( ^0 n' y9 d4 t' C
let prev;
3 O5 r/ @ R$ |% L7 K
for (let i = 0; i < keys[row].length; i++) {& u2 D# z+ r9 @$ b% |( M% E
let key = keys[row][i];
$ f4 b8 C& l+ A2 C\" R+ s3 P: Z
let width = 32;
) P; j9 |4 X) m, s3 j3 \% }
let button;
, O8 E- r v) b- v1 j# m. I
switch (key) {
A9 B5 i4 B: X: j3 T% q5 r: p
case "CapsLock":
+ T D, C) Y7 x; a2 p. Z
button = capslock;' [\" Y' r: V2 n1 d4 m
width = 64;0 e2 F$ E, C* Y% F
break;
* s6 F\" L9 k3 j. D, L( Q8 D8 R1 u$ m
case "Shift":
6 J: B6 x( G. q% i2 d' U
if (shift.x === 0) {& ^) ~, \% O, l* P+ f0 o- @
button = shift;
* @( H% F: ], z7 {- Q! X\" I. ?! `
} else {0 }5 o/ |2 `9 d+ B) T, B0 G( b
button = interactive.button(
, C0 b z3 `( ^: s; j! k
0,% g. l; z! B' Y
0,
: U/ c. X& m7 m! f% \: b/ M8 `
keycodes[key] != undefined ? keycodes[key].Symbol : key
/ p0 ~0 d C3 G5 M4 b9 }, e
);- E/ g8 ?* Z/ {
}$ |) C+ y; g- F2 n7 ^' R3 t
width = 90; W# N+ E9 s, n
break;
: [) t5 f; B) M! x6 Z. _# P# h
case "tab":
& @' J+ r\" ~3 S( H/ Y4 j1 T2 W+ X0 o
width = 50;
5 |. U1 k- T0 ]( \) s- G
button = interactive.button() U' t, P/ `6 f2 C/ |
0,
% z) Y( g( j) N9 r3 \: Z; ?\" X
0,3 o0 Z; h7 M, ^3 I9 x6 E. ?
keycodes[key] != undefined ? keycodes[key].Symbol : key* N0 a4 Y9 @, [( t$ W& t6 I6 P8 V
);2 Q/ {- X+ A( f: @
break;2 [( V& d# \\" f
case " ":
7 O g$ u+ k' j3 h8 Z1 r R
width = 176;1 L h. u( h% Y/ w2 s# t
button = interactive.button(
! h, U. ]5 p* I% s1 O
0,
4 b5 A0 a5 b- D) a- E4 J: k8 {1 v
0, U9 A) [+ f# b$ ^
keycodes[key] != undefined ? keycodes[key].Symbol : key
6 k7 P6 K( t( u ?+ i
);
# n0 p- u9 `5 R4 Q
break;
' {1 Y% r( l1 [6 t
case "Meta":
) p- P# n* J3 V
width = 50;/ k; o4 ?' |+ }! i2 {0 A\" s/ x+ Z
button = interactive.button(
+ C; ~# q$ Q8 u; V
0,2 @- s5 O8 g; N6 U! k* o6 m
0,' x, n% A- d& A2 l% |! z% S2 I
keycodes[key] != undefined ? keycodes[key].Symbol : key0 M2 G) ?' F; _+ p
);5 W. R! P* X' E) P( G- W4 u- i
break;4 O; W6 W; k% e1 H |
default:/ a' m3 c( O1 Y% x4 I
button = interactive.button(
- b8 x( [, c1 q# x# i, t6 p7 x
0,/ Z, C, ]. a+ Q6 V. ?/ j
0,' }2 J% X- N- M8 B# ~\" Y6 O
keycodes[key] != undefined ? keycodes[key].Symbol : key H7 K, U2 t2 k$ U\" Z3 J2 X7 X; a
);
+ [1 j0 I% J\" y! b3 S/ E! K' ~% q% P
if (keycodes[key] != undefined) {8 y! U9 A8 o' x, Y4 m1 p
if (keycodes[key].Shift != "") {8 v( n6 Y1 p% ?7 o' d/ B
button.addDependency(shift, capslock);1 J# I- b3 ]8 \7 n! C ?9 Z
button.update = () => {6 |( d0 ^. k; I. ?, D- c
if (shift.active || capslock.active) {
8 I3 {9 O7 u- S- k) f7 j# }! _
button.label.contents = keycodes[key].Shift;5 {: {/ a; C% t, \# q9 }2 ^
} else {
$ c0 I( I9 G, l& G4 X# n6 V
button.label.contents = keycodes[key].Symbol;( Z C2 v: k0 u& R( I# b) D
}
7 C\" ?/ @( ], q% r
};/ ]/ e2 t* r9 ? A
}
^2 z- b\" P' `6 z# S' g
}5 Z4 A% e8 ~2 F% R
}
2 c7 i7 j/ M' q% t' ~
button.x = x;4 S6 H; z: \) n! s7 o
button.y = 64 + row * (height + margin);, r& B2 O0 L( D% ~% N$ I
if (button.box.width < width) {& X4 ~6 f2 Y- k* N
button.box.width = width;
2 n1 R! e\" v0 f8 E/ v/ |
}
% d; f- U! B {4 z) p! F5 {2 v
let bbox = button.root.getBBox();
\" g2 z% Y9 f+ ?4 ~- {
x += bbox.width + margin;
) w5 f+ ]+ s/ ^! C$ K: E( h
buttons.push(button);
! N( X0 z c) h0 u
prev = button;' C# h) ?& ^& Y4 z+ C6 ]( h. f
buttonMap.set(key, button);! S- l% _- N! r. p
if (key === "ArrowUp") {. z( @8 G4 m$ t( T( M: @6 f7 i V
button.box.height = 16;
& t5 O/ v, L6 }
button.label.root.style.display = "none";
5 \/ y: }; N+ O* Z' O
} else if (key === "ArrowDown") {
; T2 a: K+ R0 H4 `
button.box.height = 16;
. z- ]& X) K' _# U
button.x -= 32 + margin;
9 L+ O6 S. _& j7 g
button.y += 16;
( b. s h& L\" |/ q$ ]0 Z
button.label.root.style.display = "none";& j* V/ F6 e9 O# Q4 ]
x -= bbox.width + margin;8 Z; S T1 e: H- L
}- |5 m- [# I6 m
}! c3 v\" Y% N1 Z! X- _9 S# y
let right = prev.x;8 D9 p0 b5 O6 E1 i0 M
if (right < 630) {
9 x. q' J8 B, f! J
prev.box.width = 630 - right;( @2 a# Z& z5 J+ h7 S
}2 O% S' e# e; T: C! Q+ ^
}
3 O: y9 c0 ^* S( r& p
// console.log(keycodes["0"], shift, capslock);
4 L# U# N+ V$ N& P/ l7 t
let active = [];
4 v; S! J& x# `/ X
window.onkeydown = function (event) {
3 T+ R ^2 q- E4 N& h5 b) s
for (let i = 0; i < buttons.length; i++) {
; }\" H\" I2 }9 t) Y% z
let button = buttons[i];. s$ n\" Q9 ]( n' b: A( n) V
if (
& @9 u/ f& \# g1 F( ?2 @( q
button.label.contents === event.key ||* T5 l: K' v! W: i a3 s
(keycodes[event.key] != undefined &&; k4 [6 Q3 R/ X/ y( u- ^2 r. [
button.label.contents === keycodes[event.key].Symbol)
; K, {# z4 A k2 x
) {
# k$ c\" O5 l' w9 G$ }1 {, ^
button.box.style.fill = "#f8f8f8";\" o. i+ ]' s, G' }5 a+ C1 \1 J2 ^3 E
button.label.style.fill = "#404040";
4 ^8 ]3 B( o* B: M
button.active = true;
% W) F* r: Z6 d7 c- t
active.push(button);
4 k# |& a+ J( q
}
* C, r2 {/ |6 {9 _ P. c
}. F# x4 H, y% y5 b3 S: {
buffer += `'${event.key}',`;9 n. v, G2 T3 v w) E7 {\" @( W
};
# k2 d x+ R1 t2 e% I) _
window.onkeyup = function (event) {
3 o+ [/ ]) V1 ?3 L0 v5 \3 h5 M
let newActive = [];
$ Q6 G l( L* n% n' {0 K; Y
for (let button of active) {/ Z3 o; `$ E6 o8 B1 ?8 J
if (: l\" g% r0 B3 g8 p3 [: U8 n
button.label.contents === event.key ||
$ _( L) X, q$ Z
(keycodes[event.key] != undefined &&\" P- {/ U6 ?* P/ j8 _\" \ {
button.label.contents === keycodes[event.key].Symbol)
) r' d& [. {6 E7 N
) {
p& R1 u; r7 s
button.box.style.fill = "";
/ V; T/ r( `. B0 g
button.label.style.fill = "";6 g# c% U, d- k' d. z% z
button.active = false;# c; v* I( \- y' c8 Q\" Q' M3 x
} else {
6 x# c4 Z! z8 {: S& U/ ?
newActive.push(button);
g2 _+ F0 q4 J9 B$ h) Q( f
}
% `$ Q/ l$ V% _0 o$ \
}3 E! u+ c( y/ M) X: J4 `) e) J, \
active = newActive;* h- ~0 r3 e7 v5 S A
};
2 b6 D# |3 b3 z
let bbox = interactive.input.root.getBBox();! y2 {% b5 i$ T6 A: D! M5 e+ O7 q
interactive.setViewBox(
# n1 ?! e( z% Z. @
bbox.x - margin,% W# T; M! I- f+ w7 W
bbox.y,
( T4 z. ?6 X' y7 O# m
bbox.width + 2 * margin,# x) c2 @: }( o) w! {0 c* i
bbox.height, X; E F9 C5 d3 u
);
4 G) u) c/ Q' \8 C
//# sourceMappingURL=keyboard.js.map
\" S7 W7 N$ U) I; q
|& B& }% h7 I\" j