使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1186 主题	4 听众	2922 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>; V; M$ e' E, E$ f
<html lang="en">) ~- A# W! \ |\" n
<head>2 c. ^* o+ c: J1 D; ^& w8 [2 u
<meta charset="UTF-8">
J. w) ~! K I+ b6 M; q4 v, j
<meta http-equiv="X-UA-Compatible" content="IE=edge">
% h5 M& g9 z R' e$ Z1 V, ^, N' s
<meta name="viewport" content="width=device-width, initial-scale=1.0">, E, C! k9 o) J( Q& A
<link rel="stylesheet" >3 s- Y\" @2 D& g' F5 Y
<title>vector examples Keyboard</title>7 L9 {9 n8 X/ Z$ `0 P
</head>
$ _! Q! x. G I) d1 O
<body>8 S* r( O+ D$ v3 G7 t
<div id="keyboard"></div>, I a l( e& V5 V3 C
* j2 j9 ~7 E, g9 K0 _2 ]. R
<script type="module" src="./temp.js"></script>\" A9 G\" z {- u! @2 e- ?. w
</body>! E% ^! Z3 W# M% v\" y! O, M
</html>, ^2 L0 S5 F$ A' F ~: |

复制代码

import Interactive from "https://vectorjs.org/interactive.js";% g' X1 G6 Q; E
console.log("Interactive", Interactive);
7 X6 g0 ^! O7 _( b5 S4 _

复制代码

/**
8 v& v. _+ D9 z! d$ z: G
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard0 i ?' t5 o' o! K' ^5 z5 y0 D
* @description This interactive demonstrates how key board input can be used to add interactivity.
: B1 k$ A. I! u\" t D& r. }
* @tags [input]
8 ^. }$ A. f: [: z0 z8 b
*/
5 S- i% g5 c! X
// import { Interactive, getScriptName } from "../../index.js";
- Y6 Z% u+ @! |+ [
// let interactive = new Interactive(getScriptName());
2 B& G6 J; O4 B4 z
import Interactive from "https://vectorjs.org/interactive.js";0 U, i) ?, ?% y. m1 W5 @
let interactive = new Interactive("keyboard");
( D4 j2 n5 H( @, ^9 R
interactive.width = 768;
7 k x. k( O! g9 A: r
interactive.height = 300;: `& ]+ a6 H/ Q9 j' J' a) z$ u! T
interactive.border = true;
5 t+ W4 a b5 d5 j! `1 X# A4 g
let buffer = "";
* H9 P0 @5 U6 E: t) p4 o* f, ^; ~
let keys = [& X8 s I7 l& n# [
[
1 s; c2 l0 x+ k1 |' S
"`",7 ~' T0 S- l- u2 j8 k- h( H
"1",
4 @- R0 B- a# }% q6 m: H( x/ d
"2", G1 f+ C: l, B
"3",. T& H. r9 c& G' N0 S, r5 m; X* _% Z
"4",1 r. c) z. \* B* y& ?
"5",- f& H8 A+ B1 H: F+ I4 S
"6",
8 J m4 ~5 T, y3 V8 B! C) W' d
"7",& m h u6 S1 R' v8 R6 c/ A
"8",
8 ^4 X8 M+ ]% z2 a. t& M' p
"9",
( z$ V9 k3 Q6 u4 B. O
"0",
7 O: B9 U' K/ [, U+ k& _
"-",
2 r1 W- |+ |& u% G g. K
"=",
* B% e' Y9 c7 r. r
"Backspace",
! I9 }\" y4 z# O+ |7 h
],( j. @6 y; {- D* G1 _
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
+ e# f# V! ~% e: Z+ z
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],+ b+ h- |, L! k/ Q- y& b; ]
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
8 Z' O; @5 q7 ^; a
[
) m( f# U/ W5 U! M- \0 \
"fn",6 {' l. G3 K$ }% k% V) @
"Control",
* @. [( D% I+ q
"Alt",, K5 J! i' q# s5 J
"Meta",
2 d; m% k5 `' S. {
" ",
, ]* a7 d7 D% l$ j, u8 a
"Meta",! W d' z3 \: [3 C5 q' L
"Alt",. ~. q4 A- Z3 W! t' Y
"ArrowLeft",' _5 b/ h- c# P
"ArrowUp",6 ^: h* S- t: N$ s$ n
"ArrowDown",
2 @1 _3 `8 ] f w# G
"ArrowRight",
6 i2 Q! B G\" _: N6 ?) W/ r$ t
],
, t- y( N4 j5 E& T
];
# E* s5 `1 _& H/ c& O, g, \
let buttons = [];/ W2 q/ F2 L$ g' }' E
let keycodes = {% x! ~6 P# W c5 w% u
0: { Symbol: 0, Shift: ")" },
9 v0 h0 ^: p( I. M1 z
1: { Symbol: 1, Shift: "!" },
) x( @2 n; C0 f0 R
2: { Symbol: 2, Shift: "@" },8 r* [. D. @. g& Y! g
3: { Symbol: 3, Shift: "#" },
# I- U+ H. j, g8 c1 D
4: { Symbol: 4, Shift: "$" },
8 K2 {( X7 u+ z' l( c
5: { Symbol: 5, Shift: "%" }, @8 g* m; N! ^
6: { Symbol: 6, Shift: "^" },
; `: h! T f) h- Y5 e( K! P
7: { Symbol: 7, Shift: "&" },! e- U4 }0 S& K! s* ]; t2 ?) \/ w
8: { Symbol: 8, Shift: "*" },
\" d/ S+ q! ~6 _6 }
9: { Symbol: 9, Shift: "(" },. N2 {! S- M6 D/ M! ]
a: { Symbol: "a", Shift: "A" },
, ^9 B( h) q: N
b: { Symbol: "b", Shift: "B" },
! {/ F) O2 I; Q
c: { Symbol: "c", Shift: "C" },
2 K; g* h) x6 Y6 @
d: { Symbol: "d", Shift: "D" },
9 h0 z0 j: W0 h2 `+ {
e: { Symbol: "e", Shift: "E" },
) } r. a\" X a# m\" f$ ?
f: { Symbol: "f", Shift: "F" },
f) E- g4 [% Z7 _5 s3 o
g: { Symbol: "g", Shift: "G" },
# l) T: i) T; e, R' b! X: j
h: { Symbol: "h", Shift: "H" },
( }# P7 R9 ? v9 V+ v5 ? D
i: { Symbol: "i", Shift: "I" },4 } v5 m& l- O- v/ F4 d$ I
j: { Symbol: "j", Shift: "J" },& Z) v/ X' L' X- W
k: { Symbol: "k", Shift: "K" },
8 W# M) d7 H2 b% ]6 o: a$ J: f9 `6 F
l: { Symbol: "l", Shift: "L" },
4 f! B) E! w9 q* K4 Q
m: { Symbol: "m", Shift: "M" },( z4 g0 D6 M: s% d6 c$ z$ j) W
n: { Symbol: "n", Shift: "N" },- ?1 u% n7 j/ p4 R( [9 L
o: { Symbol: "o", Shift: "O" },\" B' O: P4 v) E+ K- |. D
p: { Symbol: "p", Shift: "P" },
4 V! e$ b) N; M/ I3 _/ X
q: { Symbol: "q", Shift: "Q" },
$ _# J& G0 v) s, l
r: { Symbol: "r", Shift: "R" },
, n! T9 g\" @; `% p% `
s: { Symbol: "s", Shift: "S" },! q# Z% w9 K7 s, m5 `. L E; G
t: { Symbol: "t", Shift: "T" },
7 _; H9 l* N0 i# n' \8 \; k8 Y9 b\" c
u: { Symbol: "u", Shift: "U" },0 L. R: j& K4 z0 q
v: { Symbol: "v", Shift: "V" },
+ _5 y! e2 Z3 X& }
w: { Symbol: "w", Shift: "W" },& l+ R% D7 t\" }5 Q: N3 V6 @- R
x: { Symbol: "x", Shift: "X" },. O- }; S) R9 d; S6 e
y: { Symbol: "y", Shift: "Y" },+ v; v\" e3 k9 l. H
z: { Symbol: "z", Shift: "Z" },6 `5 w& V4 m1 e7 k# p# g4 W
"`": { Symbol: "`", Shift: "~" },
/ J b! u0 \( n\" [% f0 c2 H4 X- p
"-": { Symbol: "-", Shift: "_" },5 r2 Y) y; d2 Q3 y( H( q5 U& E7 x
"=": { Symbol: "=", Shift: "+" },
! z6 e6 w+ t* ]/ M1 |
";": { Symbol: ";", Shift: ":" },
7 M* R5 v( _) b0 L
"'": { Symbol: "'", Shift: '"' },! R0 V1 [$ s4 D1 M
"[": { Symbol: "[", Shift: "{" },
4 L: v O* W! b- B9 Z
"]": { Symbol: "]", Shift: "}" },
) @4 S0 h9 l- k3 J! d
"\\": { Symbol: "\\", Shift: "|" },- ` w3 \* l2 D$ z7 b6 ]
",": { Symbol: ",", Shift: "<" },
4 }* i4 `( ]( n6 T2 t3 h9 [
".": { Symbol: ".", Shift: ">" },
/ h\" Q) K2 \! }+ Y% m
"/": { Symbol: "/", Shift: "?" },5 R/ @+ H8 z1 Y0 M. ~9 E
Backspace: { Symbol: "⌫", Shift: "" },
: V: K5 l: }0 N7 @
tab: { Symbol: " ", Shift: "" },
! _: J& q% Q5 e. G. ?
CapsLock: { Symbol: "⇪", Shift: "" },
' i+ w( Y\" i\" r+ k2 c* y0 V
Shift: { Symbol: "⇧", Shift: "" },( r* `, e; u# K
Enter: { Symbol: "⏎", Shift: "" },
$ ?\" O3 M* s6 l% O6 L
Control: { Symbol: "⌃", Shift: "" },% f: Q3 e8 `4 M! V2 ~
Alt: { Symbol: "Alt", Shift: "" },( w9 U/ m0 Z\" \( J4 k
Meta: { Symbol: "⌘", Shift: "" },+ N7 }, X' F: F6 e
ArrowLeft: { Symbol: "←", Shift: "" },/ P w7 `# j; I! m$ n y3 D
ArrowUp: { Symbol: "↑", Shift: "" },# @# X6 h9 p. S. W( s
ArrowDown: { Symbol: "↓", Shift: "" },
3 `$ Q! k- z: _* c$ x6 y8 g
ArrowRight: { Symbol: "→", Shift: "" },. M, i8 ]: k8 Q3 R; p# L* ? y
" ": { Symbol: " ", Shift: "" },
4 j4 \2 T( A! ~
};
. x\" I$ I& R' p( g& v7 ?) t
let buttonMap = new Map();
2 ?' ^. N, m: K& N. F% `. J
let height = 32;
5 g4 b- h% w0 {, H) b) U\" y
let margin = 8;
- r6 j8 b/ ^/ @1 V\" `$ h/ e
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);: u\" _& Q+ y J, [
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);, k8 {0 x8 M' {' F
for (let row = 0; row < keys.length; row++) {2 @( R+ V& F. o. F\" S7 p
let x = 32;% o: J, S1 K8 C0 b\" f6 S5 _
let prev;- `- A4 B+ G3 z8 r' }1 n
for (let i = 0; i < keys[row].length; i++) {( J$ N0 ~* e6 t
let key = keys[row][i];
; ~1 z+ A6 \- S3 G) R
let width = 32;
) s1 i$ H8 U/ {. [3 C
let button;
1 u% T) v1 B, y! {# \\" ?
switch (key) {
1 w4 T$ g. C8 ], B1 D
case "CapsLock":8 I' Z4 i4 ~3 k! {0 a! ]: ^) u
button = capslock;
- a% B, i9 {* p% r
width = 64;
[\" B f3 u. z) m* I& z/ j0 Q
break;* y$ d) `4 V7 t- l
case "Shift":
8 j# a$ {4 H& ~5 c- ~* ~3 c
if (shift.x === 0) {
4 A/ a& f' C' H$ O! D; r
button = shift;, u. E; K' [6 B\" i' E- z6 ^
} else {& q2 k' Q P' h( s* Q
button = interactive.button(8 }7 b o4 c; R\" g+ ]( ]7 }
0,
' _; T. h# I _, }2 l. m& r( ]# n, `
0,
) }. C. J* C/ {8 A i T' W\" |
keycodes[key] != undefined ? keycodes[key].Symbol : key8 Z4 S* M. c9 A1 u
);1 d/ ^0 V( Q5 R' _0 ?6 f
}
: {\" A; G$ E0 F# q9 i) z
width = 90;
5 k+ D- ~$ V) l0 T* k9 c
break;
0 S! M4 }3 ?) M9 R8 w, z2 y
case "tab":5 l\" l: f1 Z8 C( }& ^) V7 R, G\" g
width = 50;
4 u* P\" F. _+ P! K2 ~( ` C$ j
button = interactive.button(
9 f& ?( p. [! e2 v$ @
0,
% g% @5 l- {% Z: ]1 z( K& _
0,0 }: R; ?$ m Q! ^/ I) i
keycodes[key] != undefined ? keycodes[key].Symbol : key
8 F3 n2 N) @% n( g4 E\" `$ c: ~
);! L& E; m) q5 b1 F
break;
7 o+ r- ^$ T+ d4 t
case " ":- Q: C0 ^) X$ p- x) w. D
width = 176;- C7 u9 k9 L7 q# \
button = interactive.button(9 w7 L5 f& n/ u+ Q
0,& ~2 B% i( ]. h' |# U4 @* h U: N
0,
* p5 N* R% N; c; s
keycodes[key] != undefined ? keycodes[key].Symbol : key
3 `7 N: v& j! L3 R1 Z
);
0 Q+ O/ U+ W F! V0 i& Q$ D
break;
5 F! Q# h; Y+ F) I6 ?
case "Meta":
) U% F( X( |7 b# Y0 q: m5 @6 }
width = 50;
4 D& H9 G$ X\" E8 o- o$ `
button = interactive.button(8 `+ O$ T* \4 S4 _0 O% c8 f+ h9 F- c
0,- C/ A. w5 k. ~# p
0,0 M0 [3 P+ V\" T( n% ?
keycodes[key] != undefined ? keycodes[key].Symbol : key
- v9 C) B* m2 K. g6 M' ?5 O9 g
);& A9 k- m' s; k0 N' W' S2 P6 l
break;5 [5 l0 b1 l, J& `- k7 d2 W
default:
+ E4 K- j9 d0 `3 a
button = interactive.button(
- m U+ b1 ?1 T3 P\" T* z; c& ?
0,7 N7 p! m4 E' |& ^+ a0 h; `
0,
& @7 E! A' L/ J9 z
keycodes[key] != undefined ? keycodes[key].Symbol : key
( c: D$ x3 P% T9 ~, [0 _; H- m6 Y
);3 K2 v {+ R! S' |! \( n! S4 `
if (keycodes[key] != undefined) {
3 g- R5 p g) [8 U
if (keycodes[key].Shift != "") {
\" {2 c2 V2 @4 B6 |: Y& {- V
button.addDependency(shift, capslock);2 K( h\" }6 D& J |7 Q# t, U5 I
button.update = () => {
; k7 |0 q! l, C& I- ? J w
if (shift.active || capslock.active) {6 q& m6 ]+ m! o7 h
button.label.contents = keycodes[key].Shift;, W! }9 S\" [% _. ?7 U) w
} else {1 ?% }+ X& q\" ]: s8 i) I
button.label.contents = keycodes[key].Symbol;) J9 u( L% z: l2 H
}
, P$ K8 r+ J3 V
};& U' t7 Q5 P8 M% w
}
: r) n2 u9 k' ~
}
+ Z- N; {8 R1 ]& _! [% v
}, e3 L& A* [' X* z$ C4 S- {6 ^
button.x = x;
9 Y$ W- e9 l- n! T: y
button.y = 64 + row * (height + margin);) j1 |. G- L& i+ p1 d+ C2 U! i
if (button.box.width < width) {
\" a/ N: M# s' _5 w, k
button.box.width = width;
* I8 A) n6 n. G( U/ ]
}
% `+ g, W6 n! l: u\" n
let bbox = button.root.getBBox();
' J5 }5 ~ L( T6 m' S, {
x += bbox.width + margin;
5 k$ G( \& e1 }$ [% c% y
buttons.push(button);
\" f0 [/ C0 r5 }7 l4 a8 ]
prev = button;
' I8 v/ j; n. E. D4 q$ h, P' j: ~
buttonMap.set(key, button);
0 j\" J3 g6 g( L. a+ L6 U
if (key === "ArrowUp") {
$ \# M9 G, A3 j% V* @- v1 _
button.box.height = 16;8 Y7 m3 I% t; t$ A
button.label.root.style.display = "none";* [% h6 r: a7 S% C! k
} else if (key === "ArrowDown") {- a9 x4 g; c3 [& r: Q
button.box.height = 16;
9 n }* u6 ^3 P
button.x -= 32 + margin;2 }+ T: h8 O% N7 G: \% w8 {* K$ S
button.y += 16;' Q! h# q6 M- t7 \
button.label.root.style.display = "none";3 `\" u# Y n8 \; l1 g& P
x -= bbox.width + margin;/ u. r, p! t' y# k: t
}
( ~+ B2 j1 a# G' W7 P$ t
}
8 Y2 o& O0 B0 p B' e3 U
let right = prev.x;+ t) S: F/ _. ~( j9 ?+ o
if (right < 630) {- k; S+ ?# \, k
prev.box.width = 630 - right;
0 k. A1 p0 _ `, S
}
& H. m4 ?* E- ^ w, T
}
+ r T9 y9 `1 {
// console.log(keycodes["0"], shift, capslock);
$ P( Q9 M: Y: G) z1 k) Y1 V
let active = [];
) W- C0 Y+ z c7 ^
window.onkeydown = function (event) {
1 X d7 C1 w# G\" Z; B
for (let i = 0; i < buttons.length; i++) {: [; a: a# I- s9 ~; Q T$ ~
let button = buttons[i];. P& L/ v/ K8 X F/ o$ d2 X* m
if (
8 g3 h; ?& l/ q1 g# N
button.label.contents === event.key ||2 v c4 A0 E% v# o\" q3 T; j\" B% s
(keycodes[event.key] != undefined &&
& ]/ R3 s4 y8 Y# b9 J: g3 E
button.label.contents === keycodes[event.key].Symbol)
& F8 w0 g6 ~( v0 m
) {
3 Z+ ~6 } M ?5 o! b5 _
button.box.style.fill = "#f8f8f8";6 P7 G\" R* b N5 d+ X\" R+ Z- t
button.label.style.fill = "#404040";
) a2 T5 `8 M9 @1 ]& R' i0 P: q
button.active = true;
7 u3 c& C2 z) K- w& f$ k9 k
active.push(button);0 U: T; {$ Z1 q/ k1 w
}
' t* d9 k- @/ C: [; H# L3 E9 ]
}
3 c2 J0 X! n, c8 z
buffer += `'${event.key}',`;8 x8 w9 L# i- c7 p7 J
};4 _$ i1 |0 Q% ^- |5 U
window.onkeyup = function (event) {( j5 _% Z7 w( K! |( w; j
let newActive = [];
9 n5 J g3 R- M5 B: w- A# F1 J
for (let button of active) {
7 `& d- i) G& {
if (
# z) _$ w3 B5 @. H
button.label.contents === event.key ||
0 H. z1 h) ^- K7 D/ A1 H
(keycodes[event.key] != undefined &&
! f8 [( K0 x9 L% {4 d* o
button.label.contents === keycodes[event.key].Symbol)
) f/ t% F6 R' L3 u# o% S
) {$ T: Y- ~1 ~8 J; D9 y7 h h( @
button.box.style.fill = "";
7 ~0 C+ }$ _; v3 ?- V
button.label.style.fill = "";1 h\" i3 e. \) T9 F6 F! U
button.active = false;
1 i3 h5 b, r$ A' V9 o0 s5 e/ b5 X
} else {! ?9 W' _: a y2 C: s T: P
newActive.push(button);
7 q- K0 W# q2 J6 Z
}
1 \% g+ P1 j6 o1 w! @+ i3 Z
}9 X0 s* q2 s: }3 r; B3 i, N6 Q
active = newActive;( \2 o' @/ y) }5 d( K
};
) G; H7 |4 _& P4 M0 [; t
let bbox = interactive.input.root.getBBox();
# w4 \7 T) O7 ]6 h
interactive.setViewBox(
& J0 p2 b8 a2 h g4 T
bbox.x - margin,
\" b9 P6 |: |# ~
bbox.y,& x; Q6 H\" c1 s( k& ]1 s\" E% Y( }
bbox.width + 2 * margin,4 \' V, A4 L0 n/ F1 a' _% o
bbox.height7 o2 r\" o$ {/ {1 W& M' h
);1 V0 }# |) E% ]
//# sourceMappingURL=keyboard.js.map2 y6 d: \# }1 S6 _, k\" M5 G3 i4 Q9 Q
2 T( U% D9 D) A \