使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1198 主题	4 听众	2976 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
. i! M/ R; [7 E
<html lang="en"># `0 k* A, Q2 b/ |( ~
<head>/ R; d0 U0 a, x+ S
<meta charset="UTF-8">
, C( h1 F$ q4 i* j/ L0 F
<meta http-equiv="X-UA-Compatible" content="IE=edge">
0 w) x2 s) g0 R) N
<meta name="viewport" content="width=device-width, initial-scale=1.0">: e- ^: R- j2 B/ ]6 x4 ]
<link rel="stylesheet" >
$ G\" [0 w/ j7 z: }/ P+ t* O3 ?% Y
<title>vector examples Keyboard</title>- O) Z6 g, m% H$ r
</head>
<body>
- j4 F9 h; M. }! t
<div id="keyboard"></div>9 X8 ^' Q7 C& T1 V2 ~
/ I3 S3 s7 E8 D4 ]7 j\" x
<script type="module" src="./temp.js"></script>& I2 M2 U1 k2 n3 y
</body>( s8 l& k2 i' c: v/ ~/ K; F
</html>
, D% K7 T( f2 L0 F

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
/ t/ C5 ~4 R; k
console.log("Interactive", Interactive);
* u0 U# o; |8 J6 C

复制代码

/**
8 h% p8 l& A) y* e4 u6 f
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
1 e\" j2 v5 \0 P' r! ~% ^
* @description This interactive demonstrates how key board input can be used to add interactivity.% c2 [+ U) Y8 r# u1 u
* @tags [input]3 ^: ?0 {: u: b+ l6 A/ h$ d1 ?
*/
5 Y @' v/ |0 t4 l+ q, \
// import { Interactive, getScriptName } from "../../index.js";
; G, P) u: t9 b- p$ s, A$ i; O. S) n
// let interactive = new Interactive(getScriptName());7 g* [; q! T, \# p( N4 f
import Interactive from "https://vectorjs.org/interactive.js";
3 e\" c+ q9 b { Y. i1 S
let interactive = new Interactive("keyboard");( _7 f1 f1 w/ H3 X H5 h4 g$ J' l
interactive.width = 768;
5 n! V; S! H* E2 u) e* g7 ?7 ~
interactive.height = 300;\" Y5 A! |0 j\" g( O7 C
interactive.border = true;
* \6 a9 y+ s& x: r
let buffer = "";9 s W; Z! A/ d9 X% s
let keys = [* m' a5 a4 U1 X& B. b, I1 u- Y& w9 ^
[$ S/ S. E9 q4 R
"`",
( c& B4 l+ w: ]\" ?4 c
"1",' S' A7 i' k7 ]; V$ z+ f/ e1 \
"2",. _\" Q! P$ T( D5 }8 ^& R. r
"3", a4 r* e& g% {- N
"4",
& |' H1 x; W3 H# A* n8 J
"5",) ^9 h2 C! m1 a+ H9 P9 l
"6",2 W, M; V( t% g
"7", q; \* U\" E4 W j: M0 D r4 A
"8",
, ]6 p6 k\" D# F$ G( n$ z
"9",. t% r H& d\" f7 S n
"0",/ b) `; T0 x, y* x' W/ X |0 d
"-",
! n& t- m) ?2 C; _& s6 U
"=",/ d8 Z4 t; h9 @4 t- H# l\" m) A
"Backspace",' {' M0 b) N3 n8 ^$ r# j* D) g
],
f3 J0 u Q6 Y# @
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],- r3 E! T$ G\" v& j( {& B
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],) _/ Z# P3 e6 ]( A8 u% x$ P
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
9 Z9 t3 p8 N, K; d\" w/ U
[, ]3 U# `) A$ t# m/ {; f; ?
"fn",, u c! W\" r8 [\" S' o
"Control",
) ?+ J; m5 I$ H# u* R
"Alt",
4 q6 K\" c\" x3 c( s% D9 i6 e# ?
"Meta",
9 y H& {5 X$ X\" u' P
" ",
, g+ ]7 n( M6 B' F
"Meta",5 x* b% h' }$ G' x! n% X\" m6 a
"Alt",
, H, m! J$ Q8 c/ A6 |8 G; V
"ArrowLeft",
- f+ P# s6 }: B4 N
"ArrowUp",
7 J# [2 b& Y8 \
"ArrowDown",# Q* R1 Y X4 p1 {
"ArrowRight",
+ Z; X' j\" J- V, ~5 r
],
! |# n0 X\" O) l4 ~2 M
];
0 i- z1 e1 k- B6 A: E
let buttons = [];
) L4 _1 a% U4 B5 X3 v; }9 m
let keycodes = {
, V H9 `\" f, x* Y5 \+ X
0: { Symbol: 0, Shift: ")" },) |$ b) \2 V/ g7 K
1: { Symbol: 1, Shift: "!" },
. i% ~. o# \\" [4 E0 t. u8 b8 [
2: { Symbol: 2, Shift: "@" },
! U* f' G6 O( q+ {8 N% t. J
3: { Symbol: 3, Shift: "#" },
8 m7 v& e, o' m% G* o: f
4: { Symbol: 4, Shift: "$" },
6 d4 L/ k\" J- q! o6 I; ? c
5: { Symbol: 5, Shift: "%" },1 a\" N5 D: O7 G0 K0 ^\" V
6: { Symbol: 6, Shift: "^" },1 c7 N2 y ^8 I4 _* [! h\" V6 r/ W, n
7: { Symbol: 7, Shift: "&" },. Y& I$ A+ Z. o, d0 w; t
8: { Symbol: 8, Shift: "*" },' ^; g, m# n4 v( r' S- ~
9: { Symbol: 9, Shift: "(" },
$ K, ] q7 g# P/ B& H2 b! H/ u, B' y
a: { Symbol: "a", Shift: "A" },
& g! r U8 n9 p; r0 z# E. N6 p& i\" x
b: { Symbol: "b", Shift: "B" },
$ s6 s5 o1 q2 \0 z H
c: { Symbol: "c", Shift: "C" },' h4 n+ {( K- l( u
d: { Symbol: "d", Shift: "D" },
! E: p3 ], h, [
e: { Symbol: "e", Shift: "E" },4 O* S% Z: q! q' @5 k/ w2 l
f: { Symbol: "f", Shift: "F" },
' o& i& g: r2 l4 M2 O
g: { Symbol: "g", Shift: "G" },
& X( |% D8 Q' z. w, A
h: { Symbol: "h", Shift: "H" },
$ m7 ^+ g) f5 ~6 `9 s9 A
i: { Symbol: "i", Shift: "I" },
! n( `. H% @, U$ z
j: { Symbol: "j", Shift: "J" },) D6 I7 h, J/ V
k: { Symbol: "k", Shift: "K" },
* p# z& f2 ~6 |: O% F% V4 W) }
l: { Symbol: "l", Shift: "L" },
2 O3 ~+ s* w. U1 ?% E5 R. f
m: { Symbol: "m", Shift: "M" },) h: O, I$ I- D0 h
n: { Symbol: "n", Shift: "N" },; a) V& r- m& s/ ^\" ~6 B
o: { Symbol: "o", Shift: "O" },: s# ]+ \; t' y6 E* h3 A7 f
p: { Symbol: "p", Shift: "P" },
7 d7 _' l8 D! w% s, D4 u, [
q: { Symbol: "q", Shift: "Q" },$ T. F7 z* }0 T4 e
r: { Symbol: "r", Shift: "R" },7 K: ^) \6 c* ~: U
s: { Symbol: "s", Shift: "S" },$ I2 O( Z- [4 z/ o9 r
t: { Symbol: "t", Shift: "T" },* S5 v+ q) s7 a2 M\" X& j
u: { Symbol: "u", Shift: "U" },
/ m1 ~$ ~' K7 t' B+ D0 J8 h
v: { Symbol: "v", Shift: "V" },1 l) J8 |% ^- F! ^+ e( C+ r5 [ J
w: { Symbol: "w", Shift: "W" },
/ J6 y9 ?1 F\" k\" r: R' k
x: { Symbol: "x", Shift: "X" },
; n- L; ?\" o( E& P9 W7 a. L+ R
y: { Symbol: "y", Shift: "Y" },( F/ ? w& O! e; h& `& B
z: { Symbol: "z", Shift: "Z" },
( l/ r' C/ w- w7 D x( w1 ^, K; r( m
"`": { Symbol: "`", Shift: "~" },
* }& D2 N; A# E$ s& I# |7 p+ l
"-": { Symbol: "-", Shift: "_" },
' }) j8 j) `6 G; C5 s! v
"=": { Symbol: "=", Shift: "+" },
# \; m+ A) b/ E$ {
";": { Symbol: ";", Shift: ":" },; I5 o. Z4 t& e5 s: t4 p
"'": { Symbol: "'", Shift: '"' },7 z: s7 `\" |, m; P- F: Z: i
"[": { Symbol: "[", Shift: "{" },
: F0 A, C$ o* g3 ~9 y0 m+ `) ]
"]": { Symbol: "]", Shift: "}" },\" [. d& G- J3 k) X! [& y
"\\": { Symbol: "\\", Shift: "|" },3 r0 n1 p& u\" @+ F% [) V: Y7 m
",": { Symbol: ",", Shift: "<" }, b# |3 W: p$ E G( H
".": { Symbol: ".", Shift: ">" },$ d# L! ?+ ~+ i) O4 P) j
"/": { Symbol: "/", Shift: "?" },
\" h: t\" D# ?\" d. k; c) k- ?
Backspace: { Symbol: "⌫", Shift: "" },
- R$ v0 Q# G8 k
tab: { Symbol: " ", Shift: "" },/ G+ G. L% p$ \' V# X' I7 R- A
CapsLock: { Symbol: "⇪", Shift: "" },
Shift: { Symbol: "⇧", Shift: "" },
1 I) n2 U z( E7 V7 v
Enter: { Symbol: "⏎", Shift: "" },8 u6 X! z) l2 q
Control: { Symbol: "⌃", Shift: "" },
1 T o\" P0 f& i |
Alt: { Symbol: "Alt", Shift: "" },
! y. B% D; y$ l
Meta: { Symbol: "⌘", Shift: "" },( h2 Z6 K M) s+ k
ArrowLeft: { Symbol: "←", Shift: "" },/ `4 p8 C6 r! l; j( c
ArrowUp: { Symbol: "↑", Shift: "" },
$ `( p5 Q( B! d
ArrowDown: { Symbol: "↓", Shift: "" },
|7 s2 e1 D) F
ArrowRight: { Symbol: "→", Shift: "" },
$ C. U0 T5 g5 ~8 Z- u3 \6 q
" ": { Symbol: " ", Shift: "" },
8 V6 S) \) Y! a0 b8 I0 }6 F
};( z% d: O/ a/ [% A: h3 B
let buttonMap = new Map();
\" z) l% G2 k! j5 Q8 n/ Z
let height = 32;
+ x0 A3 V2 J/ |% M
let margin = 8;, v+ }. r7 o% k( t& _) z5 h
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);/ g0 O9 j2 j2 a- d0 e+ u, n
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);7 v/ Q# B; n( ?, u' p+ c\" m- K
for (let row = 0; row < keys.length; row++) {# x z G1 M) C: F8 l5 ]: d
let x = 32;, r5 I* A p6 f- j0 a8 i
let prev;9 K) |1 F, n% ]4 P: R
for (let i = 0; i < keys[row].length; i++) {
5 e7 _/ [- M4 i% ^2 r) P/ f+ u6 c3 E
let key = keys[row][i];
# P, X8 X+ x2 x, ]
let width = 32;1 F9 b3 U\" s6 L
let button;8 a n/ a3 s! U2 s9 q7 N
switch (key) {. |/ x4 y3 T( I8 V% Q* O0 E# M! r
case "CapsLock":
/ c- j( j4 q' Q3 k
button = capslock;% a8 [8 V6 H$ r/ t& L
width = 64;1 K2 N' U. O) S$ A# l. H0 D7 x
break;( B! ^, [* x$ T% ^4 c$ B
case "Shift":
% S; f4 O3 |7 t3 L
if (shift.x === 0) {
6 s3 r3 z _% |; Y- b
button = shift;
, a4 ]9 T' `0 ?2 E7 e8 N1 @
} else {
. y d' W, y7 q/ v8 a; s
button = interactive.button(
' \9 D; X1 z' w; v
0,+ K- C9 h2 t- l8 a6 L' w, ?
0,% A- f# E* G) F7 ]* N1 e
keycodes[key] != undefined ? keycodes[key].Symbol : key9 ? O' P4 t$ @2 {6 Z+ E
);* H# x8 h5 b+ ]1 s3 T$ Y
}; }7 f4 c; z6 B
width = 90;# O* z3 D6 e8 ?+ [5 c
break;
5 Y& K1 G; K4 g# g, Y! E; W# r0 Z& f: o
case "tab":* N2 k* @ ~* g
width = 50;
$ u' H/ d9 B9 k2 q5 L\" D3 A
button = interactive.button(
( O4 R# k: u1 ?. D: ?+ l/ j, c: H
0,$ N! H( |( X: j% T
0,
9 i) X0 l# ?# c( D8 r
keycodes[key] != undefined ? keycodes[key].Symbol : key* |# Q2 k3 i/ r) w8 N& @) v
);: h+ Y1 d- `( X3 N
break;
7 ?3 k% l5 T. l$ g: _\" G
case " ":- I% ?+ c! v: Z' k' z
width = 176; B; R( R! A5 ]( I6 q# W: d
button = interactive.button($ t\" q6 j. N3 o9 d- h5 X$ z9 T( |
0,6 W\" x4 \3 Q& @7 w
0,
, r, L9 q3 w$ r9 t M% P
keycodes[key] != undefined ? keycodes[key].Symbol : key
& s1 p6 B! d: q( L
);
) v R) A5 B/ P6 Q% [6 Y4 x& ~
break;% q6 s% O. J& R1 A
case "Meta":
/ j\" t+ f' p- e+ J! G* [' Y
width = 50;& [, J' {/ s7 p8 f
button = interactive.button(
( ]% b: G; i {7 p. D
0,
) X7 ]: ]2 x9 V5 h, v: r\" y1 r
0,
2 l( ]) h; g. c2 L
keycodes[key] != undefined ? keycodes[key].Symbol : key
; L% O3 z4 k% X
);) V7 k+ w! R- l ~2 `- B& C\" j
break;9 ~/ I2 I! O* W: P0 i; y
default:& C1 Z1 ]; I3 p% Y, p; |9 w% O
button = interactive.button(
0 N3 A- O5 Y$ B
0,
. h4 i1 O1 g, |9 ]2 R( P
0,! y6 o3 z% f& M1 e# n4 E. \
keycodes[key] != undefined ? keycodes[key].Symbol : key1 p8 p\" \\" f& m0 {: _; J
);
: j) ]2 k# R2 s' Y4 |
if (keycodes[key] != undefined) {& K+ c/ [% i: @
if (keycodes[key].Shift != "") {
+ v) f+ c) S, P. S
button.addDependency(shift, capslock);
/ U$ J\" I% `' n- B- N
button.update = () => {
1 ^1 V( D$ c5 M7 ~; v: t. d
if (shift.active || capslock.active) {$ u1 K& v2 O) k# d8 O
button.label.contents = keycodes[key].Shift;
5 ?3 d8 O f+ v9 T: R2 h
} else {7 u9 z7 O; R$ c+ p0 J, N z
button.label.contents = keycodes[key].Symbol;! `; z0 T4 B# a- [/ l7 O9 M
}
1 X! a2 h9 ?$ L5 i! T! `' x) _7 C
};
1 t$ Z4 x) w# O% U3 g# _
}
& @/ K% V2 l. n3 z+ B
}
`) B7 a* N& d5 w2 a
}' X+ w7 g5 c! K\" R/ U* g' }: q
button.x = x;4 l. b* j/ R. u* r# L5 r6 F
button.y = 64 + row * (height + margin);
w/ D) Z3 d6 @! j! L& P
if (button.box.width < width) {) c5 C. k' Q, t0 [2 o# h1 s! o
button.box.width = width;
: t' u8 k& e: Z2 `
}4 w# z9 t7 T8 G y! {
let bbox = button.root.getBBox();
$ k: v, W* I) ]' I- A\" Y
x += bbox.width + margin;0 {9 ~1 Z2 M! P; m. f
buttons.push(button);
6 |: e* Y6 H) d1 x& K
prev = button;) h\" ]9 P8 Y* T8 [9 A1 o
buttonMap.set(key, button);
5 |\" z1 h8 ?) v! A; \; G5 t
if (key === "ArrowUp") {
& l. W& p3 v- I+ T0 m$ u1 W; H
button.box.height = 16;
: G1 V% d4 l- i1 O4 W\" s0 A7 v9 Q
button.label.root.style.display = "none";0 H; U4 f$ m+ b: j) E% O
} else if (key === "ArrowDown") {
! e! [) r) b+ T3 ?' x6 X
button.box.height = 16;
+ s ~9 ]+ f% A$ n
button.x -= 32 + margin;
0 b8 |% X9 t& Z! Y5 j: ?
button.y += 16;
9 N; _5 L$ C/ [7 Z! S
button.label.root.style.display = "none";
+ ?7 Y( f\" I' W( F/ g3 U
x -= bbox.width + margin;
' I7 K/ Z* h4 S
}
2 A; ?8 W6 f+ h% ^ p
}. _/ D* c3 ^; g( _
let right = prev.x;. q% j: @: Z7 B7 z. L2 R0 M6 b1 m
if (right < 630) {& [- s! g1 o% ?2 }. k
prev.box.width = 630 - right;
% }, p. |$ q\" ~( K! y3 W* R q+ Z
}
2 O0 R7 D/ L8 g g! V: [/ o
}. m8 l; y7 s, L! {6 V+ M
// console.log(keycodes["0"], shift, capslock);( R' j( \! \) H' {\" c! h) q% p
let active = [];
, s) S# R; `# [! [ B; y4 g
window.onkeydown = function (event) {' L: H2 n/ M: V I
for (let i = 0; i < buttons.length; i++) {
% N$ E+ w' R5 d k6 i# j1 p
let button = buttons[i]; z* A) U+ i2 e( T, D$ s
if (/ r0 d6 l! ~8 d* U
button.label.contents === event.key ||
# v& X+ Z F( L5 f! O( n# b- T
(keycodes[event.key] != undefined &&# O3 h3 T' e' S\" _; x4 E
button.label.contents === keycodes[event.key].Symbol)
& {7 j9 r4 B0 z
) {6 g) T& r$ y! ^\" G2 Y: T
button.box.style.fill = "#f8f8f8";6 K4 p! ~$ J: X, L& S2 h( C
button.label.style.fill = "#404040";
6 h' d6 q# J {3 n
button.active = true;2 B: E1 p( J+ J3 n
active.push(button); O P. M+ k6 |2 h5 L) x
}
$ t7 _( ^& Q+ D1 }1 i
}; r1 Y( O3 y* H0 h. L- h
buffer += `'${event.key}',`;
& N1 V7 C0 b% M/ k
};0 X; D; X* _! y; h3 ]\" [
window.onkeyup = function (event) {
7 H4 h* A! Z% {) Q( J
let newActive = [];4 k/ V* ^& j3 [, Z) A3 F& F6 ~
for (let button of active) {
5 s\" ?7 v1 e9 F1 [
if (\" D3 O6 F9 H1 i
button.label.contents === event.key ||- B$ Q8 p1 i1 |/ A
(keycodes[event.key] != undefined &&
3 i1 a$ F+ l; p2 T9 H5 I
button.label.contents === keycodes[event.key].Symbol)' |' c. N\" k4 O\" b6 T/ {5 ^7 ?
) {
2 s, Z\" f( r: v/ V* V
button.box.style.fill = "";6 w. ]# y8 a$ Q$ @
button.label.style.fill = "";
1 @3 c, O% w$ h3 i: B' O
button.active = false;
0 Y+ w- Q+ g& R& O5 u8 L
} else {( W ^+ [+ w3 j; Q; `/ N c. D* }
newActive.push(button);
D9 x% }8 y8 O\" ` W6 k* j( q' F
}
: b; `5 u) V$ t1 B# ]4 Y
}. D3 t. M: D* W* D, p F) i1 e
active = newActive;- {. C) s, J, g2 e4 B ?# a' D
}; U6 i2 t' \, U. [5 t+ M
let bbox = interactive.input.root.getBBox();
2 h2 r* z! v7 M! v$ O
interactive.setViewBox(
0 o9 v, |: ?/ |1 }# G/ Z# J
bbox.x - margin,# p1 _/ g' b4 A/ R8 d
bbox.y,
! w$ o Y% T/ g7 W0 A
bbox.width + 2 * margin,
4 a2 Q3 \ q( F
bbox.height
8 z6 c+ Z5 h6 ^2 G
);: F; ~\" e' K* ]/ f4 K1 t, I+ }
//# sourceMappingURL=keyboard.js.map
: S3 s, A6 A2 |8 a3 x5 D* h9 d8 B
) u, i' W6 |) T& H1 K' s/ s! Q