使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>- A0 d j& I! N: `$ m! E
<html lang="en">
\" |* k$ ~7 x5 ]0 n( p- J* }4 b8 a
<head>2 ]* h0 P5 }$ U W( S l- M
<meta charset="UTF-8">
: Z9 N$ I; O: I. F4 D; S& X\" }6 ?
<meta http-equiv="X-UA-Compatible" content="IE=edge">7 c3 {( q* x! A
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" >\" Q0 D D' }) r1 ] J, N
<title>vector examples Keyboard</title>
7 ^# \: r1 N( D/ x. a
</head>6 c0 _7 ]! r1 q7 X1 \: \1 P
<body>
7 \/ p\" g& L+ F0 g
<div id="keyboard"></div>, k. M! Q& I' m% G `- S
_* g! j: e, k; g
<script type="module" src="./temp.js"></script>; B4 \6 v; k/ ]6 m
</body>
! T/ |# K& ~8 S2 C8 g
</html>
% }, S$ o/ Z' I- I! C( J. t( T: O

复制代码

import Interactive from "https://vectorjs.org/interactive.js";+ j# c9 M: F! t3 F9 v- b: k7 f- |0 m8 o
console.log("Interactive", Interactive);; W\" X, k( D# g9 W0 @/ s6 r

复制代码

