使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>0 x! B( Z4 l+ x: Y; F
<html lang="en">0 C; D9 u, X5 t' O4 S
<head>
$ V9 b# O7 F8 L; C\" Y( R
<meta charset="UTF-8">4 U+ H) z0 g* d6 N
<meta http-equiv="X-UA-Compatible" content="IE=edge">
; I4 ?# k' I$ \7 }& b. ^
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/ _5 U1 B5 I: s7 j) X) M& a
<link rel="stylesheet" >
/ h! G: U9 M/ p9 ?
<title>vector examples Keyboard</title>
* _, m9 t- N2 H' A! q1 s
</head>
) F/ b3 K$ {* _ N
<body>8 B& S) F\" U1 D. n9 f3 J7 Y0 ?. ~
<div id="keyboard"></div>
& k5 c5 K( q! x9 ~
9 G( f$ N* i, c1 W4 t. f. Y
<script type="module" src="./temp.js"></script>
' K$ H$ M# m) e
</body>
7 g. i1 }9 Z% u# C
</html>+ g A0 P. d5 Q

复制代码

import Interactive from "https://vectorjs.org/interactive.js";, W: N# ]) H2 c& Q; R\" V
console.log("Interactive", Interactive);0 n: W, c5 O9 |& |. I

复制代码

/**
7 w\" Y4 R0 O. p
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
\" ?( ^: Y2 C+ G. D l8 V4 I\" o
* @description This interactive demonstrates how key board input can be used to add interactivity.
5 a& v6 _5 ~- m7 l4 W
* @tags [input]6 b$ X) n4 ?+ B t2 X
*/
- D ^; C% x$ t& s: h
// import { Interactive, getScriptName } from "../../index.js";
2 R. y: I d4 X
// let interactive = new Interactive(getScriptName());
import Interactive from "https://vectorjs.org/interactive.js";
. u, _6 R+ S) R X3 U
let interactive = new Interactive("keyboard");
! N( O1 j) Z; i$ N( C3 n, i% R
interactive.width = 768;* p' s1 |4 d% s9 ~, d
interactive.height = 300;
\" z% p3 G6 ] R& t7 u4 z
interactive.border = true;
4 p3 g1 v5 V\" A5 g/ I2 Q2 s
let buffer = "";5 y9 {1 V; O) T\" x1 l+ _) @
let keys = [* P6 X: d+ W( Y1 x
[
) Y( E; |, [5 [( \
"`",6 K6 d\" I5 a5 V0 p; x( l
"1",0 D( j% R6 }- s
"2",
6 z* _- f& |$ y# ]+ m- H
"3",, {8 Q+ c; Y9 l& K/ i# P
"4",6 G6 n; A7 L! W' R5 @/ g& [
"5",' B6 x0 W/ L% S1 Y& M8 N1 e
"6",/ i3 \2 {* G% a5 F( c
"7",* K! x; E& N; {* ~% t9 ~1 a
"8",
* w/ w5 m: _% ?4 a# O4 }
"9",: I7 j4 E$ T, c1 ~
"0",
% w8 s) W) k# Z9 U
"-",, F+ C5 `* p! j; R8 @
"=",4 f3 T- u7 m! ~# [
"Backspace",
. o' K) E5 k9 o9 K( E' O) g- @
],* p% P; z4 e8 y
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
; {# |7 P. _: Q% N6 i3 m
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],3 Y* T y6 O; A' M
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
6 E: v% x. ?( l8 L! z5 |8 Q6 c
[
9 v8 k; c\" j9 N `
"fn",9 E! p1 y. V' A$ G; S& ^$ ^7 P3 [
"Control",
9 c, Q6 t& l) V1 y( R
"Alt",$ y6 j, l; d: ~+ z! W+ d8 T! `
"Meta",
h+ e7 `9 ?8 o; [\" v, r3 J. q
" ",7 P: p, u9 D+ W# p O& I
"Meta",) _; S, ?\" z) S$ c) h
"Alt",
, |4 P; N8 B) g4 j Z/ G\" r
"ArrowLeft",4 _9 B. _. O\" A- o R$ R6 y; _
"ArrowUp",
3 d9 [' k1 ?4 N0 ]5 \4 ~2 u
"ArrowDown",' Q4 `, y& h4 v _# a; e0 X, X
"ArrowRight",6 l( E: x& n* Q/ P: W. G* v
],0 w\" |+ E$ z4 K
]; h+ D4 a' `, U- C3 y& \
let buttons = [];. u\" s, u) {: b
let keycodes = {& {' ~! g; b8 u
0: { Symbol: 0, Shift: ")" },
4 r* V7 U6 c2 }/ h J m5 T
1: { Symbol: 1, Shift: "!" },/ a$ F; k) v& Z5 \
2: { Symbol: 2, Shift: "@" },
+ z: ]! V$ { a: v& W
3: { Symbol: 3, Shift: "#" },
\" @/ Z) }8 i& a K
4: { Symbol: 4, Shift: "$" },' k4 g( ^9 i3 [9 @- Z3 J
5: { Symbol: 5, Shift: "%" },
) q7 \; F0 ~7 r( { {/ V% v+ Z
6: { Symbol: 6, Shift: "^" },
- J7 }3 o% R- [, [: i4 a$ g
7: { Symbol: 7, Shift: "&" },; B3 v1 k8 y, p8 i( `' Q
8: { Symbol: 8, Shift: "*" },* b2 `. ?: f2 S+ n% i: B
9: { Symbol: 9, Shift: "(" },' k5 w\" r/ r4 T
a: { Symbol: "a", Shift: "A" },
% [# p7 B, i! ^4 T
b: { Symbol: "b", Shift: "B" },+ |; g* `0 Y+ I
c: { Symbol: "c", Shift: "C" },
& j) g/ ` ?/ Q8 I
d: { Symbol: "d", Shift: "D" },
; @# `7 g! a; @8 p% a
e: { Symbol: "e", Shift: "E" },5 Q/ C9 k$ l6 J4 d\" q
f: { Symbol: "f", Shift: "F" },
- K' x% E7 y Y3 B7 s( r _/ ]8 o
g: { Symbol: "g", Shift: "G" },
; `5 f+ Z( p1 f* E\" r
h: { Symbol: "h", Shift: "H" },9 r% `) m6 M5 P! v7 n
i: { Symbol: "i", Shift: "I" },\" D2 C, {, f7 o+ p
j: { Symbol: "j", Shift: "J" },9 Q: s3 F: g) i
k: { Symbol: "k", Shift: "K" },3 P, _$ Y7 z8 T/ V6 o
l: { Symbol: "l", Shift: "L" },
- V0 p, m, }7 L3 k' V3 ]
m: { Symbol: "m", Shift: "M" },) ~\" q9 q3 f9 h( }$ f0 _5 v6 H
n: { Symbol: "n", Shift: "N" },. a/ l/ U d' {* \/ @8 I: N9 c% ~
o: { Symbol: "o", Shift: "O" },
' D, _8 x5 A9 j$ ~& i2 H7 I
p: { Symbol: "p", Shift: "P" },) [\" ~/ m5 l6 o
q: { Symbol: "q", Shift: "Q" },
2 X [& A: Q9 B2 |% m+ y7 s
r: { Symbol: "r", Shift: "R" },
0 g& ~& Q8 H& d1 X* g
s: { Symbol: "s", Shift: "S" },
* ~$ M$ D, B8 k7 f7 q# G
t: { Symbol: "t", Shift: "T" },
8 ~( ^3 p% c/ E$ t& A
u: { Symbol: "u", Shift: "U" },2 t3 ]6 K G, U& s3 s1 m* z
v: { Symbol: "v", Shift: "V" },6 b( V1 A# I' \5 | q! F
w: { Symbol: "w", Shift: "W" },, K, o5 u. L6 h5 x. m
x: { Symbol: "x", Shift: "X" },
1 E$ H w. |9 ?4 a\" ]' m( \9 B {
y: { Symbol: "y", Shift: "Y" },# o9 ~2 P( E; t
z: { Symbol: "z", Shift: "Z" },
( b4 g# [% P\" `- I+ |: L
"`": { Symbol: "`", Shift: "~" },/ U0 |* {5 Z5 {( h
"-": { Symbol: "-", Shift: "_" },: j' e5 w, z2 P% D' {
"=": { Symbol: "=", Shift: "+" },
5 N! r\" v, {% t# s5 F
";": { Symbol: ";", Shift: ":" },# e& k1 [1 w2 |8 C
"'": { Symbol: "'", Shift: '"' },# |, d% U8 ?% Y$ b
"[": { Symbol: "[", Shift: "{" },& {4 l) {- ^' v1 L7 f
"]": { Symbol: "]", Shift: "}" },6 A9 J% t0 p( R# p
"\\": { Symbol: "\\", Shift: "|" },
/ Y# |6 Y u5 }- i! P
",": { Symbol: ",", Shift: "<" },. f8 [. _0 Y, x8 _
".": { Symbol: ".", Shift: ">" },( y4 v; n+ l# S& Q- P2 I6 `& b$ n: L
"/": { Symbol: "/", Shift: "?" },% M( h) W\" x0 h) w1 A7 y: }: I1 T
Backspace: { Symbol: "⌫", Shift: "" },
9 o1 g$ K\" [3 O, ]# u' m' }
tab: { Symbol: " ", Shift: "" },2 b+ ~) D& `' J% h0 F
CapsLock: { Symbol: "⇪", Shift: "" },
+ T/ i0 L3 e2 Q
Shift: { Symbol: "⇧", Shift: "" },
8 u& |/ s2 J, |- Q! {
Enter: { Symbol: "⏎", Shift: "" },9 r- ^* h$ B% j* {% B
Control: { Symbol: "⌃", Shift: "" },9 C0 D) q& G, K+ {: L8 ~
Alt: { Symbol: "Alt", Shift: "" },, ^- Z% n8 y9 `
Meta: { Symbol: "⌘", Shift: "" },
8 P* v8 |9 h% ]: c, `
ArrowLeft: { Symbol: "←", Shift: "" },' g% D' Z5 r k$ \& N3 _: b$ Z% ~
ArrowUp: { Symbol: "↑", Shift: "" },
% }6 ^+ G5 N% g
ArrowDown: { Symbol: "↓", Shift: "" },1 n7 f3 u+ N0 p( i& r
ArrowRight: { Symbol: "→", Shift: "" },3 ?) F6 x& u! j+ A\" ?$ f; z, h# H
" ": { Symbol: " ", Shift: "" },0 V+ H s$ M\" ]& E) ^
};
- _( U- E7 K' I3 U6 \- d, m
let buttonMap = new Map();
0 _5 W2 a7 [9 }6 l( i
let height = 32;
% e8 g. G5 Z# Y
let margin = 8;! |1 ~8 f( ?- U/ [: ^/ R4 A
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
8 n' x5 M/ R1 f& V$ J _6 C
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
% E- L4 H0 [: b3 A
for (let row = 0; row < keys.length; row++) {
, a- V2 t. g. e0 q
let x = 32;
8 t- w# E, K: a1 f
let prev;, l) Z1 s\" l3 F0 n( k2 d
for (let i = 0; i < keys[row].length; i++) {. _( Y* O3 ]; I0 z
let key = keys[row][i];
\" x1 C3 k2 o# u4 w! T: t: t
let width = 32;
# x/ S1 f4 ?: L/ n% Z6 d5 m1 W
let button;
' f$ @ i3 b$ `: S4 }
switch (key) {
! |! W$ c\" m5 |1 f+ L! R2 T
case "CapsLock":& O/ K+ S8 ~5 ?; q+ X4 C1 f0 V5 q
button = capslock;4 L4 z: w7 O; \\" @8 k
width = 64;. S f. j w: `8 k9 h9 Y
break;4 Y G, s# a# Y4 G& f
case "Shift":: k$ c: v5 E$ Z; Q* J
if (shift.x === 0) {5 n/ }9 } i: a% b\" }5 r
button = shift;/ M( `* O\" ]& w2 h- a
} else {
7 d) a H. o' d! ]$ `
button = interactive.button(; y) \1 ^$ I6 N B L4 U+ W) A1 ^
0,
* V: m& H% x: R! D8 T* p. q
0,4 \6 I) g* e\" K- Q- H
keycodes[key] != undefined ? keycodes[key].Symbol : key
& L0 A; _# R% h3 Y8 Q
);
6 K. ?9 ]3 K; ]
}1 R3 L. z& @$ V5 _; _; |
width = 90;+ k H6 A: F6 [; \! U
break;$ P# T7 j0 u, w* R7 A6 c+ U) N
case "tab":* H2 K4 a# S$ X6 r6 I i% E4 V2 t
width = 50;
' }; y\" @4 Y1 J2 K& S. q
button = interactive.button(! a4 }: ]( w\" D\" `
0,# T; Z. y1 e! f5 x# G
0,; O, y _! u, ]\" a9 V! z
keycodes[key] != undefined ? keycodes[key].Symbol : key
$ I4 u* d/ @5 U: d. k8 H2 W
);
/ ?2 r\" p' l& ]/ I) j% J4 Y% n
break;# z) [3 ~2 ^6 w3 I\" r& F# {, w. d' p
case " ":6 p0 g; W7 u, V3 Y$ q
width = 176;* Y+ B) N% Q0 f( a- m( m; r. H9 K
button = interactive.button(2 _* [/ r, C2 A s
0,* I6 c3 @8 w& D: @( y- ~5 L& r
0,1 R( C2 f. h3 F
keycodes[key] != undefined ? keycodes[key].Symbol : key
6 N* F\" k! T' G, s0 x\" U9 [: o2 Z
);) y; @. t }0 L, v3 w; f7 A
break;. N- V' S s' S* x, v6 M7 T: G/ C o
case "Meta":
8 ~1 ?2 D; l- {$ H) W8 _8 }
width = 50;
/ S1 U, G% `\" |\" F7 O
button = interactive.button(% w$ }+ \. `4 Z/ e
0,9 X J2 p# W8 F6 ^+ J
0,
2 @# x8 N$ i) g7 j; P( X
keycodes[key] != undefined ? keycodes[key].Symbol : key
\" O: _, H* z0 ]) H0 Z
); T7 b, Z. L0 F
break;
+ b/ a2 k7 h\" C8 L* q K- Z
default:2 P4 e1 `7 o( r* D9 } ?
button = interactive.button(! ]4 L\" C& \+ p% \
0,2 s+ ]! ~# |% L% | O3 m6 D
0,
0 v0 R, j\" o) f$ a+ \4 k% P# H
keycodes[key] != undefined ? keycodes[key].Symbol : key
8 a2 I3 h0 u/ h+ \
);9 ?+ ^. A5 }( L
if (keycodes[key] != undefined) {
$ |: {4 j% E+ g0 h$ \) b/ q* w
if (keycodes[key].Shift != "") {6 p+ O& ^ w2 \0 F/ `6 j$ \
button.addDependency(shift, capslock);
6 x+ F: @) k* `. {2 W( {
button.update = () => {
+ }5 f% c7 @9 L1 @( p
if (shift.active || capslock.active) {
1 H# f7 U' `, \, d
button.label.contents = keycodes[key].Shift;. C: |$ {! e( n
} else {
( K2 g\" H( H1 E6 n1 n/ A* X4 J# m
button.label.contents = keycodes[key].Symbol;3 w7 P b5 R! W4 d, v n- u
}/ u) j+ J2 M3 A: o
};
6 o' w: Q& F; W+ d* z
}' f+ M, S! R4 K' }
}
7 j5 C9 A/ Z. u& x
}4 `, N7 ?: V; w. D' p7 e/ \
button.x = x;
0 {* r' S6 c5 [% n. s
button.y = 64 + row * (height + margin);
' B5 s! [6 H7 E/ e' m8 H1 Y N
if (button.box.width < width) {
8 x3 H9 m7 O2 R: h
button.box.width = width;5 w: f$ ]/ n, f2 D. e) J' x
}
3 B4 m E% X5 p, n J( G1 s
let bbox = button.root.getBBox();' g4 N6 ^% X& Z7 K7 \8 g) x
x += bbox.width + margin;3 F! l3 v5 ]2 V) j' e/ H& U! J+ C
buttons.push(button);0 j' u. @0 V) G$ K [) F
prev = button;' E! r8 o# ^* Z' B; _' [# [* ?' k
buttonMap.set(key, button);
+ B6 s\" Y7 G* y$ A# B7 l
if (key === "ArrowUp") {
. B1 _! g1 i( Q\" n' r* T/ r
button.box.height = 16;, E7 G5 L8 H W
button.label.root.style.display = "none";
' U4 w! l$ E0 }' j2 t
} else if (key === "ArrowDown") {
( ?3 M& b' u5 k2 w: k
button.box.height = 16;4 w% B: l- y; w# s# j% _' }
button.x -= 32 + margin;
% @& x9 z2 S1 N/ C/ ^# z
button.y += 16;( n$ ?) a- K; i1 ^% T4 ^0 D& x% n
button.label.root.style.display = "none";0 i: M: l: ] P/ T
x -= bbox.width + margin;
9 l7 x* _, k6 I1 Y+ A) p; I4 e! p6 F/ l
}4 ?\" M( [5 ^' f/ H
}
- Z4 E% O7 e a
let right = prev.x;% b' w* [6 R) E# V2 f1 \* W
if (right < 630) {
, _7 q5 N* d3 E
prev.box.width = 630 - right;! Z' `$ C% e% x& ?
}
# \; D/ F6 S6 e' O4 P( \( U* a) V: M
}$ {9 Y$ M7 h: ` g\" a
// console.log(keycodes["0"], shift, capslock);
0 u) M* T( \- O: l. B% z
let active = [];
/ d7 t* |, ?+ X9 h4 {1 b( o; F
window.onkeydown = function (event) {9 h0 h7 Q0 h% f2 R3 W. s- \9 d
for (let i = 0; i < buttons.length; i++) {
- k$ [, Z0 F% U
let button = buttons[i];
6 {& F( V! E8 F- I* x
if (
+ y9 K) o5 Q- h, v# H3 Z
button.label.contents === event.key ||& x% k( K$ B& z! K: H8 [
(keycodes[event.key] != undefined &&
\" q! J( G# x0 @6 c
button.label.contents === keycodes[event.key].Symbol)
' U: ?1 o9 K. ~+ C. y. @
) {
% ~ i, u4 W9 [( V
button.box.style.fill = "#f8f8f8";
+ O& g) s6 v% f& y- A1 g8 T
button.label.style.fill = "#404040";& l1 o: u/ B! X9 [2 k9 g
button.active = true;
1 ]2 b7 a/ N! I5 T
active.push(button);: W0 l8 k8 X0 ^& z. l
}6 ^7 h9 O& P' |: C
}' f8 Y0 N, G/ U9 I7 H+ @
buffer += `'${event.key}',`;
% ~8 G# G+ L+ _$ ]- L* Y* g: i/ c
};8 b# A7 D% N( M+ z6 D8 z+ o* x9 Y. R
window.onkeyup = function (event) {
2 M/ q+ S9 W4 x+ Y J
let newActive = [];
9 z: W x* J7 @
for (let button of active) {1 p' w! F! I2 {! h\" I3 C
if (
1 D2 t; q+ X\" V1 m
button.label.contents === event.key ||
& [4 G! r! A, [- [
(keycodes[event.key] != undefined &&
% Q: E1 ~7 S+ B& B4 P6 v+ e
button.label.contents === keycodes[event.key].Symbol)
6 X2 i0 H8 ?8 s$ }% Z# Z
) {, F\" Q. `1 c0 I9 t% K$ c7 V0 `
button.box.style.fill = "";
L* n# i' t ?. [* T5 Q5 `/ |- j
button.label.style.fill = "";
\" [* ]+ O, d d5 x6 Y9 Y
button.active = false;4 G\" [% c' N\" V# ?9 ]
} else {% c7 D7 R0 s! j
newActive.push(button);
# A; I7 Y* `. ]% U/ ]3 [\" w
}) F8 C5 e% K. H( Q
}$ g3 d! ^8 ?2 E( o8 X
active = newActive;6 i: x' b9 e( s& T, V* [
};6 c3 ]# T1 V3 O0 b. }
let bbox = interactive.input.root.getBBox();7 t1 @. Y8 j0 Q n. [1 T- ~$ S# q- w
interactive.setViewBox(+ K: `0 ?' Y\" o. x) u, }\" _; y) z$ B% A
bbox.x - margin,# e3 ~) K' T0 J: ^- G
bbox.y, j/ w\" @* w# _& V; [; z; D
bbox.width + 2 * margin,) }( |/ i* M& G' R, A3 j+ e, p: O
bbox.height
\" i/ x! v5 N$ k
);
& }0 c\" ?& j# U: G\" p. J' ?
//# sourceMappingURL=keyboard.js.map# D) Z% u/ i) {9 p! G5 K3 k4 @
0 M3 L/ Q\" l) {9 Z( Y7 y