使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

796 主题	1 听众	1970 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
- J1 a6 K8 I3 A( R3 U0 v
<html lang="en">* A! C% x E8 E' N
<head>( ~* p1 Z2 z: R; h: _
<meta charset="UTF-8">1 t R: H\" M* Q% e
<meta http-equiv="X-UA-Compatible" content="IE=edge">
' ^- W- @/ u9 ]* R6 x
<meta name="viewport" content="width=device-width, initial-scale=1.0">7 I5 R5 w# S+ ~5 L# Y4 m4 d+ u\" s
<link rel="stylesheet" >
f; K. s; T8 q! T5 Z
<title>vector examples Keyboard</title>2 N\" W4 U* S: @; k8 u) a
</head>
! {1 V9 t* F; G& v+ [$ n9 c
<body>
6 m: q/ Y! _* H* p
<div id="keyboard"></div>' r/ q* `1 N; z& i( H' {, P
; q: G0 g. T: R$ z
<script type="module" src="./temp.js"></script>1 }+ @( b, i5 E! q
</body>) J8 j2 j( E2 B0 Q3 i8 W
</html>
8 x% s8 c9 Y5 [

复制代码

import Interactive from "https://vectorjs.org/interactive.js";, z* H/ t' z2 q% z
console.log("Interactive", Interactive);5 x* O\" u# n: [: [

复制代码

/**6 n9 T6 c% {\" ?1 {\" h
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard& N& G Y0 I& f& X/ Y! \0 V6 E8 ?
* @description This interactive demonstrates how key board input can be used to add interactivity.
; m9 E1 R\" m4 n5 A6 n3 r; o6 E* l
* @tags [input]( p8 i6 b) n i! l W
*/- `& M0 u$ ?& E- D
// import { Interactive, getScriptName } from "../../index.js";
* e( P: j5 u+ n7 u, B9 i$ ?3 Z4 c
// let interactive = new Interactive(getScriptName());/ I- h' Y, X- B+ X- d0 Y
import Interactive from "https://vectorjs.org/interactive.js";
) D( \4 `& E% ]) p
let interactive = new Interactive("keyboard");
]+ O! G5 d7 D4 s\" n
interactive.width = 768;3 q, t& n$ f) P7 Y3 \0 x2 p) o
interactive.height = 300;
5 y+ [9 d! ]8 p+ ]4 ]* @
interactive.border = true;
2 j+ w\" [& z0 e* u
let buffer = "";3 ]0 U- l# S$ @- q* t! j& x
let keys = [
3 E2 h4 H/ F; t0 l/ D; k; x) \
[% ^3 i2 M0 E1 }+ A6 u' ^
"`",$ V; i2 X3 K$ r+ F. \2 Z& Q! C
"1",
) M% k3 T& f/ h5 }' W\" X- Z* Y- t+ c
"2",
8 G7 Q\" ^. d: W9 f
"3",+ }% x0 n4 W& l) H, |: M8 c
"4",
. |\" o% Z, J; J. ?$ |4 F3 R
"5",9 k2 Y9 }) R$ I- \
"6",
$ }$ n0 b3 }\" T) I/ m\" p6 g
"7",
+ k; |0 Y; L5 E& a' @5 B
"8",* a, i( ]. U5 k
"9",3 D2 E: @( |8 J4 J% L# Q& t+ N! k
"0",
& H# G* p! x- S+ n5 r4 n2 ?2 T9 N
"-",
+ I+ ]) |3 c. q4 ^# h
"=",
\" O$ T B. D! U2 {# Y
"Backspace",' U: e9 m9 N2 ~4 E3 z4 H\" U! M
],0 E, Q+ R# P2 @) z6 m1 f$ U\" J. @6 g
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],# l6 e% d! I! z! |
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],4 c3 }6 A' O/ }( D$ d) @% \2 C4 A
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
* K( p2 N( T( V+ W9 X
[
; |( ^' w- C. ]1 ~& Q) i3 j
"fn",2 ]* E7 g\" Z1 E) g4 J
"Control",
* q% _% M# O( B& V- f
"Alt",% Y) z2 z* e o- v. z
"Meta",, H7 Y( f! p1 ]% g$ L
" ",
& g3 o; |! S o8 }1 m
"Meta",
6 n2 J- X+ _' {$ K0 C& w% d: R
"Alt",
* t* d6 S% q$ g' } z- ^! w) A. j
"ArrowLeft",
0 H7 n+ a1 |4 D0 _! b: E
"ArrowUp",, W, |0 S. w; j7 A0 _- W
"ArrowDown",
"ArrowRight",
. E6 I1 T8 S! K9 S3 H
],
9 y6 P\" I- e: A7 w2 D k
];
) S% t M, B7 c' @
let buttons = [];
. ^$ x- y4 N: l' R- z1 C
let keycodes = {
, S. h+ S( d8 a. `5 |
0: { Symbol: 0, Shift: ")" },
. G; t& t h& `9 {1 ~: a
1: { Symbol: 1, Shift: "!" },% R; c# ]4 k* t4 k1 J4 F3 W6 y$ o
2: { Symbol: 2, Shift: "@" },; ?3 |4 {* R( D! A
3: { Symbol: 3, Shift: "#" },, F9 a* e\" Z& \* ]* o
4: { Symbol: 4, Shift: "$" },! `7 S. c( W8 `- q7 Y v- C7 I
5: { Symbol: 5, Shift: "%" },
q6 h. ^+ o# V7 N0 e& F
6: { Symbol: 6, Shift: "^" },( w! @: b; H8 M% j+ N) V
7: { Symbol: 7, Shift: "&" },. k9 z+ Z8 X) p1 A# b# i
8: { Symbol: 8, Shift: "*" },
' A! ?# q, _7 g
9: { Symbol: 9, Shift: "(" },: ]$ v9 i0 B) w7 R! t- E* t) [
a: { Symbol: "a", Shift: "A" },2 I6 ^: o/ F1 E+ f
b: { Symbol: "b", Shift: "B" },\" L# L: |9 \7 i# O! B; Q* o( X
c: { Symbol: "c", Shift: "C" },
$ g# S! j# K: [\" k1 n
d: { Symbol: "d", Shift: "D" },
# W- `0 x9 O8 f* Z\" i4 r
e: { Symbol: "e", Shift: "E" },: H6 }$ j\" {\" W3 E' I0 [
f: { Symbol: "f", Shift: "F" },7 K( }6 z\" g8 f- E. g
g: { Symbol: "g", Shift: "G" },; F+ v7 z6 l7 C) z5 `) g. Q
h: { Symbol: "h", Shift: "H" }, }( L3 m k- Y& u
i: { Symbol: "i", Shift: "I" },1 Y\" o2 a\" X& d8 \5 K5 P* v& M
j: { Symbol: "j", Shift: "J" },. A H) {1 [* c\" V1 U
k: { Symbol: "k", Shift: "K" },5 A0 U0 R: h7 z& w9 B; M( S
l: { Symbol: "l", Shift: "L" },
) h$ D5 @- i. x: v6 R. R8 ]: s
m: { Symbol: "m", Shift: "M" },) _# g! |8 g# h
n: { Symbol: "n", Shift: "N" },& W. |) p# s3 e
o: { Symbol: "o", Shift: "O" },! P% T3 e2 B& T& `2 ~
p: { Symbol: "p", Shift: "P" },
$ N7 @6 n8 L1 C) A2 a- T
q: { Symbol: "q", Shift: "Q" },* @4 X7 j. P3 h$ n/ S
r: { Symbol: "r", Shift: "R" },
6 {2 N% S9 L; m
s: { Symbol: "s", Shift: "S" },
& e d* {) i\" y) Y8 X, g- J( o
t: { Symbol: "t", Shift: "T" },
+ `4 ~3 [\" o\" f; @\" y& k5 w3 X
u: { Symbol: "u", Shift: "U" },
v: { Symbol: "v", Shift: "V" },
& p& ?: Z3 a' D* t0 j; V4 J
w: { Symbol: "w", Shift: "W" },9 E9 Z/ ?0 w, D9 o
x: { Symbol: "x", Shift: "X" },
0 Q+ b; M4 d/ I4 m8 `- ]: k; c
y: { Symbol: "y", Shift: "Y" },1 s# C8 t! R' C\" _ V! c
z: { Symbol: "z", Shift: "Z" },+ s, r! R/ L! g$ u3 q% _3 U0 n
"`": { Symbol: "`", Shift: "~" },
+ N1 S- @+ v4 R
"-": { Symbol: "-", Shift: "_" },
+ l- a5 e; T- X2 R! X8 t1 a
"=": { Symbol: "=", Shift: "+" },8 V5 |; I3 B' k q% q% z
";": { Symbol: ";", Shift: ":" },
) E% x3 l0 ?; x1 _+ S' h& f7 N0 }% m
"'": { Symbol: "'", Shift: '"' },
F7 R+ p- h% V- M, b
"[": { Symbol: "[", Shift: "{" },5 \0 F$ D% A% @8 s% ^
"]": { Symbol: "]", Shift: "}" },4 c7 L8 O' j\" ^! x0 o2 r, h5 Y( Q
"\\": { Symbol: "\\", Shift: "|" },
' y0 a8 o$ z, S C7 q
",": { Symbol: ",", Shift: "<" },4 {& ~6 G$ d7 R3 X, T3 P
".": { Symbol: ".", Shift: ">" },+ b6 B1 l- H/ v7 R2 d$ D
"/": { Symbol: "/", Shift: "?" },, B) X- h. W+ u5 X
Backspace: { Symbol: "⌫", Shift: "" },6 I1 W0 k( M0 F$ g5 J5 H4 A h\" V
tab: { Symbol: " ", Shift: "" },
\" q* ^& b1 s1 A. J\" I
CapsLock: { Symbol: "⇪", Shift: "" },' I. O3 _ Y4 Q- @2 Q\" [
Shift: { Symbol: "⇧", Shift: "" },
A( V4 @, M* n+ o/ r$ O
Enter: { Symbol: "⏎", Shift: "" },+ H( ]8 H5 j\" ]
Control: { Symbol: "⌃", Shift: "" },& W3 O, O4 A* H& R! \$ s9 Q
Alt: { Symbol: "Alt", Shift: "" },- h; F! H. a7 @ Q* M0 z
Meta: { Symbol: "⌘", Shift: "" },
* c! j# Q\" Q* J- @( z5 F+ e! X\" V
ArrowLeft: { Symbol: "←", Shift: "" },& M% M! J7 o. L
ArrowUp: { Symbol: "↑", Shift: "" },4 a& Z R1 w4 ?8 f9 l
ArrowDown: { Symbol: "↓", Shift: "" },
* [7 W0 X+ I* [9 T* H/ P
ArrowRight: { Symbol: "→", Shift: "" },, Z w0 x5 g; W& l: \& n4 Y, @; v
" ": { Symbol: " ", Shift: "" },6 _4 t/ [ I5 S3 I; D9 P
};1 b/ F9 g5 v& ]: O5 @2 @* [5 j+ W
let buttonMap = new Map();7 ^/ A2 ^ L: Z6 K
let height = 32;
5 ^, A1 g6 j6 e/ f
let margin = 8;' m7 w5 o% D8 O. h0 C1 c
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
0 |! [, l; ^. k& y\" H0 F
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);0 J7 V: b6 y, X1 P ~( t
for (let row = 0; row < keys.length; row++) {
5 {' j1 y, v* m6 ]0 H# t+ @- ]8 U# c5 X
let x = 32;- d1 m\" G# Q' Y. v% Q
let prev;) | m8 V' |5 i; U9 g1 \, C
for (let i = 0; i < keys[row].length; i++) {
/ t6 X ~2 F- f( C1 m
let key = keys[row][i];
+ ~% O( I$ u( a
let width = 32;% ~' c9 P& v/ O* L5 ~; B C
let button;
7 e9 h) ] m8 M' ~0 I9 i& R
switch (key) {
7 y0 X: j& F) [# E5 _
case "CapsLock":, q5 M4 _* Z2 Q' @
button = capslock;
, d0 d) ]6 |* D$ V, i7 o
width = 64;0 r' d: m: T N9 m9 I, i& V. j
break;
0 ]/ f0 \- Y7 \+ q
case "Shift":
* ]& J _$ @6 X\" N
if (shift.x === 0) {+ W# o' Q. G3 x O\" @
button = shift;
% Z+ G* H) c5 [
} else {
P$ g9 _+ P& U6 r0 N
button = interactive.button(* j- X# r2 F! M/ E+ v2 D5 @
0, i* G* t& H6 W9 D6 |8 n\" ]' I) c# B s
0,
/ I- j' h6 p% _2 r z: E
keycodes[key] != undefined ? keycodes[key].Symbol : key/ l$ V, m# H4 M* }$ S
);
+ B7 {4 _2 O* _# r# D9 Y+ X' j
}) a/ T& W\" {0 N/ J9 [: Z4 x Q& z F
width = 90;& G; l& b, R9 E9 [5 V2 a
break;
9 _. j4 m4 z W P, j$ S% u
case "tab":9 R. i7 S; N7 @\" \* Q0 D6 b' Q% V
width = 50;
& I- h. [\" V% m' L' u$ ^
button = interactive.button(
5 ?0 L* T2 o \6 \0 \
0,+ G) e) x\" s8 s( k4 Q( I
0,. S. _* P/ Q( I* B% K. Z( N. M
keycodes[key] != undefined ? keycodes[key].Symbol : key
6 d. B5 x4 B' E+ z\" O
);+ E3 ?) w H& X2 m
break;6 V9 c8 l6 |. B+ p- \
case " ":
# C C/ T2 t) I2 f- c) E* w
width = 176;
- s: H! Y% ~8 _/ B
button = interactive.button(
( `% v; G, T3 \' w
0,
4 a0 t% |7 E) ]6 u+ N
0,
: H\" T, X/ m+ V7 f' M: ~
keycodes[key] != undefined ? keycodes[key].Symbol : key
. K) Y9 u4 Q7 K K
);- x- ?. u\" E# N9 U4 _
break;4 M9 a2 P, I; @0 P' G, Q
case "Meta":
0 v# M\" |) B$ r, |% E\" ~0 j2 ^; G
width = 50;
1 D7 p, }, q! B/ X
button = interactive.button(
9 K9 S% S% y J
0,
$ j0 F' n$ w3 X( o; m
0,% k; a% l$ K5 l\" F; W9 n. b) w
keycodes[key] != undefined ? keycodes[key].Symbol : key
( M7 v8 R1 A; X+ B* Q/ {! E7 x* e
);
; f3 P @6 k7 S) V
break;
% p/ u( Q$ Y7 K0 r
default:; V. M3 @* q1 a [: ?, s- ]0 k
button = interactive.button(
8 \8 I! u7 o' @ O- U; F7 i
0,
- h) W, j- w/ C# p r+ ^6 Q; r$ i
0,
% u! l0 B: ?. ^* ~: K
keycodes[key] != undefined ? keycodes[key].Symbol : key( B; A4 S6 f6 J% i4 K6 a! P$ i
);! p7 m( ^ M. ?/ r
if (keycodes[key] != undefined) {* h9 P0 R) H7 ]/ e
if (keycodes[key].Shift != "") {+ }6 x' x7 z8 p& m9 b& ]+ z
button.addDependency(shift, capslock);
. O+ n: c& B! W. J8 R\" G
button.update = () => {$ W( W\" H' p# T5 C3 X7 F
if (shift.active || capslock.active) {
F, b/ R I; _1 ]& W2 f7 E$ d
button.label.contents = keycodes[key].Shift;
7 [; J) Z9 S# J
} else {
\" c0 v( M) h O' I8 U M, @/ N) O
button.label.contents = keycodes[key].Symbol;
& c: Z e/ E7 {, a9 ~$ p; o. a$ l
}# y/ F& n& k, m$ G5 T' B8 x( S- @
};
/ q3 L4 ^1 q0 {
}! e* ]0 M5 X( L3 k1 G
}& l* ^) Z) m) |' A4 S$ ?2 \
}6 F( t5 @: Q: q4 H# I/ ^; K( S! ]
button.x = x; D4 w$ p# h9 }# ?
button.y = 64 + row * (height + margin);! F1 w$ T( i2 J9 c2 Q% s( s
if (button.box.width < width) {- p$ ?9 [! @' }4 F- c
button.box.width = width;
8 M2 {: g3 _\" R\" y/ v4 [+ i
}
: e$ o+ e# L# `( ~4 V
let bbox = button.root.getBBox();; ?) b5 x8 Z- K8 q4 D& o5 |
x += bbox.width + margin;% B* O V4 }6 o& a6 M0 N
buttons.push(button);; E/ ]3 T3 `3 W2 T8 p
prev = button;& @, G# `, v0 l. A+ u. R
buttonMap.set(key, button);5 w4 S: G\" d/ ?7 B0 \6 n& S; t
if (key === "ArrowUp") {
9 V\" ~' f- s. E\" @& Q
button.box.height = 16; s5 j, S# e+ T$ h7 j
button.label.root.style.display = "none";4 ?7 I, a8 m: S( R1 @( Z
} else if (key === "ArrowDown") {( c* p4 o- ?1 A\" [+ J* M* e! Q
button.box.height = 16;
8 b# O2 k4 ? Y
button.x -= 32 + margin;
I- ~6 d. d1 C3 W
button.y += 16;1 m9 y# o1 s, Q- E
button.label.root.style.display = "none";
+ P' I5 c+ ^4 a5 d8 w0 k6 E8 I5 x# L
x -= bbox.width + margin;
* J+ j5 C+ r7 ^, k
}
\" ?1 ^3 S/ O# a Q6 ^& a' q# e
}
\" c8 [, o2 `1 U# k
let right = prev.x;
+ z. _8 O& ~3 @) V. j
if (right < 630) {
4 ~9 S4 d8 ^: ~+ [9 d: o
prev.box.width = 630 - right;
) S$ B0 ]4 F7 t& f, H: L2 _\" @, J
}
2 Y4 e6 J' x/ Z1 I. F, ~. [
}
) l( p3 c& Q1 G* ^8 L/ _
// console.log(keycodes["0"], shift, capslock);) E9 `- ]% o3 ?) {
let active = [];& d0 |% V6 @- L0 N! O2 F- H) Q
window.onkeydown = function (event) {
: R( U1 \1 {$ ` I\" l/ R
for (let i = 0; i < buttons.length; i++) {8 I% C$ Y4 A% {
let button = buttons[i];+ E: x4 F. P: I5 ^# u' j
if (
6 p/ X- N* ]& ^& C0 X7 W
button.label.contents === event.key ||& E d B, u$ f# Y3 |
(keycodes[event.key] != undefined &&6 m. i/ e% g& b# g3 d N# ]9 W+ H
button.label.contents === keycodes[event.key].Symbol)
! X' ^( m& r3 n% Y4 O
) {
\" r. O% H; ? v2 F\" [
button.box.style.fill = "#f8f8f8";
# N# {; @% H( X: t; n
button.label.style.fill = "#404040";( i, ?# n7 e2 ?9 T! H; Q
button.active = true;/ }1 B\" E1 P) Y, _% Y
active.push(button);
1 v5 F+ b: u2 ]$ e) Y
}
8 r+ p2 j5 [& S
}
0 N% { Z5 C( F: K, y\" f
buffer += `'${event.key}',`;
' N4 D ^8 ?2 O! @: G4 c
};; ?; u6 \/ ~: m; j0 u
window.onkeyup = function (event) {9 e7 D& X9 D* n8 G1 V
let newActive = [];5 G5 X& l% Q# l; Z5 N K3 _, w
for (let button of active) {4 L8 ~3 p; X1 p9 u l
if (1 I2 S. q\" O/ r k
button.label.contents === event.key ||
x$ [2 P3 n8 R* d& z
(keycodes[event.key] != undefined &&7 i- D R# J' x1 h% L7 ^5 `
button.label.contents === keycodes[event.key].Symbol)
% h/ F+ T2 R M q
) {
( y/ V; B& h3 R. A6 X9 c
button.box.style.fill = "";
& ]\" e0 |1 m* O+ Q9 O
button.label.style.fill = "";* B1 {% x8 K% W$ }/ K& F# M9 T6 U
button.active = false;0 L6 h9 @9 Q0 G/ [
} else {
) [9 \. x+ }! g8 S+ X B+ G
newActive.push(button);0 H* B7 F* }' B7 A
}
6 B; K: a! `4 P+ B3 ~5 R
}
) L, C Z\" V3 r
active = newActive;
* l8 Y\" E; L1 a\" X, ^9 s9 j5 g9 b* j
};* y7 E5 g& V: g# m. }4 |
let bbox = interactive.input.root.getBBox();. D p, g( A- i: t6 Q' C: H6 m; F
interactive.setViewBox(
9 r$ Y& ^0 \# ^7 R3 k7 Q
bbox.x - margin,7 m5 L- T6 d7 ]' j9 C+ X8 x
bbox.y,' K$ D' s5 ^9 O- m# P\" A# ~
bbox.width + 2 * margin,
& T: P+ w; `$ L\" g7 H6 j
bbox.height9 Y A4 p6 ~2 K& `+ X
);% z# v7 o& {. R* a! P
//# sourceMappingURL=keyboard.js.map0 Z# s r! `2 t5 o6 _( C( T
. r* u3 H- W\" [) w# t5 K& d