/**7 k% u, g9 `; ~ |+ }3 V
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard\" A\" q) g9 |$ O8 |; W0 Y
* @description This interactive demonstrates how key board input can be used to add interactivity.
\" R. S\" I$ R+ n* J
* @tags [input]
6 R* p4 x# q: T
*/
0 P\" M6 t, X$ }' y
// import { Interactive, getScriptName } from "../../index.js";0 [% i) Z% t& q: i
// let interactive = new Interactive(getScriptName());
% R* J8 G; w1 o\" T( x9 s
import Interactive from "https://vectorjs.org/interactive.js";/ Y8 L5 f' T& C# ?/ ^$ o, G
let interactive = new Interactive("keyboard");
/ ]- J! b% c8 ?4 k1 [! W
interactive.width = 768;
7 \: Z, n9 h9 a
interactive.height = 300;( \# ^/ f }( u
interactive.border = true;
2 T! ?/ B( X% {1 S
let buffer = "";) Y- q1 Y+ c& o& X8 }5 ~
let keys = [
; X0 z8 ~6 W2 Z
[* S1 O& I) m) x/ ^+ J
"`",
\" M+ z Y0 k5 A
"1", ` N! N: o/ h' V5 g; |2 Z
"2",6 k0 P/ V3 |/ J
"3",, x4 q d* H) Y; s7 R' E# H! U
"4", P0 L7 s2 n\" @1 x' p' D
"5",
0 H6 F$ I& c) ?\" i7 t/ o' P' c
"6",
. \% |& a& @* Q8 P( W/ I\" N1 s
"7",% p\" c0 c4 x* G! L6 P+ K
"8",
1 }4 S6 N% m Y. g: m; u
"9",
0 O/ U6 q' M, \\" `* b; f+ Y: k
"0",
& j1 |, H9 L d
"-",
6 @+ u0 x* A6 w/ n
"=",% u+ \/ C _4 q7 b5 s
"Backspace",
) d4 A9 v' C$ T6 F: t
],
# R% j% t' T! {6 G$ X, r
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],# t$ F$ A! \' z. Z3 M
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],\" t4 r' t* W* A& z Y* e L& U
[( l3 }& I. H7 p5 E( L
"fn",9 l t* C7 h1 B# V- B; k: a# p: H
"Control",* B; T: V# V* \
"Alt",
1 z' M9 R0 G2 v: q! [) y! P8 U
"Meta",
# x D, D1 H$ F\" T! C s
" ",
+ z. b7 C0 \6 ~3 S8 z2 s+ o
"Meta",* L. {# r, M7 J
"Alt",
9 l# z: C! S5 p
"ArrowLeft",2 i* O n. U: P* O) r- M* Q
"ArrowUp",- j; g2 [9 {( p6 p2 K5 Q! p* A
"ArrowDown",' t9 @8 ?3 ^* y1 W; [7 z! f
"ArrowRight",
1 z) w\" f% Z9 \ R g
],9 ^0 Z, z+ z, s# [8 y
];
5 q. y+ I' }7 L' E7 Z
let buttons = [];
8 {# Z- q' p* g) {6 E
let keycodes = {
9 o2 j; d0 B) m6 R9 Q% p
0: { Symbol: 0, Shift: ")" },: M% |4 E( J8 ~7 `7 T9 F
1: { Symbol: 1, Shift: "!" },' i; l( [0 b s( T' g
2: { Symbol: 2, Shift: "@" },3 m- Y0 V( A' [6 [5 W. C
3: { Symbol: 3, Shift: "#" },5 o$ a- k/ g' n# g& e* O; P$ Z
4: { Symbol: 4, Shift: "$" },
- f: s' y, @& ~' t
5: { Symbol: 5, Shift: "%" },
/ ?+ D% q5 Q4 ^- D8 f
6: { Symbol: 6, Shift: "^" },& z. z7 `; T7 W3 [0 h/ \
7: { Symbol: 7, Shift: "&" },
+ t* L7 t- \1 ?8 M, e0 m% Q8 O
8: { Symbol: 8, Shift: "*" },
7 k) B3 F/ ~; O! D3 y
9: { Symbol: 9, Shift: "(" },
$ F2 O* {; [! c; i1 q
a: { Symbol: "a", Shift: "A" },
! l7 k, a! F, Q- a1 A
b: { Symbol: "b", Shift: "B" },0 P$ D; L* \* |/ S' ?
c: { Symbol: "c", Shift: "C" },
1 v- P! F, Z0 W$ X$ U7 @' z: F d
d: { Symbol: "d", Shift: "D" },\" b! |2 L w. y3 b
e: { Symbol: "e", Shift: "E" },
* {) a; A* L. d& w
f: { Symbol: "f", Shift: "F" },& I, i, U, e/ X\" @
g: { Symbol: "g", Shift: "G" },
% O% O$ [8 \7 |9 I1 H
h: { Symbol: "h", Shift: "H" },
5 C' B7 G$ _0 d8 \8 }; r% S
i: { Symbol: "i", Shift: "I" },
7 N( ^. l9 O9 S\" _0 g- d' d
j: { Symbol: "j", Shift: "J" },
6 S! k. X- w+ k
k: { Symbol: "k", Shift: "K" },
* E! |6 r! _5 \2 l& g& D
l: { Symbol: "l", Shift: "L" },: v: |9 f+ [$ x$ O
m: { Symbol: "m", Shift: "M" },3 l+ L$ t7 ~& |
n: { Symbol: "n", Shift: "N" },; i% N# ?( U0 U! G/ e
o: { Symbol: "o", Shift: "O" },\" u- U- t$ \8 Z* W0 ~! Z c7 E
p: { Symbol: "p", Shift: "P" },4 [' e8 D# n b
q: { Symbol: "q", Shift: "Q" },
7 k6 S1 x( i& G
r: { Symbol: "r", Shift: "R" },3 d7 X' J0 h% n( _! i
s: { Symbol: "s", Shift: "S" },
# u8 c! M: F7 B0 Y+ q* |% j; A( b
t: { Symbol: "t", Shift: "T" },
- ?# g1 ]! W* E9 ^! `
u: { Symbol: "u", Shift: "U" },
; j+ |1 }+ R. T3 @
v: { Symbol: "v", Shift: "V" },
5 j( Z! d& |8 I; P
w: { Symbol: "w", Shift: "W" },8 e% d3 z) u, d k% f9 l
x: { Symbol: "x", Shift: "X" },* Y* B+ m3 K+ }9 D
y: { Symbol: "y", Shift: "Y" },, ]& g. L; @ ?2 M
z: { Symbol: "z", Shift: "Z" },1 x& z' ~- W& ^
"`": { Symbol: "`", Shift: "~" },
: y. v0 @4 e8 ]& X
"-": { Symbol: "-", Shift: "_" },* w\" C/ z4 Z1 n u* k2 W
"=": { Symbol: "=", Shift: "+" },: o m4 J) u: a\" k) n4 U
";": { Symbol: ";", Shift: ":" },
/ J7 ?5 r) L! i\" \/ l( U
"'": { Symbol: "'", Shift: '"' },
2 ^( D/ I* c; W
"[": { Symbol: "[", Shift: "{" },6 ~; E7 B8 E, x
"]": { Symbol: "]", Shift: "}" }, [& `\" l+ k* d: w
"\\": { Symbol: "\\", Shift: "|" },
5 K; k) T3 |, \1 S Z9 `4 J
",": { Symbol: ",", Shift: "<" },
3 u) M5 R* G# P- Z5 c2 y
".": { Symbol: ".", Shift: ">" },
8 U; ]' j8 o4 p ?* `3 g. ]# \1 w
"/": { Symbol: "/", Shift: "?" },
2 K( ]7 y# ?9 P% f, _/ y
Backspace: { Symbol: "⌫", Shift: "" },/ y: w- a! Z. a. {6 C3 \\" f3 K
tab: { Symbol: " ", Shift: "" },
: k4 X9 z4 L( g# d
CapsLock: { Symbol: "⇪", Shift: "" },) v7 `' A6 k1 S# H; N
Shift: { Symbol: "⇧", Shift: "" },& m& ^7 i/ r# M# U
Enter: { Symbol: "⏎", Shift: "" },
' T5 D9 @( t+ @5 }' V
Control: { Symbol: "⌃", Shift: "" }, p, K% I# Q! m1 f+ k' V* m9 V
Alt: { Symbol: "Alt", Shift: "" },
6 K6 d% F% Y0 X# x
Meta: { Symbol: "⌘", Shift: "" },
' ]4 j# {' M. N# x1 H% T4 Y2 ]5 U
ArrowLeft: { Symbol: "←", Shift: "" },5 a8 V u; C/ ^\" b( z' h$ {
ArrowUp: { Symbol: "↑", Shift: "" },0 [) ^8 e7 c8 _* {
ArrowDown: { Symbol: "↓", Shift: "" },
: C6 {( _; \% B! M: S- p! O/ v\" S
ArrowRight: { Symbol: "→", Shift: "" },
1 V* W( [0 l0 {% N( b3 w3 v
" ": { Symbol: " ", Shift: "" },4 I( I% S% T3 \
};. g1 s. t1 D* q1 O# W\" z
let buttonMap = new Map();. b8 V% V. q3 R* P
let height = 32;
/ m% ?\" Q1 d1 w3 f
let margin = 8;: B+ U) e5 k- q, P\" a- j- q
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
4 R/ s. s; z) K\" b8 G, f
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);, l& u& l3 N7 ]' P6 D9 z6 p
for (let row = 0; row < keys.length; row++) {
+ ^! a- g% U+ S4 [) `2 s
let x = 32;2 T% S' J, o2 C5 G! U
let prev;% e/ {* _+ q1 V0 ?\" h& l
for (let i = 0; i < keys[row].length; i++) {* |5 c3 Z# C& W; l. V
let key = keys[row][i];
/ h2 D$ o9 y7 O. P& N/ S
let width = 32;8 [, l% r, j( K' {, ?# V) w
let button;
$ s1 e; U' j t: a3 {$ |+ n3 r# E
switch (key) {
6 t7 o\" E1 W4 | J+ @
case "CapsLock":. C3 Z1 |8 L' k+ e5 i
button = capslock;, B( t. O, B) G1 T5 r2 f
width = 64;
) j) r, i3 d i) j2 S
break;
5 f8 E7 j+ w1 s4 V- U
case "Shift":/ C4 a$ N( {: _* T/ D; b: u/ e
if (shift.x === 0) {
0 k. W/ n0 g1 |
button = shift;
- m1 p# X2 C, L( d9 M
} else {
. e3 p; _, f4 F9 H
button = interactive.button(
: X* p+ P& [! N6 `, q) w2 t
0,. M$ I& h, X, r/ \6 h
0,
2 L6 ?* B% Q* K8 L g3 u1 b4 n0 g! L
keycodes[key] != undefined ? keycodes[key].Symbol : key
' s5 C6 V8 A) O9 n9 O D
);
5 J3 h1 {5 v G. r, ?
}7 a7 s: `: z# ]4 r0 A2 t
width = 90;
7 v- q) [ O2 b% G# y/ _2 a' M
break;
) L/ _9 x% i$ M1 x' M
case "tab":
; Z/ W3 W E\" ?1 C
width = 50;+ i: S' Z$ v9 l. k( a7 W\" v3 n; l' W
button = interactive.button(! G- W! c) o- i- n r, |
0,\" {; ]5 ^3 I8 b$ M* Q
0,7 {* k6 h/ N0 v
keycodes[key] != undefined ? keycodes[key].Symbol : key
. l/ s: i& s S9 o7 M
);
- d* S& D, u- b( u$ s, o9 B
break;
, i) _+ }7 O7 @+ r5 F
case " ":# c4 f6 b# f, Z, m/ h7 V: P
width = 176;
! [# v1 _: _# R% u$ P
button = interactive.button(2 e7 r* c! n1 k, ]/ R
0, \\" D; J9 \. H
0,% v) P9 B7 H9 y/ \) Y* a\" X) l
keycodes[key] != undefined ? keycodes[key].Symbol : key3 Z: c o2 H3 [- m- g
);
% v F1 I3 s6 e! |5 c- |
break;
\" |/ | U4 m ?7 L& t# r
case "Meta":
7 q$ O1 f/ z1 i7 t0 W, i. ~
width = 50;. p W' E' f$ v/ C2 r& a. {) [- t
button = interactive.button(
2 m$ ^- n# v, e% [
0,/ f: S4 t) [+ M( s7 l
0,2 f0 d, F( G j- ?1 f! ?
keycodes[key] != undefined ? keycodes[key].Symbol : key* b( p0 l1 B; f! [( x6 k0 x, l5 q7 V
);) o H+ Z4 { f2 C\" j
break;
& g/ m1 G9 U; ?# O
default:
3 U4 S; |+ s6 `% Y+ A\" p
button = interactive.button(
; {- P' k) u/ C2 A0 G8 [! N
0,( W# D% q8 ^ F' Y, }3 r7 P
0,
) _' P; E* [& l9 l6 K\" U% ^$ `
keycodes[key] != undefined ? keycodes[key].Symbol : key
, |: h \; f( }8 x( N5 x# G
);
# b9 n+ q& C2 a% h) p7 c$ c4 a; Y0 W# G
if (keycodes[key] != undefined) {1 r7 S6 F6 s; u/ s
if (keycodes[key].Shift != "") {4 W. m8 ` _4 s5 Y. U$ u, U
button.addDependency(shift, capslock);
3 [. f\" m* N& F; A
button.update = () => {
1 N3 I6 u* n+ B% l# f# v' @( n* x
if (shift.active || capslock.active) {
7 E+ ~, N\" T/ @\" C9 k1 J
button.label.contents = keycodes[key].Shift;
# V' o, L, x1 [7 A2 r# q
} else {/ K- j& k& f9 V+ _
button.label.contents = keycodes[key].Symbol;1 |9 H0 B3 m# z7 d& |) N% Y
}0 N% g; O U1 \3 H: K7 v$ G. p
};# X; T8 u% b9 s
}5 a7 a1 w( c8 M7 r
}( d$ D5 \ ], f; c+ n1 i0 u
}. x( c U1 ?% y s
button.x = x;
' l3 L9 k, S& K8 m5 B! ^$ \* G
button.y = 64 + row * (height + margin);
# c# D% p* _4 |' X8 T. \
if (button.box.width < width) {( {+ H- B+ c( v: u* N& T/ `
button.box.width = width;: k& _$ u2 u* R
}
\" Q* M4 l' x2 l- B4 c# Y+ F5 {% x
let bbox = button.root.getBBox();- m: k3 d) M& o- ] f
x += bbox.width + margin;
3 R/ L5 o9 s5 |. s' |6 C
buttons.push(button);
, n: I4 l# x1 j# y\" ^6 g
prev = button;) z7 y8 i! z3 J! t! j9 T
buttonMap.set(key, button);
\" _, `) X5 n' P% ` m6 X
if (key === "ArrowUp") {
5 C8 R. m* @! l8 k, k
button.box.height = 16;4 I0 Y: C6 }- s9 @$ k. A
button.label.root.style.display = "none"; U\" P& t- `+ W
} else if (key === "ArrowDown") {, {4 _* n; j1 V0 ?5 Z2 w
button.box.height = 16;0 z7 H% b1 S& x
button.x -= 32 + margin;
) j# G( P( c' @2 l6 S1 Y
button.y += 16;( v `3 F& ]7 E) @: i
button.label.root.style.display = "none";
5 T5 u5 Q* p x( j! Z9 L8 s5 J- s
x -= bbox.width + margin;
, t8 R; f( x: A1 ]/ ]. L
}- n+ A6 k' G3 c; G! b4 C
}( R3 s+ p# X& R, L# D, |/ a: R
let right = prev.x;. R5 P/ h( F ?9 l: C( S
if (right < 630) {
( q# d) V$ d& h7 Q, y. z
prev.box.width = 630 - right;
\" i: {9 G7 {( }8 c4 D$ L9 c
}
1 k\" r0 B5 y* R$ K# _' ~/ V
}8 e4 @& f8 u7 k8 p7 s- g2 Z7 o
// console.log(keycodes["0"], shift, capslock);
! x, _# d# h- i% n8 S# x
let active = [];. H! T/ s: o8 }\" w, I. q8 Q# K
window.onkeydown = function (event) {: V8 |8 U\" L5 g9 E( O
for (let i = 0; i < buttons.length; i++) {
# \- U\" a1 P2 F\" B; p9 U
let button = buttons[i];; m' j% h2 J( u, t+ h
if (
0 R2 i9 Q' Z' m& t' r: ~/ @1 z' f3 x
button.label.contents === event.key ||
6 v2 G2 `- f3 a2 u
(keycodes[event.key] != undefined &&
2 N; X% D: H. U# u( _# }# H
button.label.contents === keycodes[event.key].Symbol)4 z! t/ ?9 {, e1 B1 i
) {
8 U\" G @& B5 Y S. U. r* m
button.box.style.fill = "#f8f8f8";
& `& F7 ?0 |; B7 W% s' V. m
button.label.style.fill = "#404040";
( q/ }\" `. D; A5 x0 _
button.active = true;8 L/ v4 Z+ Q6 `1 ?; z, v/ \
active.push(button);
/ S3 s: M( ^2 h+ e) f: a6 K
}
5 n+ L' h% C) U8 ^
}. C8 J- p9 Z; a1 u2 H' [$ b
buffer += `'${event.key}',`;
0 W( j' j4 X- B) _! S1 s6 k: b+ x
};
! j4 X; |5 k/ ^5 X9 u% E9 h; V
window.onkeyup = function (event) {
6 n7 _- S# X% x3 K R
let newActive = [];
/ p* s\" A) g: G; c# t
for (let button of active) {1 V6 x$ M0 D: b\" d; n: y6 b, w. Y }
if (
5 l% i3 m( O6 H
button.label.contents === event.key || O: t7 ]2 [# o\" [. ~2 b
(keycodes[event.key] != undefined &&: i\" K0 _6 f, g* C& y+ v\" e' l8 A
button.label.contents === keycodes[event.key].Symbol)$ Y, p$ Z6 s\" A) o
) {* B( ~5 n. k& {! x! b. x
button.box.style.fill = "";# Y: ^2 L2 B- y) g
button.label.style.fill = "";! W8 I1 w: E* Y4 R( D
button.active = false;
# i7 y! ?$ f- \: H
} else {
2 S! E$ }2 d# h$ I8 Y1 N
newActive.push(button);
; j; J- W% A! K, s' b1 W: @
}; u: }' Z. E' h7 z `
}: h# u: W) [) M- X* e- @. Z: i
active = newActive;# M1 k7 O& t- w1 H% q: A; g: D
};
' W1 F% S4 }) R+ H3 D( |* Q; E8 R
let bbox = interactive.input.root.getBBox();; P' x. F% K4 A, U9 f2 L8 j
interactive.setViewBox(2 o\" ]2 n% N0 E) S
bbox.x - margin,
7 u0 X) K# I! C7 y
bbox.y,) `6 `/ |, c# K# o* a8 O8 z
bbox.width + 2 * margin,! d, p6 l5 E3 `1 s; n/ T& s
bbox.height
& K1 R5 q) I. p8 U, o! U$ S3 a\" l' n
);
) \9 h4 o7 P- _/ p }
//# sourceMappingURL=keyboard.js.map
. X& u2 {) B' d3 B5 H
$ d4 {6 f* `& W# u