使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>$ b0 h' q h. d9 V) M\" ?2 x
<html lang="en">
2 T' V$ [3 L/ j
<head>8 ]0 b4 w7 G) }2 z
<meta charset="UTF-8">
- _2 b2 k9 B0 x/ J% @9 _' X
<meta http-equiv="X-UA-Compatible" content="IE=edge">2 K8 h; b( O4 T9 f$ h4 q6 D
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ^4 `! Y* J5 c/ H. |
<link rel="stylesheet" >
# D/ b1 [3 |. K) x* l& F( [
<title>vector examples Keyboard</title>
$ D; w8 g* y, H6 C8 y( ~+ p
</head>
|1 @; Y4 u; L
<body>: `1 C% U& t9 _7 K l, U/ E8 T
<div id="keyboard"></div>0 n, N; r' N4 S; B: {. o
$ s9 V- J1 v! c, @# s, Q
<script type="module" src="./temp.js"></script>
' b6 G9 H# X6 t0 r3 y/ I E, F\" U9 }
</body>. E# {) u+ o( S( h5 N' U- {* m; a/ ]7 t
</html>$ w: O( d) @% D3 X/ U* c2 K. w/ n

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
0 \- R\" q/ t% j& j F& |
console.log("Interactive", Interactive);2 F$ ?* L& L. a/ x) V3 M n

复制代码

