使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
- C6 H) h$ |9 l( b6 n
<html lang="en">, q6 c( w: _4 v$ c0 \) j
<head>! x0 w u y. _0 J/ j) h# s4 p1 g
<meta charset="UTF-8">
4 w. Y s, l x4 t, e; N# ^
<meta http-equiv="X-UA-Compatible" content="IE=edge">; \9 L0 t( U+ L\" E; L2 p$ t
<meta name="viewport" content="width=device-width, initial-scale=1.0">! N1 D% ^6 r. U2 J* x: |! r
<link rel="stylesheet" >
4 `- q. j: }9 R- R0 g
<title>vector examples Keyboard</title>\" Z5 s! Y1 \; C; x+ ?. a! o- b
</head>
( w+ v, s1 X: X
<body>
6 Z# d. m2 X1 t' J8 f
<div id="keyboard"></div>& ]# L- g. _5 [% ]- B0 i
6 V3 M3 f\" k! B7 w! A: T: j
<script type="module" src="./temp.js"></script>7 `7 h& x9 z/ T; C8 |
</body>- r* W& V5 h+ Q/ c
</html>/ Y% n5 E$ R5 t0 ]. j4 W

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
9 q\" F* L& c$ U& t8 P
console.log("Interactive", Interactive);
- U$ B2 K5 }5 e+ I6 Q

复制代码

