使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>0 r- b* @4 ]2 @9 ?9 Z6 k8 u1 t
<html lang="en">; x2 B\" ^. y6 L* L% D9 z/ B$ A
<head>: n$ d: I, E3 ?- J\" D4 Z
<meta charset="UTF-8">8 V$ Q0 F$ i% `! z\" e, p
<meta http-equiv="X-UA-Compatible" content="IE=edge">
; ]1 w* x' C, S; E- g
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5 R# h k' U8 l. ]6 c: o
<link rel="stylesheet" >
2 F+ {( S k* I0 g3 c\" j
<title>vector examples Keyboard</title>
[: P% X/ D$ `0 ~3 \
</head># f+ i9 ]/ t* Z% h# J& v
<body>
/ ~ H% P6 c' g# M) k
<div id="keyboard"></div>; o, Z* L\" J F' u: V7 q
7 s$ O( L2 {$ N% E; z' ?
<script type="module" src="./temp.js"></script>+ e9 D8 v8 C0 w* _; c+ r+ c' ]1 V
</body>
2 O) B' l+ ~, k- e0 d% K u
</html>
! a8 O0 L2 V- A. ^( I\" P

复制代码

import Interactive from "https://vectorjs.org/interactive.js";8 }, k% F* D( ?) v
console.log("Interactive", Interactive);\" b; o3 v) q- k\" i, C\" k' i

复制代码

/**$ o5 a5 \1 }# O% Q0 ?! g8 N6 m& S
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
9 s' v1 D+ u, `# {* \
* @description This interactive demonstrates how key board input can be used to add interactivity.
& l: v# c% A1 g
* @tags [input]% Z6 `! W# v) g) H( Y# z; h- D
*/
, U3 N0 A' Q; b' o2 z C& d/ C
// import { Interactive, getScriptName } from "../../index.js";
/ G# |. L\" p3 s3 I: k
// let interactive = new Interactive(getScriptName());
' `: b0 X; j7 p& O. V* D
import Interactive from "https://vectorjs.org/interactive.js";! d o( q3 ^4 R) o! P6 v& j
let interactive = new Interactive("keyboard");# G\" j* ]3 _8 O$ ]! f+ o
interactive.width = 768;
1 e& X3 p& v& v) d+ y
interactive.height = 300;3 k; {& ~/ ~- A\" w3 B) A
interactive.border = true;
* Q: b l# c+ |
let buffer = "";! ]; g% [8 l# }\" b
let keys = [* Y+ ^/ J. t' s. Q
[
- T+ _8 e3 b( M* n
"`",# [4 a0 H/ O1 m
"1",
6 ]; o& M7 T5 z0 x- g# m- X
"2",
) F! ?% K/ l4 B1 I
"3",
. o, f\" i$ d6 Z4 I
"4", y2 Z/ i+ F+ ?+ u s+ B
"5",+ X9 j$ D9 ~; N4 Q) L; X\" F
"6",
+ B q& J+ |0 S$ p2 a
"7",
: D) S' p* D# _/ K7 Y
"8",/ V* \% I8 f; g/ C) u# }+ C2 @6 x; I
"9",3 F( v8 G% \& I8 r8 \$ U# ?
"0",' p. r5 S+ e5 p1 {- B
"-",9 i0 ?. ?0 d4 r6 L, n
"=",0 u) S1 E' F- A4 ~& w0 `
"Backspace",, `2 h& @; ]4 x7 v& l
],
4 \0 t# W2 C% |1 d1 q& b2 n
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],) B3 q/ b6 P* T7 M; B) y: C
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
6 ~* U0 }, ?3 X/ I
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],# ^' o3 T8 f( ?! ?, Q
[# h0 p. N \. |: ^+ H- L9 e: _4 X$ F
"fn",
/ K7 Z) T& k, F u: Y* V3 Z' j
"Control",
; X4 w$ D. f% |$ F* q
"Alt",8 E2 L+ k; I\" e0 {5 o7 p* B
"Meta",
# f% l- a4 q: |+ v5 K
" ",' k1 q4 g; a8 y
"Meta",
( z/ a( H w! D0 a3 B* b$ Z# F7 V
"Alt",/ w6 x `1 q7 S: |3 f( b
"ArrowLeft",
7 s2 C* B/ L9 C1 |7 M& `8 V3 A, J
"ArrowUp",
, X/ s; N L( d* w& ^* ]& E
"ArrowDown",
. ^# b m% D+ Y* z* v' M
"ArrowRight",
6 ]; M+ l% y( p, ^: _6 w
],
% @/ }# E m8 W2 e$ f
];8 m+ s3 f `- }3 R1 M4 H
let buttons = [];, ], {8 e& ^4 Z5 r* b
let keycodes = {6 X6 U W) {5 s' s\" H
0: { Symbol: 0, Shift: ")" },
0 o0 |+ i6 }% @
1: { Symbol: 1, Shift: "!" },8 i# ~0 j; Q7 g; k* g: x. g
2: { Symbol: 2, Shift: "@" },
# [0 o) R5 r6 G, K$ t
3: { Symbol: 3, Shift: "#" },
1 Z( J& K5 K3 J5 K$ p
4: { Symbol: 4, Shift: "$" },5 a; Z9 U5 H( s) C( ^7 q
5: { Symbol: 5, Shift: "%" },
9 ?- @4 ~7 D' J$ @ |# \8 P# P- C
6: { Symbol: 6, Shift: "^" },
. [* Z6 a) o h\" V2 F
7: { Symbol: 7, Shift: "&" },4 U7 T! M$ n5 I: n( V$ ~9 d
8: { Symbol: 8, Shift: "*" },
3 z' E# T2 }/ h2 d, Y3 E$ |6 T
9: { Symbol: 9, Shift: "(" },
0 L8 _/ l9 V) y* y; q0 K6 Z
a: { Symbol: "a", Shift: "A" },: Z9 ]( K- ^\" t1 e: K& a/ ^ L2 q* K
b: { Symbol: "b", Shift: "B" },
8 Q, b\" {! X4 L9 r
c: { Symbol: "c", Shift: "C" },4 Y' Y5 } U3 f2 }
d: { Symbol: "d", Shift: "D" },
# t+ H% j. {- }( B, q, C: p
e: { Symbol: "e", Shift: "E" },
5 v/ U6 s7 c7 f- T\" {+ q\" k
f: { Symbol: "f", Shift: "F" },
0 I+ p3 h( y0 N6 T9 c& N: i2 I
g: { Symbol: "g", Shift: "G" },4 I2 A$ e6 e; I1 r9 p% g
h: { Symbol: "h", Shift: "H" },3 L8 t9 R$ R4 U/ T
i: { Symbol: "i", Shift: "I" },( V7 Z2 I8 V1 ?. P$ k
j: { Symbol: "j", Shift: "J" },
, M& B2 M% L3 k [
k: { Symbol: "k", Shift: "K" },+ b% T: Z: ]0 d$ A% D! K' C
l: { Symbol: "l", Shift: "L" },
6 @3 p F1 X# I
m: { Symbol: "m", Shift: "M" },; b/ l7 z' A- L
n: { Symbol: "n", Shift: "N" },
' I# q4 G6 \9 u* |7 }7 j
o: { Symbol: "o", Shift: "O" },
5 Y0 Q\" P; ?* w) V; O, ^$ R
p: { Symbol: "p", Shift: "P" },
6 D+ ]+ ?\" e4 g& X$ L6 \' p
q: { Symbol: "q", Shift: "Q" },
; o4 @8 s2 n* U& a0 S6 h+ C: I: @
r: { Symbol: "r", Shift: "R" },
' z& F8 Q* A+ p( w+ z3 k- }
s: { Symbol: "s", Shift: "S" },
9 | {6 U$ m9 b7 {# L
t: { Symbol: "t", Shift: "T" },
( t, I d w* b# D0 J& Q+ u
u: { Symbol: "u", Shift: "U" },
1 E& c( P% R3 k, [( N3 z
v: { Symbol: "v", Shift: "V" },
' L5 D7 j0 Q9 ~/ z
w: { Symbol: "w", Shift: "W" },
3 {0 X3 R4 n0 k4 `# Q. m\" o# C g
x: { Symbol: "x", Shift: "X" },
. f; U2 |; A1 \ r0 o
y: { Symbol: "y", Shift: "Y" },7 y% m, b- H8 w: o8 k
z: { Symbol: "z", Shift: "Z" },& b- L$ C6 g3 {' Y6 T% o; S/ b
"`": { Symbol: "`", Shift: "~" },! S$ c# u# N0 L# y* \
"-": { Symbol: "-", Shift: "_" },; Q( L* N: r3 ]2 G4 q2 y P
"=": { Symbol: "=", Shift: "+" },
8 C0 @; X1 ?) Y, [4 R! f
";": { Symbol: ";", Shift: ":" },
7 K: m4 c% H\" c\" g9 c+ J- [: c
"'": { Symbol: "'", Shift: '"' },
/ }4 X2 g\" {. F\" G& ^
"[": { Symbol: "[", Shift: "{" },
# y. K( x# \ @* ^: Z. g! Y
"]": { Symbol: "]", Shift: "}" },! W0 R0 ~6 Y+ |! \) }
"\\": { Symbol: "\\", Shift: "|" },
$ @4 I% T- |0 o+ @8 V; N
",": { Symbol: ",", Shift: "<" },, t; D C- r4 p2 C
".": { Symbol: ".", Shift: ">" },# b4 u4 {. _7 |( H
"/": { Symbol: "/", Shift: "?" },; p% L# N3 s5 }8 m0 K
Backspace: { Symbol: "⌫", Shift: "" },5 \, w/ u: y0 F: T( U) y3 N
tab: { Symbol: " ", Shift: "" },
- g$ C/ P2 o _! \
CapsLock: { Symbol: "⇪", Shift: "" },
! m- B/ ^( b/ Z4 u& l
Shift: { Symbol: "⇧", Shift: "" }, L\" z1 N6 O, P9 m4 g
Enter: { Symbol: "⏎", Shift: "" },/ L$ w: r: R9 [- ?* S
Control: { Symbol: "⌃", Shift: "" },+ ]# S\" I\" \4 R# g$ _
Alt: { Symbol: "Alt", Shift: "" },
; K6 h9 [1 x) j4 S0 d6 y9 K4 Y
Meta: { Symbol: "⌘", Shift: "" },2 }3 K- K6 ]9 m; [7 Q5 \
ArrowLeft: { Symbol: "←", Shift: "" },
4 ]. n' O- w1 T2 i8 e
ArrowUp: { Symbol: "↑", Shift: "" },$ G4 S/ B' y\" L) G. Y7 S5 H
ArrowDown: { Symbol: "↓", Shift: "" },
+ S9 w. C1 j8 L: ~
ArrowRight: { Symbol: "→", Shift: "" },
# W( j7 M D3 y N7 G7 G
" ": { Symbol: " ", Shift: "" },5 x) v$ {6 m* c0 s+ S7 r5 M- Y
};
3 D* V* P7 D\" f4 F& G& t$ ~2 J: h
let buttonMap = new Map();
d; C\" p/ h/ V
let height = 32;' i! H* N$ Z; K0 ^7 C
let margin = 8;, B4 G4 P- n! i k+ }+ W6 b
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);3 l& z. t& c C8 P2 |; v* T0 M/ N
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
+ k: E$ t ^& z# S1 r/ B5 t
for (let row = 0; row < keys.length; row++) {
3 L3 c9 Q2 W# s\" r7 T. v
let x = 32;2 \7 a1 {6 o& ?. S) X
let prev;8 C\" n V( z: n9 f
for (let i = 0; i < keys[row].length; i++) {$ ~; ?* e$ a, C
let key = keys[row][i];: s2 |3 g* h$ g5 ^% ^
let width = 32;
! a, D, `8 k6 P6 ~; t# i2 U5 t3 f
let button;
\" S0 m% }2 b/ a) F
switch (key) {- T/ V- J: Z' J3 f, G, `( q
case "CapsLock":
\" y& U: G& J1 z7 j9 _
button = capslock;
) X6 \5 l3 ?5 @
width = 64;5 B2 J1 K* [8 Q/ N6 y2 a
break;' S/ D+ |, A! E. c, j7 K9 {
case "Shift":) ~4 i* Z1 Q# h3 ~; l* x
if (shift.x === 0) {# i% J) \* i; a% T m8 ]7 i2 l
button = shift;& h, M' w Q2 G, h- ~7 t
} else {
0 h- ?6 s) j$ U+ ^8 k
button = interactive.button(, U- q$ O$ \( o6 a7 {5 D6 m& d0 x
0,
\" p5 e8 k7 n3 w& z; Q) H
0,
0 l4 X3 d- r% u. [
keycodes[key] != undefined ? keycodes[key].Symbol : key
# \' X! @2 |' s4 ]) l- M) K
); n0 ~9 c6 g( D( ^) J* r6 d0 [: I
}# [, u3 A8 s# I9 t
width = 90;$ Y# o5 W5 B( [, j: k
break;
& x8 b5 b+ ^- R# ~* P3 s6 ]6 G
case "tab":* ~/ R( T* S( H$ }& @. s
width = 50;- N; `6 ~3 p9 Z+ R9 f, f. P: {7 v4 R
button = interactive.button(
/ K/ s3 i& g, j# N: a' J4 a8 T; ~4 V
0,
/ ^5 R8 @# I) {0 b! [\" [5 V, O9 z, }
0,
4 v, S2 [4 Y7 m% [
keycodes[key] != undefined ? keycodes[key].Symbol : key3 s( _6 |6 @\" U% D, I
);( X7 a4 K. }+ E* g, q+ N: T* N
break;. i( N! ~, x; n. B& u1 ?1 h0 J
case " ":% W. u7 p$ z3 \& Z+ m% ]- s
width = 176;: I8 w* J/ v\" j: t
button = interactive.button(
0 a1 B7 e, N+ o% H+ t
0,
2 B& ^. Y) p M9 G\" E8 s6 f
0,2 m) e/ p! U3 W/ V8 p
keycodes[key] != undefined ? keycodes[key].Symbol : key- ]+ L# t1 M8 u ^2 T/ f' {$ k
);
. J7 Q, S\" h) `* @) d+ M
break;$ c9 }0 T& \+ W/ G8 w! h8 z5 a8 f: \/ k
case "Meta":
0 i9 |% @5 m/ @% e( B) k
width = 50;
8 F\" R3 a$ P% ?* @- m; D4 y
button = interactive.button(
8 \) Z& e( A& G\" |
0,- M* K0 Q# e c
0,% @+ z5 A\" P0 F4 Y; r: e$ h
keycodes[key] != undefined ? keycodes[key].Symbol : key; z B6 X- J( \; R2 j% V
);7 e, d6 v( L: Y- T\" a
break;+ r1 l% o9 Q; z& k# G4 w. d
default:1 I4 e3 F4 ^$ I8 W2 I- U
button = interactive.button(3 K# s! i9 i# ]\" f- E0 v
0,
7 d% {8 q2 [* o2 I0 h
0,- G6 k! ^ j, d+ e \
keycodes[key] != undefined ? keycodes[key].Symbol : key S: e# e$ [/ g+ D\" `$ M* I
);3 a' z# |6 W- x5 y
if (keycodes[key] != undefined) {: \% Q+ Z$ s# V4 ~8 }
if (keycodes[key].Shift != "") {
: @) J( I$ [2 C
button.addDependency(shift, capslock);
4 M5 ?+ H5 n, X7 g
button.update = () => {! S! J1 Y8 X7 H4 { `7 [
if (shift.active || capslock.active) {& j2 v' h2 g. B) L! F1 \
button.label.contents = keycodes[key].Shift;
1 i# [5 T. j6 x! G. F7 j' D
} else {% W5 X( i) p8 J0 x! q
button.label.contents = keycodes[key].Symbol;% Q# E: I8 |8 C
}. a: V, {* ?9 K
};
6 x d7 N* R3 O8 ]3 _- ~
}9 b9 g0 b9 _ @$ [, N1 `\" q0 P
}
0 W7 T& o. m# Q6 a. U, F
}* r9 }9 l; n. A; b1 T
button.x = x;
( W' J7 c\" `: p' R* l) ]% `' X
button.y = 64 + row * (height + margin);* I1 S! P0 B9 F# R4 [
if (button.box.width < width) {
5 @/ _$ _6 O* C- w) p f) q2 x
button.box.width = width;9 T9 E( ]& _* ^, X- U' N
}
$ W9 W5 x( x; b% h
let bbox = button.root.getBBox();* z1 O3 w2 u4 i5 U! w
x += bbox.width + margin;
) G X\" \% s: P; Z4 k
buttons.push(button);
# ~# M* C. i5 ~$ \
prev = button;$ R% U% ]5 d9 _# }) l4 D
buttonMap.set(key, button);\" T ?+ R+ Y( @: J3 I/ x3 u5 d
if (key === "ArrowUp") {
# o/ ~4 k0 {7 z% S G* @
button.box.height = 16;( H9 Q% |8 l' B3 M$ p2 U\" K
button.label.root.style.display = "none";
: i& S0 c% g2 S# }3 K4 G# u\" k/ N
} else if (key === "ArrowDown") {
7 ?% R\" }$ n+ Y! O
button.box.height = 16;* a- }: X* r) Y! Z/ @8 e3 a# M
button.x -= 32 + margin;5 P* E0 k$ Y- C4 p/ P
button.y += 16;
1 }+ J0 F, }5 X9 [
button.label.root.style.display = "none";# s5 _: A, g$ t) l3 J
x -= bbox.width + margin;
w4 l) X$ U( \& ~5 V
}
1 V) m: w' b0 _# c' e0 ^2 \
}
9 q! W; `\" ]( t, j0 ]
let right = prev.x;# f/ P) r& L. G: p6 x9 j
if (right < 630) {% o+ ^1 \* g9 ~8 G* _( Z- i8 Y
prev.box.width = 630 - right;
; j+ X6 d# s; k# u2 k
}; Z5 J2 h2 G( t+ b4 X$ n; E `. S
}9 ?9 t( O- Z- A6 y9 H
// console.log(keycodes["0"], shift, capslock);
+ \8 X( `/ O4 t) Q, Q5 k0 U
let active = []; @# b5 B& p- n, [
window.onkeydown = function (event) {* W$ n. i+ _$ F5 |; b1 l\" ^: G5 y
for (let i = 0; i < buttons.length; i++) {$ A. |7 z9 D8 w j- y
let button = buttons[i];
! C4 Q! i! b. Y8 d
if (\" B2 f9 E8 q* K
button.label.contents === event.key ||( U& R: E3 t# u$ j
(keycodes[event.key] != undefined &&
) E% I: j, Z6 H% ^4 O
button.label.contents === keycodes[event.key].Symbol)) {3 i7 N- s4 [( [\" ^5 p+ ]
) {# R( n* z1 `0 [; V1 x
button.box.style.fill = "#f8f8f8";- ]6 \4 D\" v$ ?6 ]( k; b# Y7 I
button.label.style.fill = "#404040";
7 h! U; ?* l- c# G1 O b; c7 R/ [
button.active = true;
\" [. o/ C5 {6 K2 l/ B* v8 l
active.push(button);, F0 K( a2 Q8 k- [+ \8 r9 r2 h) Z
}* |. t9 u2 ?% W1 c* M
}( w4 u5 v$ \9 W& T
buffer += `'${event.key}',`;% L. F2 e$ _% O$ {
};
6 @& T* d% M# I! U0 n5 {7 \2 [
window.onkeyup = function (event) {
4 D9 K {3 j# f* O' L
let newActive = [];
3 Y I! {- L) ~\" n& p- G; n' [
for (let button of active) {0 B+ `8 _ z$ `8 N+ B; T
if (
: h# Y8 h& ~$ K g# ~& F: r5 J. f
button.label.contents === event.key ||
, i/ u& g0 S5 U/ w3 c
(keycodes[event.key] != undefined &&
! I: P\" G, z9 V
button.label.contents === keycodes[event.key].Symbol)5 ~9 ?8 K7 `3 Z9 s/ @& v8 S3 ~: h
) {
6 `2 Z& O5 w' z: |
button.box.style.fill = "";\" K6 }& y w7 f B
button.label.style.fill = "";
/ Y/ e% ~. \1 k) G: T- {
button.active = false;
8 j7 Z, T& A/ V5 V, d: P! Y6 W9 ^
} else {
5 o6 Q/ t( q( R/ G) X$ W
newActive.push(button);1 f4 Z/ f! @9 V
}6 z( I# j! ~# W0 J e2 c0 N8 Q
}' U: M/ f% T5 s2 \2 |& h* I$ p
active = newActive;
+ P- l! e9 N( Z- n- r1 _\" I) [3 i
};2 r( w1 V+ t! c9 x5 k
let bbox = interactive.input.root.getBBox();& k+ K. p: U7 b! s
interactive.setViewBox(+ r+ b5 g! `; v$ Y2 Y; G) w
bbox.x - margin,
' X; y7 {# |/ {: x1 R2 [8 f
bbox.y,; v+ u5 d, r4 B2 g2 H
bbox.width + 2 * margin,+ B3 g& N/ x( E# @& A, Y
bbox.height
! A5 n9 ~5 @$ e4 ^; `
);
4 S) }5 F: g4 v) _5 A
//# sourceMappingURL=keyboard.js.map
: C$ {- e- ^/ p1 g. k0 G$ w
; Z: Z+ M N+ |5 F! ?