/**
, M6 K8 G5 @\" p- ~\" [9 c* _
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
t& V: n4 c% E: U d) y9 _! t# \
* @description This interactive demonstrates how key board input can be used to add interactivity.
2 l: t- ~/ d7 U$ R
* @tags [input]
7 T) H! Y2 v3 n' x+ Y6 b9 g6 `0 b' p
*/
5 y2 G, l$ \5 o8 X
// import { Interactive, getScriptName } from "../../index.js";7 V% `( o* I2 c- p9 s% d
// let interactive = new Interactive(getScriptName());- m& G+ x8 R- }/ F& h3 W
import Interactive from "https://vectorjs.org/interactive.js";
9 n; V9 {9 C4 [& B( c2 `& [5 C7 [
let interactive = new Interactive("keyboard");; [9 |9 F\" Y+ y: J& v P) y
interactive.width = 768;
+ G3 a, T/ O/ b, }! b\" r2 n
interactive.height = 300;, e- ?# c/ U& u1 R7 z
interactive.border = true;6 I& j0 @8 w9 f2 z
let buffer = "";
8 e- }9 d) A6 R* O4 E7 d# y
let keys = [) {8 w7 V\" ~5 j$ S\" P9 F, u- v
[
: P, Q. A/ N* {$ W1 @
"`",
3 k$ S* C( T2 S/ I3 D
"1",
}$ q1 B4 T. | y$ @
"2",
7 G+ J* T2 \4 x: z$ E* K
"3",) [. T' e8 b7 N* f; w7 A
"4",5 q+ F2 [/ T8 G) T* y
"5",
. D5 m- {% J( E' K% A4 d
"6",
9 W2 i4 h6 {1 l& ]
"7",
D% v$ N$ C8 U5 Q1 \
"8",
6 n3 ]\" D5 W3 J( j! a
"9",
9 K; J\" z/ s# Y3 w$ z) A
"0",
4 ~! g1 i- o/ o' s2 @7 r, D
"-",) M' Y2 V1 F6 @7 v' F/ M/ P
"=",
! F) r* G, R1 u% \$ s( q3 ^
"Backspace",! i4 u/ s: K9 u9 l- r+ z. h$ C
],
3 D6 n4 y4 u1 H
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
9 i: q1 e0 G8 S4 n/ q
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],% f* i7 h6 |: q5 j' R- s- u7 g
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
5 |- d( \# |% p f; w: b
[2 d/ A( ^# o- u- k6 C( U, f
"fn",
* }& p G* y$ l1 @6 N: F9 N( d
"Control", E3 V. R& f3 W9 [; d3 z# z
"Alt",, O% ?& \7 [$ r1 E9 }
"Meta",- H: v+ j+ k) I% t& `7 R: j
" ",
h9 U$ b; H4 C* v4 K. e0 g
"Meta",1 p1 f* D: o7 {! d# v- A
"Alt",
1 D7 z f9 |) T4 z8 q2 M9 D
"ArrowLeft",
% Q9 o; T- ~' D! S7 k/ o, Z
"ArrowUp",5 X* Y3 B+ e) l
"ArrowDown",9 X5 g$ E. k: B2 w7 X6 X' a
"ArrowRight",
* U) C' }, ?, c l! Z2 G
],
* ] } R3 o* F* i0 o- y5 i
];- G/ E2 S+ u$ b& y2 P ~
let buttons = [];
. c! v8 t# @1 @- x- H* Y5 x
let keycodes = {
# N$ Y/ E; Q. C3 W; r9 z* L
0: { Symbol: 0, Shift: ")" },
\" l! c* j7 r\" L( ]' S2 W& D
1: { Symbol: 1, Shift: "!" },
+ \% k, G3 Y/ ~6 P' L/ J4 y1 S. J
2: { Symbol: 2, Shift: "@" },7 {+ |7 m0 t\" b3 m( [/ k# v
3: { Symbol: 3, Shift: "#" },2 D+ m, B) v1 R+ l- C
4: { Symbol: 4, Shift: "$" },9 ^7 t1 O5 X' s\" H: Q% i5 d1 A, N
5: { Symbol: 5, Shift: "%" },
8 g1 e/ v7 r$ |3 C' {7 S
6: { Symbol: 6, Shift: "^" },4 }. Z\" A: ?\" \/ y! {+ u
7: { Symbol: 7, Shift: "&" },, }! z4 q; D: e: Y& X6 e6 I
8: { Symbol: 8, Shift: "*" },* |% p6 s% ]1 Q* [& P$ B& H
9: { Symbol: 9, Shift: "(" },
\" f7 l2 A8 a# g9 E% B# X
a: { Symbol: "a", Shift: "A" },
1 F' N2 R: o% J y Z% p
b: { Symbol: "b", Shift: "B" },
& F F2 ?, W- l; H0 n- R
c: { Symbol: "c", Shift: "C" },' O& w; K& O8 D( [\" m- d2 S
d: { Symbol: "d", Shift: "D" },
3 c# W6 X1 D7 s& `
e: { Symbol: "e", Shift: "E" },
6 s5 f* B' S; n7 F6 P/ @6 z
f: { Symbol: "f", Shift: "F" },
3 D- M$ N5 C! A' j: _5 d- D- d
g: { Symbol: "g", Shift: "G" },# [0 }: n5 v+ A1 W* a$ F
h: { Symbol: "h", Shift: "H" },, Z! X' v& V' m: ~3 \2 h; }
i: { Symbol: "i", Shift: "I" },, T2 t# Y- ^. p' c; ~
j: { Symbol: "j", Shift: "J" },& |( c! l; V, i' I
k: { Symbol: "k", Shift: "K" },
9 w# Z- F4 R# o0 u$ Q
l: { Symbol: "l", Shift: "L" },6 D$ f+ m$ N0 u* O# |
m: { Symbol: "m", Shift: "M" },
\" {, Y6 x d8 y; m5 p
n: { Symbol: "n", Shift: "N" },5 [& z/ g0 b1 M
o: { Symbol: "o", Shift: "O" },
& [: T; s5 R; F5 \! b, F# S3 W, ~* m! N
p: { Symbol: "p", Shift: "P" },! m7 W# N+ T0 I S/ s+ S
q: { Symbol: "q", Shift: "Q" },
% J6 Q$ G6 `6 g- ]* t
r: { Symbol: "r", Shift: "R" },
/ Y/ s) A0 |& q, \% @% w2 {' Q
s: { Symbol: "s", Shift: "S" },\" @+ ? B0 `0 F& ~. G! |/ k\" ]
t: { Symbol: "t", Shift: "T" },
; x) y. m$ C9 ~/ G, e
u: { Symbol: "u", Shift: "U" },
8 @% [- p f! Y9 |: S5 \+ f
v: { Symbol: "v", Shift: "V" },
w: { Symbol: "w", Shift: "W" },
5 |$ a+ f1 S* W5 P* Y\" S\" _: q; f
x: { Symbol: "x", Shift: "X" },* f5 L& {4 c' r) d9 ^
y: { Symbol: "y", Shift: "Y" },- Y9 e\" v: {9 a\" U) I0 }- i
z: { Symbol: "z", Shift: "Z" },
7 W, M6 j0 e# w* p
"`": { Symbol: "`", Shift: "~" },
. P4 u! J9 \6 [/ N
"-": { Symbol: "-", Shift: "_" },
! s$ a# L' S2 {\" g: l
"=": { Symbol: "=", Shift: "+" },3 f\" R4 m `1 V( M1 W; s3 h% c\" B
";": { Symbol: ";", Shift: ":" },; p/ V- q; ~0 V# D- I
"'": { Symbol: "'", Shift: '"' },2 Y4 t+ O\" D3 ?
"[": { Symbol: "[", Shift: "{" },
+ B- ]3 ?8 h% c$ i; r
"]": { Symbol: "]", Shift: "}" },; Q, {% k; n\" g& B1 o
"\\": { Symbol: "\\", Shift: "|" },4 i3 L$ v\" h0 }, ^% e( u! c
",": { Symbol: ",", Shift: "<" },
- A% U t9 ?& o9 Y1 \
".": { Symbol: ".", Shift: ">" },
4 Q/ I, u: v1 _9 I5 I2 `
"/": { Symbol: "/", Shift: "?" },/ p, ]# M2 I. d' z5 _5 b
Backspace: { Symbol: "⌫", Shift: "" },
% t; Z7 a7 G, X- y4 `# ^0 c* u/ f
tab: { Symbol: " ", Shift: "" }, h+ i! p& S5 _& H9 @8 n$ w! r
CapsLock: { Symbol: "⇪", Shift: "" },
# Y% b3 g7 c8 I* C$ n) b# G2 q9 s* J
Shift: { Symbol: "⇧", Shift: "" },
. U( U5 K9 M# D2 G
Enter: { Symbol: "⏎", Shift: "" },
5 z7 V\" @1 [& X
Control: { Symbol: "⌃", Shift: "" },\" I: R3 T# J8 I3 Y* }& E
Alt: { Symbol: "Alt", Shift: "" },% j3 @& |+ X& D9 s
Meta: { Symbol: "⌘", Shift: "" },( Z1 W+ A5 O' H/ t7 V
ArrowLeft: { Symbol: "←", Shift: "" },
+ v# K) G: }% ^
ArrowUp: { Symbol: "↑", Shift: "" },! T& X2 z6 o9 ~3 L
ArrowDown: { Symbol: "↓", Shift: "" },8 d\" L. h1 o8 I! v. O
ArrowRight: { Symbol: "→", Shift: "" },8 T+ H7 ]\" I _. q0 ]! Z/ z
" ": { Symbol: " ", Shift: "" },\" v6 v+ [: j! E7 q2 O1 \9 Z: P
};5 ^' H1 L$ J. {\" t) H& V
let buttonMap = new Map();\" ]7 B: z5 t\" e0 B
let height = 32;, Q+ i3 W; B- @; d* N
let margin = 8;
0 C5 X5 c! p7 C' Q O4 n+ N
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
+ D* w7 ^# x, A2 j/ J
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);- n9 K; R* y0 B) J6 l% v
for (let row = 0; row < keys.length; row++) {
+ o; \/ W4 w3 c7 N) w H6 G
let x = 32;, P2 E5 K4 L' c3 ~+ i
let prev;
- U8 ?2 B V1 `3 r
for (let i = 0; i < keys[row].length; i++) { }8 c/ N& C7 X% y
let key = keys[row][i];% U1 C\" n\" K3 N\" C1 o1 `- Q
let width = 32;
/ W\" K+ v1 U\" b+ }- i
let button;
, u, }% M; X) R
switch (key) {: r7 G) S- B! P; x
case "CapsLock":/ }: v3 z7 q\" S& o$ ]
button = capslock;* x o* i- a6 m3 I m: B
width = 64;
+ h# D$ ?4 w+ V* Y4 _% l* {
break;
8 f% y4 w# q\" C, N; m, k4 x4 Z* F
case "Shift":8 h; V5 J* ?! A\" M. c
if (shift.x === 0) {( M5 A1 |# \9 n% c- b2 n% \
button = shift;
% x( P7 @5 w! i7 d7 s
} else {
0 C! y) j; _, }8 M
button = interactive.button(
6 D7 u: R\" p5 g5 i
0,
/ u8 I, z* F( C+ _2 Q5 V5 T( M
0,& _3 r6 s- G2 i8 [
keycodes[key] != undefined ? keycodes[key].Symbol : key$ ]3 @- v$ M' q
);9 m' I& c; U( o) q- k% |$ f( b
}
) a2 Z ]* F) k n# p8 ^' s* e
width = 90;
0 u( t _; x( F
break; t2 F2 {) Z! N! N; B y7 ] P
case "tab":+ _4 v( L' M- {: ~+ d
width = 50;, [0 T# @# G4 e4 ~
button = interactive.button(, k7 n. d6 i5 p+ A
0,
2 @, F/ Y4 ^3 V- m7 i
0,
$ x3 r. v2 z4 O- W0 c
keycodes[key] != undefined ? keycodes[key].Symbol : key
3 {4 \' K8 D, u4 B/ O' u
);/ O) m1 @1 A! H/ R1 s) ^7 E9 G% j
break;% C9 q9 q& L& t7 T) O
case " ":# G6 x2 |, m. L1 ]2 q) I
width = 176;0 I! J2 j/ h3 [0 \\" [2 {2 _: K
button = interactive.button(
7 Z% O/ B, ^! l. _3 N3 [9 P
0,
1 ~0 b\" Y2 u' ]& B* w7 ~
0,3 F5 s( ^. h: c
keycodes[key] != undefined ? keycodes[key].Symbol : key9 U* D5 g9 J- i/ v* V4 ]
);# O) m% T2 p; H& N5 O) j, o\" s
break;
9 a5 d6 H- G$ n- @( \* \
case "Meta":
. X) s+ y! T2 p
width = 50;! D\" p' G/ Z\" s- \& \5 W
button = interactive.button(
: d( S1 I2 s+ G/ P* j
0,8 x8 c2 q3 d; O$ H' {8 B0 L. `
0,# P7 I9 x( A- R q! y# t
keycodes[key] != undefined ? keycodes[key].Symbol : key
1 q. ~2 a# M6 C+ W+ w, [' T2 f
);
+ K+ T1 |! A7 Z: Z8 y6 }6 H
break;3 O+ \2 b6 M3 B8 ]8 D
default:0 K4 N/ c, h8 m& q3 z# P
button = interactive.button(
' ~: ~2 l1 c\" E. t5 t# O, a( K
0,+ s4 j+ D! Y5 R* C! p2 ~\" I$ T: F
0,
' R x I g3 e5 }2 _
keycodes[key] != undefined ? keycodes[key].Symbol : key
3 M1 w5 ^' `0 P2 X; r% S- I! y
);: E\" f; e+ { b' N( s, b
if (keycodes[key] != undefined) {
; w, D5 _6 X& L( u) `( i; i0 ~; U
if (keycodes[key].Shift != "") {
# b. ?& [6 y+ M1 q4 H
button.addDependency(shift, capslock);; z4 v: b! U- [
button.update = () => {$ C2 W$ T( W2 |0 @0 z8 i
if (shift.active || capslock.active) {7 p$ K# _( Q0 w
button.label.contents = keycodes[key].Shift;
& W ?3 k% l7 |9 L; y
} else {
3 z* ^! \! w7 M9 S s- i
button.label.contents = keycodes[key].Symbol;
\" q& T7 v3 y$ d
}
& v# ~) A; O6 B, P+ v4 M- t/ Y9 d) b
};
: |% f, \9 d3 l- ]! g
}0 F$ Q) N @\" } B6 Y
}
0 ]- k/ V8 Z- H' N- ]5 _
}+ E e5 L8 R( l\" @( e; |2 @' \
button.x = x;/ r; R! B% `) H# r5 v
button.y = 64 + row * (height + margin);! K# w3 s\" x/ j0 D5 L
if (button.box.width < width) {8 B K& w/ V% f4 [8 B( W
button.box.width = width;
( k/ p9 w) v$ E2 _; ^
}
, ]: e- x# o M& G$ E, y. d' B
let bbox = button.root.getBBox();# I# ]4 [0 z! T: A: Y* z: @
x += bbox.width + margin;: j, z% @. g& q6 B6 F% X
buttons.push(button);' ~0 X3 G, Q9 d& |. ?: `
prev = button;
8 a4 H& \- {8 f1 E: m% Y
buttonMap.set(key, button);2 M4 d\" X! c4 o9 k0 u+ P) W
if (key === "ArrowUp") {) }' _2 ^; c# V, j9 v7 B1 j
button.box.height = 16;9 O- P5 N. I( @9 Z! R) Z
button.label.root.style.display = "none";
: l( ?2 k\" M) q2 M3 Y
} else if (key === "ArrowDown") {! o8 `- U# ]9 v U, Q
button.box.height = 16;
+ _$ z# x% x! C+ n- Y0 N
button.x -= 32 + margin;# L$ M+ G a0 x, T2 h6 S
button.y += 16;
' d1 w( B( E' F+ R' z, h
button.label.root.style.display = "none";
0 g( h$ \, w1 b
x -= bbox.width + margin;
/ W( f* S5 `. E* e! _
}7 ^( X! k! p7 i# k) J9 A- K T
}
- H ? d- ^5 l! B8 I\" U
let right = prev.x;
2 i: f1 L\" B( k\" b8 @# _* D
if (right < 630) {
4 a/ Y( M% W2 P: C
prev.box.width = 630 - right;
! L/ Z! q: I/ W! [+ q) I
}& r/ @* B' r- u0 {1 k
}
: l4 n+ R/ _, z
// console.log(keycodes["0"], shift, capslock);
5 } E; b\" @& t6 t1 I
let active = [];
# H5 V/ Z+ H3 M\" b$ k% C y+ Y
window.onkeydown = function (event) {\" H) F) {7 @4 o/ C
for (let i = 0; i < buttons.length; i++) {
7 ?7 B6 w% B; [# I
let button = buttons[i];7 P m* q. A6 ]5 J
if (* p% e4 Y3 ?. h: P; _
button.label.contents === event.key ||* b( i/ S9 v' t/ c% } x
(keycodes[event.key] != undefined && Y' D9 P& c. @
button.label.contents === keycodes[event.key].Symbol), g2 ?1 y% K1 S0 }
) {4 F r3 p7 N/ W9 w\" _' C0 q1 G2 ~
button.box.style.fill = "#f8f8f8";8 j# Z\" q+ c, q1 R
button.label.style.fill = "#404040";; P$ @' t3 s0 G, G% s
button.active = true; A( U8 u) b* G8 L$ b6 j% ?
active.push(button);6 \; l) C$ l5 I5 o! `9 q6 Z: `
} n- x7 ]; z e- @& T3 U
}
4 n: t0 j7 B. S. Y% |\" A
buffer += `'${event.key}',`;
! f8 I- l9 h3 q# ]
};
+ C. Q$ A$ H& T! ~3 S
window.onkeyup = function (event) {/ M& Z( U* b1 k- T' Y
let newActive = [];
& [\" ]4 o8 c5 N$ B a: s9 h
for (let button of active) {& x, x& N. x& ]: J# X\" D6 q3 \* U& @
if () g2 k( o- x' ]. J, }
button.label.contents === event.key ||9 g5 n& l: y. S* h
(keycodes[event.key] != undefined &&
: ^! h/ g; D- ~0 X0 o2 ^4 Y
button.label.contents === keycodes[event.key].Symbol)
+ I; J# Q' h C% p
) {3 e* C# a+ y. `\" R3 C6 r
button.box.style.fill = "";0 N( \8 x: O! e* h
button.label.style.fill = "";
1 K& [$ I\" t5 d& \' L8 i) `
button.active = false;
, |# {6 h) a- H% }0 C% R\" b' X
} else {/ k) L( M; e7 P7 a5 d, R: K6 w
newActive.push(button);1 o: J1 F9 L4 J$ [. w9 Y2 R! b
}% a6 |* T+ w/ O' p6 ~6 b A9 {+ N
}' C/ s; ?: ~6 h3 s6 g
active = newActive;+ W3 {8 Q# r. l; T6 F4 M\" s) j
};
& _ j$ s* r! h8 G; `
let bbox = interactive.input.root.getBBox();
' J L' K! J+ B' L
interactive.setViewBox(
4 \8 @8 H) ^8 C
bbox.x - margin,, M* e# @5 e6 A\" i7 K0 q
bbox.y,2 R8 U$ v. ]( w6 N; L4 e+ d4 n
bbox.width + 2 * margin,% u% x4 u5 R* O\" j, |
bbox.height
# C8 E+ j' F3 Y8 w: J# z! N
);( e K$ ?) W$ T% o# b- V
//# sourceMappingURL=keyboard.js.map4 }% X- @\" a3 f* ^7 K# p z/ N# I
$ p$ K& J\" P* Y6 c6 g