使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>- F) e$ u' ~! _9 P6 \% {
<html lang="en">
- {* Y7 Z8 Z7 D. K' Z
<head>
) n& c; k6 ]- u$ d/ H
<meta charset="UTF-8">\" q& D4 ?. F' r o! F
<meta http-equiv="X-UA-Compatible" content="IE=edge">
' G# I2 Y4 j) O# D. F: B' [
<meta name="viewport" content="width=device-width, initial-scale=1.0">& ~4 U. l8 Z% h, r9 j
<link rel="stylesheet" >( w$ t8 p+ J# ~0 P
<title>vector examples Keyboard</title>
8 Q- y2 c i' r. i+ z6 F
</head>$ c7 {4 ?+ Q9 a. z, c8 V
<body>
! H7 O\" ]# F* {/ m! @
<div id="keyboard"></div>% |4 a: [: {0 k% k
% s6 J) J$ ^: ^ I& F* C! C1 x
<script type="module" src="./temp.js"></script>
\" n5 s7 K/ w' T9 n3 h' _9 d# V
</body>2 L4 U% G) h3 M; q$ e* H
</html>
- y) W& f1 e3 J6 l8 H

复制代码

import Interactive from "https://vectorjs.org/interactive.js";4 ~( {: _0 t6 L o, i5 K! d% ^
console.log("Interactive", Interactive);+ ]8 H9 ]2 j4 G) i; S. {; {6 Y

复制代码

/** V: w* M( ~& t! O, M! j
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard5 ~& ^ F4 W9 F; N
* @description This interactive demonstrates how key board input can be used to add interactivity.
7 M& B5 `# ^& o1 }/ P1 ]) V
* @tags [input]
3 L7 l' Q1 Z3 b
*/
$ d4 {1 N: {2 T; c. G
// import { Interactive, getScriptName } from "../../index.js";
8 M D# n; V$ S. [, o& I\" X/ `
// let interactive = new Interactive(getScriptName());
# z1 D( ?; v2 K
import Interactive from "https://vectorjs.org/interactive.js";1 O3 k3 z4 n8 V6 Z! Z* a
let interactive = new Interactive("keyboard");
# m/ s( { {\" H2 X. d3 f' A' L0 ]& z
interactive.width = 768;2 r6 P6 {; i3 |* l7 r& H\" s+ T
interactive.height = 300;
6 X* U% h4 Z8 T, z& _
interactive.border = true;\" l1 ~! h' E# q6 l1 F
let buffer = "";* b\" L+ m/ ?$ L. x
let keys = [$ u# {7 H. r\" e
[. L' T1 q3 z! N' a6 }# P% H. _
"`", W\" C' @. Y# M6 }0 s1 J
"1",
1 V/ D4 q7 v, W\" z& S) ?1 n
"2",8 ? k\" W4 V% ~( K6 [$ B' O( Q
"3",0 @9 n! A6 R7 _$ S. X# M2 F% r\" N
"4",% w! k+ j H3 x. f- f& G: t% r
"5",( D: ^- ?8 {5 o, ~ z# S
"6",
5 T0 Y, W5 b* V% N
"7",
; ? V+ N4 c& \& q
"8",
4 r: G\" |2 l5 w9 e! N
"9",: Z# l7 F1 Y2 e' g$ Q, w5 B! [
"0",
* c ~; t [$ A, b2 O
"-",/ [8 I/ G1 E4 O. e( v
"=",6 h& J2 @5 r6 x) q0 q5 u; Z/ g
"Backspace",
2 C. q- \7 S, P* R& J9 }, e9 m) c
],
f4 a$ p7 p% L5 J' G& g6 p5 V6 r
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],4 P i3 q- D0 w4 P( d7 c3 E! ^
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],\" B& K* i; G\" Q$ h& e7 w\" S( @3 A8 G
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],. L& F& o7 d7 J( ?7 q! e2 Z/ `
[
; K( p0 ^6 C. D\" K6 T
"fn",. {# ~/ Z- y7 P% y% J% g! r/ [7 L
"Control",
) B# A1 h! g4 B* t, K\" r$ m1 V
"Alt",! z8 j\" ~# P2 a\" M j
"Meta",, U; b6 [7 S# [0 E+ K( R1 A
" ",
' |& X. ~. e2 X- X6 W2 M
"Meta",7 |: m3 d. X3 m6 N2 h. k/ P( X/ e
"Alt",: f, ~9 F( ?2 p9 [2 U' F
"ArrowLeft",
3 b/ p- Q* B u+ o* S5 I
"ArrowUp",
* u% f* |( V# G: `8 J, E
"ArrowDown",' w: s+ P: m' b- R. a; _2 ^
"ArrowRight",+ Q( } Z\" u# I) O4 F
],
$ p: q7 F0 k9 p$ ]4 t1 U$ F1 j
];$ k2 n6 D. s( o: e2 I; ^8 L/ b1 y
let buttons = [];% O0 E! C: W, S
let keycodes = {7 P3 Y: N- ]) i+ L( M2 C
0: { Symbol: 0, Shift: ")" },6 u, r7 M6 ?+ ?7 R. b' v3 U
1: { Symbol: 1, Shift: "!" },# g4 D/ W' \; {6 U
2: { Symbol: 2, Shift: "@" },
& m- b9 A2 o( R! Z
3: { Symbol: 3, Shift: "#" },
3 V2 J6 j2 k+ X7 }. _
4: { Symbol: 4, Shift: "$" },$ D9 j; ~# Q n
5: { Symbol: 5, Shift: "%" },
4 c* S8 a9 R1 p, \
6: { Symbol: 6, Shift: "^" },
; c2 F; s8 g0 Q- z4 m' v5 b! L/ C
7: { Symbol: 7, Shift: "&" },( ^6 ^# `! J9 G# F: S, `, g- g
8: { Symbol: 8, Shift: "*" },
; \0 f, k' {( O7 R% ]
9: { Symbol: 9, Shift: "(" },4 u+ J( Z, \/ c% w& Q
a: { Symbol: "a", Shift: "A" },
1 l0 B# q! o* }0 l S7 A- r) V
b: { Symbol: "b", Shift: "B" },
1 j( s8 s- M3 H
c: { Symbol: "c", Shift: "C" },* d& e, V% t8 @9 n& g6 |* O
d: { Symbol: "d", Shift: "D" },1 X' _1 @: n. d& X
e: { Symbol: "e", Shift: "E" },
! S8 {2 `! x9 h) `1 v
f: { Symbol: "f", Shift: "F" },( B8 M- M+ |9 V
g: { Symbol: "g", Shift: "G" },& R, D9 \) V X& N
h: { Symbol: "h", Shift: "H" },6 N( g4 Q v$ F& B* x
i: { Symbol: "i", Shift: "I" },
- B+ m\" c\" e4 A, i
j: { Symbol: "j", Shift: "J" },# j8 b- O. _1 s' L' O
k: { Symbol: "k", Shift: "K" },* m. @4 ~8 ?7 ~9 Y+ p1 A
l: { Symbol: "l", Shift: "L" },3 s* l6 p8 q5 ~- ~& ~8 K& N
m: { Symbol: "m", Shift: "M" },
3 Z, K' f+ V) w3 L+ Q. S9 y
n: { Symbol: "n", Shift: "N" },
. J9 s! Y) k, v4 f# V; ?
o: { Symbol: "o", Shift: "O" },
6 f$ O5 T4 M3 E. V\" j+ t; v4 @
p: { Symbol: "p", Shift: "P" },
: X/ M2 w f5 j r4 _
q: { Symbol: "q", Shift: "Q" },
3 `0 x. e- j& z2 r- m1 |# T4 H
r: { Symbol: "r", Shift: "R" },1 X\" g2 X3 v7 q+ O8 N$ O
s: { Symbol: "s", Shift: "S" },3 X- _( t0 F; p6 F' Q9 v# D
t: { Symbol: "t", Shift: "T" },/ f- k+ A; g\" G3 n& Q( f
u: { Symbol: "u", Shift: "U" },8 c3 n) T: W- I# L% ?3 @8 L7 P
v: { Symbol: "v", Shift: "V" },1 k8 L) u6 _! P1 N* d
w: { Symbol: "w", Shift: "W" },
' a5 H& t5 O0 \- g
x: { Symbol: "x", Shift: "X" },
7 \3 A3 y. x3 A
y: { Symbol: "y", Shift: "Y" },
$ T* G+ B5 g& w) q& D/ s5 k
z: { Symbol: "z", Shift: "Z" },' T1 m* j( b8 r( x! A$ n8 x
"`": { Symbol: "`", Shift: "~" },
1 A% ?4 {7 x& ]
"-": { Symbol: "-", Shift: "_" },
Q# y& z6 x/ c j5 \7 g1 ?# n
"=": { Symbol: "=", Shift: "+" },0 L! r- Q3 a% X$ ]3 v: f% y/ c: I! ~( q
";": { Symbol: ";", Shift: ":" },
0 j; L+ l3 s3 P2 U3 j
"'": { Symbol: "'", Shift: '"' },5 k9 D' } ?1 s
"[": { Symbol: "[", Shift: "{" },2 F( W% M0 ?2 J9 H# f
"]": { Symbol: "]", Shift: "}" },% z' Z: R2 o+ ?2 q0 J
"\\": { Symbol: "\\", Shift: "|" },8 Z7 j l/ a( v g0 \) Q
",": { Symbol: ",", Shift: "<" },
$ I' V( r9 o8 y
".": { Symbol: ".", Shift: ">" },$ R; P0 Q- K0 K
"/": { Symbol: "/", Shift: "?" },
6 T5 n3 O, x2 s# Z8 x1 f7 Q
Backspace: { Symbol: "⌫", Shift: "" },\" f1 z4 u9 w. q
tab: { Symbol: " ", Shift: "" },
' m. s/ C+ y# m5 @( B\" A0 y
CapsLock: { Symbol: "⇪", Shift: "" },
) F6 {0 _$ J, U; v( ?# m5 @
Shift: { Symbol: "⇧", Shift: "" },
; I* i/ p. Y$ i( e2 W o$ r$ N
Enter: { Symbol: "⏎", Shift: "" },
! v5 q- k, N- K4 V( V
Control: { Symbol: "⌃", Shift: "" },\" `- W8 x! L4 N7 Z) W1 q
Alt: { Symbol: "Alt", Shift: "" },
a/ w$ K6 w8 l0 u8 O- N7 \\" U
Meta: { Symbol: "⌘", Shift: "" },\" J& r1 ]. G8 Q
ArrowLeft: { Symbol: "←", Shift: "" },/ L) c7 ?; G1 K
ArrowUp: { Symbol: "↑", Shift: "" },
) z, [6 N, o. n5 w
ArrowDown: { Symbol: "↓", Shift: "" },9 Z$ O/ f- [$ [: o# n4 J
ArrowRight: { Symbol: "→", Shift: "" },9 A' c( @1 X# J7 ]( o7 b$ m1 _
" ": { Symbol: " ", Shift: "" },
- K6 i5 ^- ]( }( V2 L
};9 M. j* _# @, R) z
let buttonMap = new Map();
' v0 G3 n3 Q( t1 H) D+ {
let height = 32;
7 t3 S+ f T1 Z\" K5 w; X
let margin = 8;
! {4 s\" C\" h: {$ }6 z6 G1 j
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);$ p2 U3 R) M( t4 G0 a2 Y/ @. p
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);\" h6 W! Q' z/ N8 [3 `. q+ Y; ~8 `
for (let row = 0; row < keys.length; row++) {
5 E; f; ?4 b8 F$ I# X2 q
let x = 32;: O) A\" r f4 K\" D% V
let prev;
( s! X t9 T: _6 i- _
for (let i = 0; i < keys[row].length; i++) {
$ V d7 \9 c0 N+ D5 G+ v( S
let key = keys[row][i];( \! v5 f! W8 D4 g! D
let width = 32;; G+ v0 x2 C: y) q+ K! P
let button;
\" f- p1 H/ S, \; X9 \
switch (key) {
7 h# Q' [! U( S7 m( Q5 b1 B; B
case "CapsLock":
+ ~# D9 K9 g; m5 X) o
button = capslock;' K0 R' v X# [* E' o7 O% v- t
width = 64;% L\" `! t0 F# v E4 A1 {3 x# P4 I
break;5 k- _) L, N5 ` ^! S
case "Shift":( x; K0 n3 F A0 `6 s\" k* Z& Q
if (shift.x === 0) {3 p8 W& ~0 x! [7 F J
button = shift;$ F' v: c9 c7 F
} else {4 v |0 S: Y6 J9 N
button = interactive.button(
8 G/ `# S# \( x: a/ y
0,3 S\" z) Z% U) e/ a; O( P/ g! ?& W
0,5 g7 x% c* O9 V- A8 B
keycodes[key] != undefined ? keycodes[key].Symbol : key
. ]( T+ ^ J4 w* X* {
);+ H* J( g, |$ V; m' X! `/ p
}1 H N! H: |& B8 p
width = 90;
0 b. C7 _& {; l; Q% `( A0 N
break;2 @2 X- N) i4 R m/ i
case "tab":
( k% c2 A, w. B! S% Z0 l1 C% m7 N2 y
width = 50;
, T/ f( T% |: i5 [5 Y
button = interactive.button(
* {; ]# j- o5 B, d
0, k+ ^3 c2 E- ~6 X1 V% v
0,
* _5 m2 [: m- }- @
keycodes[key] != undefined ? keycodes[key].Symbol : key
0 G7 V D* j' s) E
);0 e6 s7 D+ }) L9 D; m: F5 f5 r- X! N2 F
break;3 I& w' C( s' V1 e2 A' n
case " ":
2 v$ o% k1 J5 Z7 [ W# `3 f; ~
width = 176;
7 p* I5 {- K2 t f
button = interactive.button(\" H: |' B# F: m$ n$ O/ W
0,, R- S1 w# K6 x: E\" {
0,
# {; n! d2 N% [6 _, i3 A5 z% Q& D
keycodes[key] != undefined ? keycodes[key].Symbol : key
$ u/ M( T: Z- }* x1 _3 d
);) y9 N% l: P# K) H& M% n9 W. U1 `' O' z
break;
1 M$ [\" l& K- `. q3 q
case "Meta":8 a5 u e( M' b, v) h4 Y$ a
width = 50;
) L. G% x# C\" G6 w% p$ t1 S# P
button = interactive.button(% c& J4 q0 x& c
0,
% I\" O1 b7 g# o& M! m! p
0,% b9 L3 j\" p+ o4 H: v
keycodes[key] != undefined ? keycodes[key].Symbol : key+ E+ w! H9 L! m- t7 f; ]
);
2 J9 b( ` H* j5 ~+ F
break;3 s/ F0 R6 X- d+ c7 ~
default:
6 g( o Q. C9 c( f( `2 G7 t
button = interactive.button($ ` b$ [4 Q! ]) `/ ?7 \
0,
- W* l, f4 C8 X% @6 S% j
0,8 _8 B* s9 H! f2 r8 R
keycodes[key] != undefined ? keycodes[key].Symbol : key' L' y2 N4 V( X) _; Q3 U+ _
);
1 J4 n9 P( k: o, e. J3 B- U\" o0 q
if (keycodes[key] != undefined) {- i, ?: R# P( Y1 Z
if (keycodes[key].Shift != "") {. `& O& ? ~! }9 E4 H, C1 |: C5 {
button.addDependency(shift, capslock);
# ]3 ~$ H& X9 Y U7 _0 d H- u* O
button.update = () => {! W\" a/ F4 A4 T, ^* U
if (shift.active || capslock.active) {
6 h- F- h4 d% j! N+ v
button.label.contents = keycodes[key].Shift;: Y( r* s) k+ R: }; M+ I' t
} else {7 a4 Y0 H* D1 R, u
button.label.contents = keycodes[key].Symbol;
6 c' S# ^( t4 o' q& a3 R
}# |5 o& I! u( g- ?$ l0 s k
};+ u9 l: f# p5 @; |0 E
}# ]( ?5 [) b8 @8 i6 @* |. Q i; R
}# M' N\" o. u$ }' x# `8 z( s; ?
}
0 S* [* q1 i* ]0 y
button.x = x;3 c$ ~) |; z2 d$ t9 @2 U: g
button.y = 64 + row * (height + margin);5 v0 U& a8 \+ X0 ], R7 F
if (button.box.width < width) {/ H' n1 U; l$ L8 U0 T
button.box.width = width;6 _2 L& M, q' L
}
0 F) m) n$ _/ S, j q0 |1 A
let bbox = button.root.getBBox();' H, k0 J) w1 a3 J0 B3 z6 h. J
x += bbox.width + margin;* U3 r( f9 j4 F4 e
buttons.push(button);
( e! H! G T0 C$ z$ f4 N; U) E
prev = button;
\" C0 {+ o. X$ L/ T\" R: o( F
buttonMap.set(key, button);
1 L- A& N5 w% t/ p! w
if (key === "ArrowUp") {
$ y6 c$ D2 [# U; e2 \& Y; V\" n6 i
button.box.height = 16;
$ s( F: G0 p6 h7 U9 p
button.label.root.style.display = "none";: S3 L8 [1 c6 h. K% k
} else if (key === "ArrowDown") {+ ~1 K. t' |9 `0 x3 f
button.box.height = 16;
5 `# U1 S9 g/ L
button.x -= 32 + margin;* J3 x+ v6 A# n6 C: @5 a ?
button.y += 16;
( l6 X& ~) v8 m# m
button.label.root.style.display = "none";
/ [( a& V, A& O# y1 |3 H\" r
x -= bbox.width + margin;
9 R\" ?7 x2 R u4 |& ^* b\" k
}8 C( F# }6 u% k& W1 J2 q0 t
}
- T& ]- Y3 x9 h) w8 |$ h0 ?
let right = prev.x;0 \0 z. Y! A* T+ D
if (right < 630) {) O' o( t, z0 \1 @& n: M
prev.box.width = 630 - right;
& \( H* i$ c0 t' ^' K9 f
}
' T# J4 d: ?7 N2 M
}0 h& \1 P K$ f4 _
// console.log(keycodes["0"], shift, capslock);
4 I2 s4 ^! g' D+ K8 S7 G0 M
let active = [];
/ i! J- n8 z+ k( T
window.onkeydown = function (event) {
* }. G\" r4 D/ {) B- o+ k+ Q
for (let i = 0; i < buttons.length; i++) {2 X' z; _/ Y# N
let button = buttons[i];; f\" O: `; g: w1 W5 |, C
if (: ~. X' x! X2 W& v
button.label.contents === event.key ||
5 ~+ y; z\" L; X7 Z
(keycodes[event.key] != undefined &&
- a! s& r6 h6 P/ l\" Y! s
button.label.contents === keycodes[event.key].Symbol)
* z0 M3 L2 f9 f. @
) {: B2 P8 n% l' ?
button.box.style.fill = "#f8f8f8";0 E: |7 T0 p1 k. |5 P! U4 }
button.label.style.fill = "#404040";! a4 W& { X% g( S$ w* q9 o3 J2 k
button.active = true;
) ]6 b0 |5 t: c; V N3 x
active.push(button);
3 q: r7 F4 n6 }4 _ D/ w\" W* x y
}/ Z* Z7 K& ~$ L( M5 ~/ @5 Y' q
}
9 V6 V1 `; _, R4 E H. }2 y; z
buffer += `'${event.key}',`;
. A% [8 ~# c7 I- S3 Z# D
};
window.onkeyup = function (event) {
/ I% B0 P0 R2 \\" p+ U
let newActive = [];
! ^7 I& B9 u! Q$ c- u
for (let button of active) {
) y3 l\" U# U9 J\" A; ]- c/ Z
if (
# C) P3 ~# b0 T1 U5 }& ?9 m
button.label.contents === event.key ||
* ^9 c! w7 E1 r\" w$ X
(keycodes[event.key] != undefined &&% a; @! a0 I* S) z
button.label.contents === keycodes[event.key].Symbol)* k9 M8 }& q4 r: k
) {/ ]* E% j+ T, J$ r* x+ P- N% Q& f
button.box.style.fill = "";
! y: ?4 c1 T3 _; p4 f
button.label.style.fill = "";
8 Q3 K) g6 [0 b8 i+ `
button.active = false;# G' [\" Y9 }' I) w\" e
} else {7 C0 B$ f4 ^3 m/ p4 E( ~1 k* v
newActive.push(button);
- }& S+ R, f& F0 p
}4 J, O9 [5 |3 _1 y: M8 Z! d1 y* y
}
- z9 n1 C3 S3 h$ f
active = newActive;- | F- b% Z- i& Y' c4 M& _9 x9 h\" k+ b
};
! O9 V3 d% g$ f4 n$ F' A% ~2 r6 D
let bbox = interactive.input.root.getBBox();+ @0 L _% D8 I* X2 Z
interactive.setViewBox(5 F: g2 W4 m' T6 s
bbox.x - margin,
; l x! d: T. o4 N4 i
bbox.y,: s, E4 ~9 `, h8 A0 U S6 J
bbox.width + 2 * margin,( V! p2 ?: E0 l- a
bbox.height
& e% \/ z7 I& X( v2 g
);) C+ B) V) s- I# ]- A
//# sourceMappingURL=keyboard.js.map
4 Z* H) Q0 q+ f. D/ K
% i' ]& V: h0 v