/**0 y1 M: B\" K# y\" t5 Y- X
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard! [. \0 r3 U; z1 s) c6 ]1 l
* @description This interactive demonstrates how key board input can be used to add interactivity.
6 s0 m, O! Z) Y' M0 @
* @tags [input]
: D$ Z$ j) s/ E. L
*/
# Z4 f- |: g1 ]9 S8 @
// import { Interactive, getScriptName } from "../../index.js";- N$ k. W$ S. }\" G6 N9 D
// let interactive = new Interactive(getScriptName());
' H# a- G/ H5 w+ C8 |
import Interactive from "https://vectorjs.org/interactive.js";1 H8 h% P3 R2 m) [+ e. u
let interactive = new Interactive("keyboard");
. B- a9 N\" e* T) i7 i/ O! s- Z' ?$ i
interactive.width = 768;+ r8 X6 U$ n0 T! D1 K\" s' W
interactive.height = 300;
& H* g$ V/ d% r3 ?9 s) K2 f
interactive.border = true;
. } A' W2 x$ _) u3 D- c
let buffer = "";
& t- k+ z6 v9 |* R* w1 i3 T
let keys = [
% M& g- N( }6 H- |7 }5 p2 W
[
$ a$ H0 L9 V7 ?, f\" g' D
"`",
- [; q* N7 h3 f+ B
"1",
! T$ n+ a) {+ Y
"2",
7 I. S4 s: L [/ |) _, e
"3",
! y1 `1 v0 o/ O+ C! H& o m
"4",
$ X, Q, U# U+ Y) a5 \5 g% U
"5",# b; T F( V) q9 F+ d
"6",4 T6 ^5 \& N% v) C, m! V
"7",$ B% J0 ?& l$ B4 }
"8",: C& V1 [9 T ]/ d
"9",$ `4 Y9 w' x8 Q2 A) s# o* S2 ?) u
"0",4 D$ b0 R4 S& B, j
"-",9 ]2 F( X/ V/ A; H, l# a# q. I% h
"=",4 ]. U/ w9 |8 q( W
"Backspace",$ y# `$ I\" _9 G\" S/ @0 V
],9 l+ R9 }0 E7 D p0 P Z
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
5 Z' A( e: u: Q: K) I
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
/ X, D( l* R3 I. ?
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],; i8 v3 a6 i0 u- K8 h
[/ w- O) Y: [+ U+ O
"fn",
& c* E+ w7 c6 I3 C
"Control",. F4 u) t9 a( Y+ m$ A
"Alt",6 w& ~0 i3 C. \& _2 l
"Meta",
; l+ N8 x% \/ ^1 E) Q
" ",; u$ B& a5 t' b* N% F
"Meta",# q0 w8 o5 @1 H# F5 D! d& ?- A5 h
"Alt",; Z5 \. b: e: P
"ArrowLeft",
: K% h6 k# j8 f- a. M
"ArrowUp",
; n2 [0 ]) a( W M# }# | w
"ArrowDown",/ h8 u0 f\" j$ I
"ArrowRight",9 N4 C, ^' Q! m- J; Z
],4 A' J7 D6 e: [, s- Z9 H
];
# E1 S! v9 @7 G. K1 D
let buttons = [];6 c0 l2 r6 o0 ?7 y% o# |
let keycodes = {) T7 D! d0 c% o3 ?: d* I\" ?) ^
0: { Symbol: 0, Shift: ")" },; F7 I; c( V9 t4 c( ^- v& R* O
1: { Symbol: 1, Shift: "!" },7 ~0 K6 N {8 T Y, H/ s& F! E
2: { Symbol: 2, Shift: "@" },
9 b! C. {5 m5 ]7 D8 v8 t7 G
3: { Symbol: 3, Shift: "#" },
; \! r! R$ }5 R# ?+ L
4: { Symbol: 4, Shift: "$" },
6 _1 ~) I. a3 N, C) [\" Q; k
5: { Symbol: 5, Shift: "%" },* x) c- L7 L3 E& k- P# S
6: { Symbol: 6, Shift: "^" },& P1 @5 P& r: [0 B$ i# @
7: { Symbol: 7, Shift: "&" },4 X, E: y/ I& f
8: { Symbol: 8, Shift: "*" },$ v6 T; g0 I\" I
9: { Symbol: 9, Shift: "(" },) O( S8 M1 E/ G4 h. p; M5 }% R
a: { Symbol: "a", Shift: "A" },
2 E$ {' D, B1 R2 @4 A+ ]
b: { Symbol: "b", Shift: "B" },! _, R8 n: w& V( t
c: { Symbol: "c", Shift: "C" }, V4 s: G( H7 p' ?' ]
d: { Symbol: "d", Shift: "D" },3 g/ Y5 a4 i8 J2 r\" @
e: { Symbol: "e", Shift: "E" },
; o8 b+ O; B* u: |7 F% k7 W v
f: { Symbol: "f", Shift: "F" },8 i1 ?* M3 C# {
g: { Symbol: "g", Shift: "G" },
Z2 ^/ l/ \6 {# ~# R2 K
h: { Symbol: "h", Shift: "H" },
3 I/ r1 b4 `% R* L2 C( H
i: { Symbol: "i", Shift: "I" },
) b) ~2 _; z$ C2 v* D
j: { Symbol: "j", Shift: "J" },
! t8 V* c\" j* v( o; e/ X
k: { Symbol: "k", Shift: "K" },# j* |6 t* j- |$ m
l: { Symbol: "l", Shift: "L" },
4 F! a! u, J# d3 v6 k
m: { Symbol: "m", Shift: "M" },: U$ V4 u7 ?, \( d# H! B8 g8 M
n: { Symbol: "n", Shift: "N" },7 Q8 |/ z0 f: v. D
o: { Symbol: "o", Shift: "O" },
6 ^9 {/ h2 x8 \' z0 S3 I
p: { Symbol: "p", Shift: "P" },
9 g% U9 G5 W$ k- N5 h# P
q: { Symbol: "q", Shift: "Q" },
1 \. Q+ x9 g7 q9 [; c) ~7 q
r: { Symbol: "r", Shift: "R" },
- m8 j5 ?/ b) x
s: { Symbol: "s", Shift: "S" },+ g2 r2 s. t1 C
t: { Symbol: "t", Shift: "T" },
! c8 W- h V1 }4 l\" \: Z% ?
u: { Symbol: "u", Shift: "U" },+ t\" g8 d( S E4 V
v: { Symbol: "v", Shift: "V" },
, l: t# G& P5 M Y0 N
w: { Symbol: "w", Shift: "W" },
9 U& P9 C& j\" [
x: { Symbol: "x", Shift: "X" },
9 n! b0 N1 X+ F+ z! r, v- c; ^+ `- i
y: { Symbol: "y", Shift: "Y" },4 n$ T( c( p# D: I
z: { Symbol: "z", Shift: "Z" },
* D$ q\" _% d2 A) W
"`": { Symbol: "`", Shift: "~" },
0 Y; r& e3 h3 q; ^
"-": { Symbol: "-", Shift: "_" },; }7 X* G! w$ l' ^
"=": { Symbol: "=", Shift: "+" },- [% ^' M; V W' F R% ~6 s- d7 R
";": { Symbol: ";", Shift: ":" },
7 g z, G. C0 u; u2 E7 i
"'": { Symbol: "'", Shift: '"' },
) A4 X) g4 e, C6 u' H2 V- @
"[": { Symbol: "[", Shift: "{" },
% Y9 Z& H. R: N! l' D' ^ K$ t) A
"]": { Symbol: "]", Shift: "}" },
% X7 j4 I# M9 ]& q5 ]6 X, b4 p
"\\": { Symbol: "\\", Shift: "|" },: [7 G6 n, f: [% O
",": { Symbol: ",", Shift: "<" },; F5 F4 ?$ t0 c\" Y% A
".": { Symbol: ".", Shift: ">" },
$ b$ A! ^, g, D* P) W6 g+ g+ g
"/": { Symbol: "/", Shift: "?" },
4 v: K m0 {\" _; ]& i
Backspace: { Symbol: "⌫", Shift: "" },1 O. y$ m1 c: k. w$ N3 y! N
tab: { Symbol: " ", Shift: "" }, R6 T, }8 f3 r2 N3 @2 h2 g% ?1 V* ^
CapsLock: { Symbol: "⇪", Shift: "" },
+ _) r% ?8 C5 U$ c, D
Shift: { Symbol: "⇧", Shift: "" },
+ m) C0 ]& [4 W* C
Enter: { Symbol: "⏎", Shift: "" },
5 f8 q& y8 `1 Z% E: |6 h
Control: { Symbol: "⌃", Shift: "" },+ ?, A1 g4 H4 J3 i\" L$ Z' ?\" k
Alt: { Symbol: "Alt", Shift: "" },6 w; I: ]8 q& f8 ^/ p
Meta: { Symbol: "⌘", Shift: "" },
^3 W/ f, M' G+ `
ArrowLeft: { Symbol: "←", Shift: "" },, X3 V\" w4 {3 g
ArrowUp: { Symbol: "↑", Shift: "" },
( }1 R2 t5 c& }) q9 d1 Q
ArrowDown: { Symbol: "↓", Shift: "" },
' U0 L# Q! d; H A2 w# y, v5 p
ArrowRight: { Symbol: "→", Shift: "" },
! a3 L. U$ y, u* K
" ": { Symbol: " ", Shift: "" },- w2 t5 E5 z! }) S- E
};
# M3 B0 R2 h& K0 r7 V5 m! {+ P
let buttonMap = new Map();$ w2 d3 ?2 a' u& V9 i' \! `3 K
let height = 32; m1 s* ]+ p\" F, D6 ]$ I
let margin = 8;
( a. A7 t' L8 @$ G+ A2 b
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);% E! G) B* z7 `
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
4 E V1 C0 `\" @3 y/ w2 S1 Y
for (let row = 0; row < keys.length; row++) {
+ U9 K\" ^/ G; U6 [/ V1 j3 S' {
let x = 32;6 X1 w' c8 K+ M7 T! y. G: v; A
let prev;$ x, {: V7 Y8 Z5 s. Z\" `
for (let i = 0; i < keys[row].length; i++) {, I) F. O: a! v3 Q
let key = keys[row][i];% f6 X+ v4 P1 C- L$ H% K+ W$ Y
let width = 32;+ J8 a: W k# K7 q8 A4 w1 v
let button;, ?8 j* ^+ z9 Y- q( B
switch (key) {, {' R9 K' e& d( r. w* D8 ~* D6 R
case "CapsLock": d\" r: r [) V% [: Q, O
button = capslock;4 T4 j ] t; T
width = 64;
; K4 y( I/ Y% p; D4 R3 I
break;
) z\" C' B6 Y! j4 _$ w: E
case "Shift":# u7 u5 W0 D: M* D0 a& R! a
if (shift.x === 0) {
+ r8 U2 \4 i2 k# a! m, j9 F
button = shift;
X5 ]( q3 G& m$ s\" \
} else {
0 M; |& ]$ Q. u, ^# s4 h
button = interactive.button(
7 a4 |7 x\" H, t1 D% c6 ?
0,: q- g# g2 x* V ~ H+ l
0,* `- j/ A; G4 q, F7 w( U
keycodes[key] != undefined ? keycodes[key].Symbol : key
7 c- {* Y5 M9 [5 x) Y; p
);+ x9 ?* p! f3 A\" }4 t- A
}7 G1 j2 W: |$ u
width = 90;
break;
& u a, U5 Y2 A& _ k+ c y
case "tab":: Y+ s6 y* u9 p& m* K; R/ }
width = 50;7 t* G$ l! N; w6 ^
button = interactive.button(
: Y: j) D; {' _6 J7 O
0,/ ^& D. x3 v S+ @
0, [# ], f7 h- M. p\" \+ u
keycodes[key] != undefined ? keycodes[key].Symbol : key! I6 J* k: I1 L7 j3 v
);
# ~( n. X/ U0 H
break;
/ f$ d. h- J/ M! F! S* t8 C
case " ":
\" R/ \$ S: k% n; P4 u( S3 v; T
width = 176;
$ f) }2 L8 [' A' U3 I' r# j, `' n* K
button = interactive.button(- R: _3 Q% U9 C7 w8 e: V
0,
; C; [. h4 i( D4 R
0,5 y# R( b9 ~* h# O' i5 D
keycodes[key] != undefined ? keycodes[key].Symbol : key$ t( e3 W1 f- b! j4 J: m( f0 t
); v( z/ O\" l, O P+ @$ U6 ^; K
break;0 _) M: K) F% C' f5 Y. U1 l
case "Meta":$ k- ]/ U/ `/ F0 S
width = 50;
% ?\" c! n1 p# a6 n/ U; A4 |
button = interactive.button( H\" q' p5 J8 P7 W8 y# w
0,
: t$ H! a/ ^/ H7 U/ m
0,# u) v( o\" B7 x: d7 g
keycodes[key] != undefined ? keycodes[key].Symbol : key! h/ d( `6 O1 o
);
. d, [% L2 s# ?* N\" \$ u
break;\" i2 Y; |$ x- ?0 s R\" {! l9 T2 {. f7 _2 E
default:
; Q; \3 ]$ _\" r- F8 Z2 H
button = interactive.button(% l8 b3 E3 G+ r& Y( t
0,
3 ^) ~0 R# O2 |: |& ?5 U* I. z
0,
0 D: ^! p h5 |0 j
keycodes[key] != undefined ? keycodes[key].Symbol : key
U- E1 T8 J: s; n! J
);
4 S( J& l- }7 G/ v
if (keycodes[key] != undefined) {: P\" [( B7 W\" R
if (keycodes[key].Shift != "") {; O( C! z/ Z8 R8 k
button.addDependency(shift, capslock);
, I2 G8 Y: T X\" M8 j
button.update = () => {2 n7 r9 N% U; c6 U
if (shift.active || capslock.active) {
, A# P\" Z$ H/ L. j' B3 F
button.label.contents = keycodes[key].Shift;6 ]' r* K( A9 B$ Y1 E
} else {' n, H8 L5 s. [\" l
button.label.contents = keycodes[key].Symbol;) G3 [: U8 E5 g0 K6 ?4 w
}\" r; e, G U0 X$ b
};# n5 G/ r* e\" ]3 J# |! J3 l4 l; j
}% Z! `8 Z+ t3 n
}. o& N, ^' h1 e: r( I* u
}
+ J. Z0 K1 F2 g0 E1 [, t. y! o
button.x = x;
' |, m5 Q6 H7 U! i
button.y = 64 + row * (height + margin);
if (button.box.width < width) {5 e6 X% y; `. _
button.box.width = width;
7 V\" }* N5 X& J- g
}' ?% g c. h# m8 f& L
let bbox = button.root.getBBox();* U# O! f' @! ?% Q
x += bbox.width + margin;
( I) D7 ?' \4 y6 g' Y
buttons.push(button);0 p1 D) F$ v0 ?! ]+ o2 R3 w
prev = button;1 \4 J. y4 ?8 e: X
buttonMap.set(key, button);
9 T& h$ h6 j! P: B1 D
if (key === "ArrowUp") {, N+ ?, M4 K! D7 y/ Z5 G! ]
button.box.height = 16;
) A7 C+ b8 ~4 y9 @! ]
button.label.root.style.display = "none";7 L0 V+ t5 r/ g' I1 X7 K3 p9 q
} else if (key === "ArrowDown") {
' S( \1 X+ {7 C8 F
button.box.height = 16;
: r8 `5 ^# h( G. J$ k
button.x -= 32 + margin;- r, |1 u! ]$ D& @8 l- L
button.y += 16;
1 B) g4 G8 v. f+ \3 b
button.label.root.style.display = "none";
; h, l+ v( V4 l. y; U6 ~0 H
x -= bbox.width + margin;\" q- i* ~/ e1 k/ r0 o
}
- K; `4 P( b$ [/ s/ G7 L5 ~
}' y1 @. {2 w& b. T
let right = prev.x;8 c- n: K/ M, u
if (right < 630) {
& W\" g. n8 o& {: M4 u/ k
prev.box.width = 630 - right;# l/ c) f7 r+ w* q% N, L) S* k3 T
}
) B/ Z4 J: p6 R0 E4 }
}# V. {. W5 h\" y: K0 P
// console.log(keycodes["0"], shift, capslock);1 \5 g8 A0 O. `8 q$ f
let active = [];5 e# x9 Z3 y+ o' U% w
window.onkeydown = function (event) {+ A( M$ u( m2 f, g
for (let i = 0; i < buttons.length; i++) {
! G, [\" `0 V, s9 l6 j
let button = buttons[i];. g! Y( n7 x6 @9 G; F
if (. Q0 o, H4 t( h2 Q/ _& {\" G' N6 y
button.label.contents === event.key ||5 @6 ^8 G& T- N: ~4 d9 v
(keycodes[event.key] != undefined &&1 e0 T: ^) f3 a5 Z) K9 a
button.label.contents === keycodes[event.key].Symbol)
! P1 O- [, H0 ~5 T0 T
) {/ u: w/ n c$ Z! F( f
button.box.style.fill = "#f8f8f8";
/ g {/ t\" z- T1 f
button.label.style.fill = "#404040";, e! ^. u4 c0 o\" l6 ~
button.active = true;
: M* X8 a& i2 h+ f. W/ O6 d
active.push(button);
$ f( s# {( d. v) X
}
) R$ u3 p5 |9 d
}$ k) `* r7 m( A% S3 s) J7 C1 Y
buffer += `'${event.key}',`;! ?, L2 z3 Z; M
};
% F0 i0 _+ w$ y3 {+ N9 X
window.onkeyup = function (event) {
, T6 F% ~( f2 m\" Y\" l% ^
let newActive = [];9 Q8 @0 f9 ~5 c2 t
for (let button of active) {
& Y: D\" y5 D8 R* j% d
if (- a( d, l/ `- h6 l$ O1 K0 Q
button.label.contents === event.key ||. d! l/ C( e5 ` ]& P9 t\" o4 J4 o% K
(keycodes[event.key] != undefined &&+ A: @8 T: M0 E1 Q* Y w9 b
button.label.contents === keycodes[event.key].Symbol): H8 b: T; l$ B W! t; _& M7 U
) {$ f$ f0 V. U: `! j8 R, A) [
button.box.style.fill = "";' t8 t+ X% V4 ~; @+ P9 z) O/ v
button.label.style.fill = "";* q5 \. `8 Q\" I5 B2 S
button.active = false;; p8 s3 w n2 D8 D* J$ w. J
} else {; h6 {8 Y: F, K! c- R
newActive.push(button);3 h$ w. m6 Z1 t$ g/ `6 M
}
& [- ~, h% v, `0 M* ^( C [& K
}
- v3 u, t& @# i- z4 Y
active = newActive;/ G) c4 [! Y& m
};
A0 U( k+ G n\" J2 \
let bbox = interactive.input.root.getBBox();
8 i# C- C, m8 B4 G4 k% S
interactive.setViewBox(( C2 _2 g* _6 r8 ^7 C& n. }
bbox.x - margin,
$ N6 i! a( S2 r H
bbox.y,
) z6 o0 S: r% h# C
bbox.width + 2 * margin,
! J7 n& i/ N+ T- H
bbox.height
3 h) S/ i8 H6 ]+ M
);
( M4 f2 R: u8 [ `; l( \
//# sourceMappingURL=keyboard.js.map
* u4 G5 Q* N1 [+ V. a1 O
2 t2 y/ S( K7 \- V( `