使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>0 g' @# ?2 q# Z
<html lang="en">8 Z1 d* D( \. g8 }3 h
<head>
4 q! ^5 S3 e9 R y
<meta charset="UTF-8">* E4 A: ~' D( E& z
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6 p- v, Q* n+ @
<meta name="viewport" content="width=device-width, initial-scale=1.0"># l, C Z6 {4 W6 V: D
<link rel="stylesheet" >
% B; j. l8 I& O5 d f\" X7 x9 P
<title>vector examples Keyboard</title>
( m! r3 B: y5 f5 h; K8 k# u
</head>
8 ?. a* N$ p, C7 R
<body>
9 ]9 ^. P7 Y4 ? F' f7 |
<div id="keyboard"></div># ^, M# i: \- I6 n6 @' O; @
5 e) G! g# a6 A) n2 A. k8 o. I/ E
<script type="module" src="./temp.js"></script>3 D6 ]6 ^5 O+ f) b\" }# j
</body>
, U5 b$ J4 _9 {5 ~6 |( ~* v) I
</html>0 E( H5 V9 N3 D, i, r0 h: t

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
% m; \ {9 l3 Q' {
console.log("Interactive", Interactive);1 i4 t1 z4 Z; x: ^) J+ p' E

复制代码

/**
; P' J, N\" o# h\" x3 b
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard Q' j3 E; r8 [\" K k
* @description This interactive demonstrates how key board input can be used to add interactivity.
: c% E( O+ G6 r- L
* @tags [input]
! \, P\" B& z& Z9 g+ `4 Y- S. T
*/
8 i$ H: j) C) y! ~' s% Y1 V9 n; U2 e' T
// import { Interactive, getScriptName } from "../../index.js";\" P& T! O: v; P1 \
// let interactive = new Interactive(getScriptName());
% f7 b\" E$ K! u# U' o+ O
import Interactive from "https://vectorjs.org/interactive.js";
! }. ~2 }+ \& S' M( \. m
let interactive = new Interactive("keyboard");
4 N) |/ Y& a# H
interactive.width = 768;
+ D3 k3 H+ C9 Y' Z$ h\" i6 {* F
interactive.height = 300;
9 Z& e6 D0 ^! _5 ^; \1 R3 _
interactive.border = true;
& w: h- z; e3 V: D# A: k. B
let buffer = "";- H6 H/ h! _1 ^* c7 b\" v+ B
let keys = [. o0 q# W) \# n8 S% f
[1 t/ W4 e4 O! }1 s- [5 N' ~+ m! S
"`",
& _) N; C$ g# g
"1",
6 b) p\" D/ v1 g: q% E. J8 Z\" l
"2",5 u l\" Y6 T0 `; w
"3", V9 w T\" W* R* w
"4",$ V\" q' o6 ]& b `
"5",4 M3 n) V4 V$ u4 H) W* n' E
"6",9 q6 h) w3 X- ^% r9 ]: Y
"7",6 \0 u: n4 i6 f2 z\" }
"8",
0 H0 W7 i& Y8 u4 ]- ~- C0 W7 F' I
"9",
8 J( p/ J! T* u! k: B( |! }+ e9 v* Y
"0",
9 K. X# b% \5 @. `: D: [# [
"-",: P+ |. G! t& T6 |0 A
"=",
* i& J\" w1 d7 g/ V$ V; o
"Backspace",: V+ }) k2 b0 l/ v
],
{- `* @. g4 M7 d\" M1 }
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],* e/ N! ]1 a- o, G
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
0 _& x' y/ {. ]+ K: n0 q/ ^
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],' p& d; m$ z\" G- g% x A
[
' `, K+ B# I: {4 |. x
"fn",! Y7 S, s& M4 }! ^4 G
"Control",
+ {6 ?# k9 n0 }# q. m8 Y
"Alt",
( H( N, ]6 d4 F- p$ w, p; k
"Meta",# g: x: y+ v) ]% R3 {' l+ J8 ~
" ", j/ Y; ~0 f/ j: }( n: l. P9 m% Q
"Meta",
/ X( y* M; @$ J- u$ w2 G; w3 w
"Alt",! }& x+ w5 r% `8 i3 j
"ArrowLeft",
6 k) }; M) y) n! M
"ArrowUp",
, I. U, R0 h# z& D
"ArrowDown",: N$ S. [0 u$ b1 B
"ArrowRight",
! t* h5 {# H* n a, E\" F
],
0 }9 V- z, n) H/ m
];
- B/ F\" |. A6 E0 e2 ^
let buttons = [];+ I4 t- ?, _$ s1 M R$ n* @
let keycodes = {
- `' i0 a\" | Z2 Z
0: { Symbol: 0, Shift: ")" },1 e+ Y2 f) p7 h2 J! d6 N
1: { Symbol: 1, Shift: "!" },
7 m( D5 n$ v- l2 T9 S* q
2: { Symbol: 2, Shift: "@" },8 z D% k' y8 e0 c) Q) J
3: { Symbol: 3, Shift: "#" },8 Z8 B3 `/ }! Q! x: l. X
4: { Symbol: 4, Shift: "$" },9 c: q; C3 g% t( r\" ^( d* m
5: { Symbol: 5, Shift: "%" },
1 k6 m& f5 I* ~! Y0 @
6: { Symbol: 6, Shift: "^" },
* n4 f2 i9 d7 Y* q\" b% e# ~\" E
7: { Symbol: 7, Shift: "&" },: x* H* n! B) _8 P/ w, D
8: { Symbol: 8, Shift: "*" },3 M1 l( ?\" G- m7 ]
9: { Symbol: 9, Shift: "(" },+ j, v$ D& x. A: [9 }
a: { Symbol: "a", Shift: "A" },. s7 [. R8 O! z) U0 V) j
b: { Symbol: "b", Shift: "B" },
r' ]: I% f( p& V! @$ D
c: { Symbol: "c", Shift: "C" },3 \: H, J/ l- E) n5 ^
d: { Symbol: "d", Shift: "D" },
9 X$ i6 I, E# T9 ?: {8 C% ?
e: { Symbol: "e", Shift: "E" },' L' P2 y9 ^4 f' W; q( N) `
f: { Symbol: "f", Shift: "F" },
! L/ \- r\" c. W& d* `# S
g: { Symbol: "g", Shift: "G" },
- U2 j- {7 C: ~9 V6 J- p) I5 |
h: { Symbol: "h", Shift: "H" },
\" H( S0 { W$ k. |: g$ |4 m; z
i: { Symbol: "i", Shift: "I" },& t4 T. c6 N; F4 l
j: { Symbol: "j", Shift: "J" },) I& Q ` E; A1 w% N& W
k: { Symbol: "k", Shift: "K" },0 o5 t7 M r, T6 O3 ~+ \% n
l: { Symbol: "l", Shift: "L" },
* p2 O( t& ]9 |( q6 E* X8 \( k
m: { Symbol: "m", Shift: "M" },
8 [9 o. @- u/ J: i( z: B7 V\" W
n: { Symbol: "n", Shift: "N" },
* i\" W3 h& E% H! R\" @- T% G9 P: D! c
o: { Symbol: "o", Shift: "O" },9 H ?7 [' h$ ]% |7 H `
p: { Symbol: "p", Shift: "P" },\" U5 R3 n\" I( @% s5 T
q: { Symbol: "q", Shift: "Q" },& ?# ?( X& m: M
r: { Symbol: "r", Shift: "R" },+ I$ \: r C5 ~8 B
s: { Symbol: "s", Shift: "S" },
\" g! I; {. E. A4 G$ I
t: { Symbol: "t", Shift: "T" },
* d( H0 ]- o5 J% u5 e
u: { Symbol: "u", Shift: "U" },: [3 S/ q4 y! g/ d7 X
v: { Symbol: "v", Shift: "V" },: s1 K& {- i* D. K2 \- e
w: { Symbol: "w", Shift: "W" },' c X, S8 {' x( ^# l
x: { Symbol: "x", Shift: "X" }, t2 U# C% o# x6 B$ V0 n
y: { Symbol: "y", Shift: "Y" },# @1 ~! a0 ]5 k) f& {
z: { Symbol: "z", Shift: "Z" },
% M* d( X1 {0 ], A$ b$ G( v$ E9 S
"`": { Symbol: "`", Shift: "~" },
/ D7 {# P\" u3 j9 q
"-": { Symbol: "-", Shift: "_" },
$ i& o5 @0 x) i. C
"=": { Symbol: "=", Shift: "+" },- O: [0 D1 [- i7 O1 o% Z0 P
";": { Symbol: ";", Shift: ":" },. M' p, |6 e2 {/ Y/ T
"'": { Symbol: "'", Shift: '"' },2 Z; K+ c; r7 k, l7 |* i! ]% K
"[": { Symbol: "[", Shift: "{" },
# i\" e* O, _$ s5 q: T) k) L
"]": { Symbol: "]", Shift: "}" },/ i' h& D: V9 M. u* C\" w
"\\": { Symbol: "\\", Shift: "|" },
# ]/ ~9 x\" v' x
",": { Symbol: ",", Shift: "<" },) b+ B2 K) S4 W f# \& U- v; O
".": { Symbol: ".", Shift: ">" },
0 X( m+ M! f+ l
"/": { Symbol: "/", Shift: "?" }, v+ u5 J5 `5 k/ c% T8 Z+ @. U
Backspace: { Symbol: "⌫", Shift: "" },
U( g3 v$ \- J9 h
tab: { Symbol: " ", Shift: "" },
: H: x3 l\" D) E% M5 K6 e\" } Z6 \
CapsLock: { Symbol: "⇪", Shift: "" },
& {. h/ f& X5 T0 h- ?& L! Q
Shift: { Symbol: "⇧", Shift: "" },
q$ z2 E% ]. o9 c- m% W* J9 o
Enter: { Symbol: "⏎", Shift: "" },
. R' g9 ^4 v4 R* U* ^9 }) q2 a
Control: { Symbol: "⌃", Shift: "" },
/ r0 \$ u' b) v& B* g# ?7 d
Alt: { Symbol: "Alt", Shift: "" },
1 ]) U- v1 v8 Y- X, Z/ t3 Y
Meta: { Symbol: "⌘", Shift: "" },
$ _; B5 H; W- |& C A9 M' ?
ArrowLeft: { Symbol: "←", Shift: "" },
3 C: v# B9 J+ h: y
ArrowUp: { Symbol: "↑", Shift: "" },
& N6 c2 W9 ~0 O5 D+ P7 x& M
ArrowDown: { Symbol: "↓", Shift: "" },
% B3 n' c: J' @; I, P7 a4 B
ArrowRight: { Symbol: "→", Shift: "" },
/ Q$ E V0 k: `2 t7 c. ?
" ": { Symbol: " ", Shift: "" },, H( ]! O: u7 _4 Y y- x
};9 V' K1 A- I, Y9 H3 n5 r\" n$ j$ ^
let buttonMap = new Map();
7 t0 W; |' @, [' b1 b- \: X
let height = 32;0 r- r& _. Q( u7 H! y! i
let margin = 8;- I+ f- }5 |; g4 a0 S' {2 Q
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
, c4 U8 H/ f! {% r
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);9 @' \! E\" T- M Z
for (let row = 0; row < keys.length; row++) {
2 [/ F4 e0 z2 B# G% v# W
let x = 32;
5 @0 t. z! Y\" V3 Q z* |5 {7 V
let prev;
1 R1 V; ~( a- ?! g: ^# K( q
for (let i = 0; i < keys[row].length; i++) {
. \5 X5 L5 G# m$ k* S
let key = keys[row][i];) @9 c: z8 b( g0 F
let width = 32;
- i. f$ r. ]& [3 e7 B2 ~5 ^- b% _
let button;/ D# ~3 {* A0 | T; H( k
switch (key) {
4 t1 U ~1 \* u0 u. ~& f$ S& P( r2 i
case "CapsLock":
P/ n! T' g+ e5 E. O4 n
button = capslock;( k& C- Y+ |$ E/ h0 i
width = 64;' ]' S- u& R\" N- m1 g
break;/ i7 w7 v3 G) F; e
case "Shift":
! q7 X) s5 i G( |
if (shift.x === 0) {
: {, x! J+ [7 J/ j( X2 H8 I& h
button = shift;
7 L, [# g- R$ e
} else {
% g6 d( ?7 N8 N+ c( s$ j* D3 N9 n' g
button = interactive.button(
2 K) U7 M) Y* M- g, s M
0,- T% ]3 n2 g, |
0,
! }0 K1 k4 B5 |8 p; _
keycodes[key] != undefined ? keycodes[key].Symbol : key
B7 Z# q! `5 u
);
8 W& Z/ R. [, d$ j- z8 F3 m: V# m
}
* S1 [. x! K) b( [
width = 90;( h% F+ X% B9 F9 q$ q# E: c
break;
( z E# w+ F. _- [/ u
case "tab":
1 q2 A% V- ^* N* s; r0 A
width = 50;
6 F# M0 X* @3 d: P+ U; p, S8 D2 f
button = interactive.button(- z; C+ u* n, e7 T
0,. J/ @0 B3 K$ I% c- V' d8 @
0,
1 a* c* F\" B- a+ _; Q
keycodes[key] != undefined ? keycodes[key].Symbol : key4 f: X' @; _8 b3 @6 C
);
) M/ `( F, V# G+ o
break;. ^\" `1 \ O2 M3 C4 e9 [5 E, w
case " ":' A9 V5 {/ a9 w( t
width = 176;
4 ~2 ~* k2 x* x0 X+ J7 e! v2 k0 x
button = interactive.button(
# G0 k. q9 z, s6 b
0,
/ ~- i; m+ u; u+ \' y9 k
0,/ M/ r& [) O1 \& F5 N Y
keycodes[key] != undefined ? keycodes[key].Symbol : key
. e\" z- l\" ?8 s1 L0 A( s5 S9 o
);
, v i: |5 E8 y# g: B4 B% g' b7 d7 p
break;
+ {* Y2 j3 Y; X2 K j0 h5 z( s
case "Meta":1 z) o1 U3 @6 f\" b! j s
width = 50;
2 M0 Z( u1 w8 O i ?' t5 v
button = interactive.button(
( \- Z, z9 _& Z4 Q3 W: e- \
0,
, D( m\" A s& g* H! w
0,
1 x+ `+ i1 V: ]. o: n
keycodes[key] != undefined ? keycodes[key].Symbol : key- l) G0 L8 h2 b% [7 `: d
);
' G! e2 m' {, D\" N! y2 ~
break;2 J) i/ f+ D7 i9 H9 o4 }2 r
default:6 ?8 P7 {& I) u: E( z
button = interactive.button(
& L- `' z. N r, i
0,! {! h2 K6 }. ?6 V' T8 S6 O
0,
* f4 _' m7 h6 F% w' x+ p0 y5 d: E) v
keycodes[key] != undefined ? keycodes[key].Symbol : key. L- H W# Y! M4 Y- n
);0 O0 U) r( E* l/ h. T$ J+ `( K
if (keycodes[key] != undefined) {
* d, l* t\" B: k+ {\" G' {6 D
if (keycodes[key].Shift != "") {& S5 m P( k* s, a5 `
button.addDependency(shift, capslock);' l* ^7 z& W4 v9 M3 G) O# R
button.update = () => {, t. d( s0 P% H3 ~- v
if (shift.active || capslock.active) {
. `5 h! a [) d\" g+ A
button.label.contents = keycodes[key].Shift;& T: s9 P; c Z; e
} else {: f3 @4 H: J) C- m, [+ a# u' O' f
button.label.contents = keycodes[key].Symbol;
. W! E) n. A+ H0 D# {
}& Z$ i8 Q ^\" v; W
};0 b& O- L\" e2 M6 G: d; `
}) v9 j/ C6 `: D3 h6 N
}
' f* y2 x, A. z, |8 s) g
}
button.x = x;
1 f5 D: h3 x* L E# R# V* D; `
button.y = 64 + row * (height + margin);
! D! [/ t6 T, `5 v' i- W
if (button.box.width < width) {
9 B5 Q+ i- ^/ n! T3 O
button.box.width = width;
: ?' }5 h/ n/ `- v
}
let bbox = button.root.getBBox();% ~. j) r& y9 I$ Y9 C( q0 c6 B% p
x += bbox.width + margin;2 Y0 r/ H# K- R1 @\" m
buttons.push(button);( ^* }! m/ I O8 m* P
prev = button;\" V- g: A$ p% e, n* y
buttonMap.set(key, button);: i2 M- I3 R1 i6 e8 c\" j; T, E: x
if (key === "ArrowUp") {
/ f3 [% L0 |: r. ^
button.box.height = 16;
1 Y L\" j8 `$ B( K
button.label.root.style.display = "none";
& f) `1 Z1 n# G: t# Y+ w
} else if (key === "ArrowDown") {
% x2 B9 U3 p+ W( i( u; o
button.box.height = 16;
- m* M# V e Y\" N7 r: E
button.x -= 32 + margin;
- J\" h' T1 \& u6 v4 X. t, j- [! E
button.y += 16;1 j) E6 [5 E; i. W, ^
button.label.root.style.display = "none";+ L: y# H9 H! ` g% j c. z7 R, I
x -= bbox.width + margin;& ~+ g; [+ ^; j# |6 I0 y) Z
}/ y$ C/ Q0 a6 W9 [' a; j% n
}
6 Q4 y% n# l4 L/ O, o; Y
let right = prev.x;2 z\" D0 ?) n7 o9 G+ `
if (right < 630) {$ z3 P6 l& x* F2 u\" }$ X
prev.box.width = 630 - right;5 t0 x1 V0 U6 i) i
}
& u+ U- D0 d' T9 B
}9 M+ }( H' d. [* w, w9 g
// console.log(keycodes["0"], shift, capslock);
6 V. ?4 F/ R2 ^
let active = [];; n/ w# z\" i& v( f7 q- b\" M
window.onkeydown = function (event) {
% x7 w' B1 |5 C& O; t; D# v+ O
for (let i = 0; i < buttons.length; i++) {# ]+ Z+ |! b- h
let button = buttons[i];
3 Y1 r! T\" @\" C, m9 T3 i. T
if (3 }$ W# p% B# I- j: v
button.label.contents === event.key ||
& W% ^& e9 {5 n% h
(keycodes[event.key] != undefined &&
5 a' X2 x: ]! Z, f8 H+ q! I
button.label.contents === keycodes[event.key].Symbol)% k1 h, T5 J( V4 _! d& @8 A1 g+ K
) {: |5 e ?* Y\" W& E7 L
button.box.style.fill = "#f8f8f8";
& p* ^+ ?: h3 E' O8 b4 M
button.label.style.fill = "#404040";- t0 c\" D, `1 h% y( S: m! Q
button.active = true;7 X; x\" W9 Y2 A4 _7 V; ?; z\" o
active.push(button);: ]# j4 V! w! ^
}
) \2 o& X# t. e
}
: r6 |' {; Y3 g, D9 e
buffer += `'${event.key}',`;& m2 q! f0 t! w6 O9 ~1 [3 l3 |
};
0 N; u% d. w) q
window.onkeyup = function (event) { k7 u2 ~$ w- L7 d
let newActive = [];
* h- ]/ O9 c& ^. a- W
for (let button of active) {! O7 Y2 ^0 x/ E( z4 Z; _
if (
( ~- Y4 V# G( w% r, o+ S
button.label.contents === event.key ||
$ s; a q) P k8 t4 D
(keycodes[event.key] != undefined &&& R\" S) |9 [7 B* y$ x
button.label.contents === keycodes[event.key].Symbol)
1 W* G8 j8 ~) v) j: b1 {
) {
+ j+ N0 \+ e- q+ I8 g. w
button.box.style.fill = "";8 x, e/ W* F\" F\" z+ V! t
button.label.style.fill = "";5 ?: T1 w8 w$ ^/ Q
button.active = false;
) ?; [\" M+ b4 q5 C, L
} else {
\" `5 v; o\" c) k
newActive.push(button);) f% b/ v* l( G! U% x& `
}* p8 J) U% g\" T' ^: ^
}. K2 x# N6 q8 D$ ~+ W6 w4 ]
active = newActive;$ P1 z$ Y\" h+ b
};
* K- y% ?* z2 P! G
let bbox = interactive.input.root.getBBox();9 y* ^) T @% D) R; M5 v
interactive.setViewBox(4 }7 n: {8 ^6 ]1 C* C3 s) m3 P
bbox.x - margin,
/ J! Z# J' y) }/ F
bbox.y,+ d, _5 p4 g0 l6 E8 l. c' `8 h
bbox.width + 2 * margin,) O, ?7 U5 M) C% K5 y( `4 ~
bbox.height% Q' g7 {9 D- C/ R
);
3 n7 r4 ~+ O, P' V\" k1 Z
//# sourceMappingURL=keyboard.js.map# N# B$ A, ?1 g$ n9 W# a
) K5 ]3 X; j2 w8 h