使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1186 主题	4 听众	2922 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
9 ]& [. v6 Q1 _6 p3 J+ V& C
<html lang="en">: [$ Z+ ]) Y/ T* v3 c1 [2 }
<head>
/ b9 G! L+ N+ {- n, Y5 E9 d
<meta charset="UTF-8">5 M\" d% E4 V! P; D$ c3 T
<meta http-equiv="X-UA-Compatible" content="IE=edge">
% K: Q$ @) ?( V, h# F6 x6 d
<meta name="viewport" content="width=device-width, initial-scale=1.0">
]: Y* V! `2 F6 [\" c6 e7 I, O
<link rel="stylesheet" >
9 Q1 J; Z/ P2 Z; S- H- S% y! V
<title>vector examples Keyboard</title>! E5 _6 E1 m$ t- H6 M1 d L
</head>9 d2 z7 V, q# i, ^- I: l
<body>1 d+ Y9 P* f {
<div id="keyboard"></div>
4 ]) `/ e/ H; G\" e
: A/ E9 K, F. k% u! R. m- b
<script type="module" src="./temp.js"></script>5 e/ s. e! t, Y, m
</body>! A\" ^0 X! N) c: W
</html>
% q7 }6 w0 C) U+ Z/ `

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
7 \, ?& Z. E; S4 D
console.log("Interactive", Interactive);- s+ @0 N\" H( Q: ?: U

复制代码

/**# R' e/ V) ]% P5 G$ z! ?' F
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
9 J r, }4 V\" u1 Q$ w+ V) o
* @description This interactive demonstrates how key board input can be used to add interactivity.( | r4 A3 C\" f
* @tags [input]' r6 R. s* o! t$ j+ b2 W9 [; r
*/: Q! M\" J2 y8 J; `2 A% \; S
// import { Interactive, getScriptName } from "../../index.js";. u6 G9 R. T9 V3 P; U
// let interactive = new Interactive(getScriptName());
9 b$ I9 t i0 D3 A7 V
import Interactive from "https://vectorjs.org/interactive.js";5 X- E. ~- y: I. m
let interactive = new Interactive("keyboard");9 d+ G; z\" N _. Q* j
interactive.width = 768;
N6 v, a* S5 ~* k. Z
interactive.height = 300;
$ _+ i7 q, y2 d& G) E9 z
interactive.border = true;\" c. F' }- U\" q: Y
let buffer = "";
5 s# |% q9 M: Z
let keys = [( S3 v& ]4 U h! X2 C* @
[, ~' ~1 n b! z4 K
"`",$ c# E9 f/ @: u. [) d
"1",
& c, o7 U# Y* D, u- Z, @& N; r
"2",
6 ]( x1 {7 `. p5 R: s. N6 j
"3",
% J% Q4 P1 O! U$ X) F! o2 @! l
"4",$ K( V4 G5 n4 v- h
"5",
; a0 B% l6 q2 a( k5 ]& P0 n( M
"6", n/ r0 I1 {/ {0 o& r
"7",
8 ?, k8 N7 X( c+ D' j
"8",
. q\" W6 x B$ ~( N
"9",
# C3 r) M- k7 E\" G# W0 p: w7 J1 V
"0",. `( H0 y- ?3 }& ^$ M! Z
"-",2 C/ H\" `' z+ R\" \- T- ~, y
"=",
/ _: R; l2 r) `8 v$ _! c
"Backspace",/ n: h _$ n ~
],
1 n% D% a c% l$ ^
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
( j% p, a2 q* ^% N8 o& \* Y
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],% g. x6 l3 @* a8 J8 G# W; c
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
. J1 V& ?9 H5 F6 N# o7 p: w
[
/ Y# x9 i, ]$ B+ f1 A, h
"fn",
: a$ _. V( q, J; t
"Control",( V6 |& g4 Z N& c, w- B' e
"Alt",
# g# u( W( J* B6 s# b0 l6 s
"Meta",+ Q\" Y\" \% i5 _# \- _! r& x
" ",$ `* s# i! v4 f9 J$ I
"Meta",) ~. s6 y% `& F! U( r$ P2 k* c9 v
"Alt",
5 d& G$ r4 c0 L, q8 ]4 j; }
"ArrowLeft",2 d6 I) @, E* b9 d; q$ x
"ArrowUp",, t6 @6 H$ J' T5 q0 I\" V
"ArrowDown",
& T# q$ E; {3 s- w# ~9 M H
"ArrowRight",
* L, U( h) G2 K4 l\" d5 ~) I
],
* p$ T; m\" ]* O% [2 O
];) q8 r\" T4 M) e6 `% k; b ~
let buttons = [];1 U7 \* r/ z- v7 A u
let keycodes = {/ w4 _. H7 g- ` ~0 \# q1 p3 k
0: { Symbol: 0, Shift: ")" },- ?9 N. r! T* E5 o# K9 A X( M, f
1: { Symbol: 1, Shift: "!" },\" X8 f\" \9 c) l' ?. `& E
2: { Symbol: 2, Shift: "@" },
- g, G6 m5 ^9 X' U5 m' L) i1 g
3: { Symbol: 3, Shift: "#" },! G\" ^+ i7 \: m
4: { Symbol: 4, Shift: "$" }, V4 h3 J7 X1 i7 X0 M/ f
5: { Symbol: 5, Shift: "%" },
4 s5 W7 Q* {: `
6: { Symbol: 6, Shift: "^" },5 c\" n0 u8 m' h+ }6 f; {: D/ T
7: { Symbol: 7, Shift: "&" },
( f3 b9 ~3 o$ U- n
8: { Symbol: 8, Shift: "*" },
# K% a7 y) K, F9 {
9: { Symbol: 9, Shift: "(" },( |4 ^ M% S0 b
a: { Symbol: "a", Shift: "A" },
, {/ n, k/ B) Z! O2 X7 e$ R3 @
b: { Symbol: "b", Shift: "B" },
5 |; `8 d# N; J1 P# S
c: { Symbol: "c", Shift: "C" }, `5 d: d7 C6 Q$ k6 W
d: { Symbol: "d", Shift: "D" },7 C4 W) L: v8 K3 \
e: { Symbol: "e", Shift: "E" },, D' ^7 O$ N% N
f: { Symbol: "f", Shift: "F" },
\" Q$ j! h+ L ^ B5 @& G. A
g: { Symbol: "g", Shift: "G" },5 ^# f: w- z/ o6 R/ I
h: { Symbol: "h", Shift: "H" },) O# ?5 B' S' j& h/ B
i: { Symbol: "i", Shift: "I" },
+ d1 K& l- T' C! {
j: { Symbol: "j", Shift: "J" },$ x' s7 ?* Y& d3 {0 M
k: { Symbol: "k", Shift: "K" },
# g6 }0 ]6 G+ A& M0 X
l: { Symbol: "l", Shift: "L" },1 \/ g9 G, _# x8 q
m: { Symbol: "m", Shift: "M" },# c# O ?5 W4 P( s
n: { Symbol: "n", Shift: "N" },
; R. R6 z8 p3 o/ ^7 J
o: { Symbol: "o", Shift: "O" },. o* A' v6 X$ {: |0 r( c
p: { Symbol: "p", Shift: "P" },1 ]0 q3 P8 l* N& F+ V$ z\" ~
q: { Symbol: "q", Shift: "Q" },
- R4 l7 Q1 r, Q: J! o! w
r: { Symbol: "r", Shift: "R" },, P) A2 F\" C* t7 r- X
s: { Symbol: "s", Shift: "S" },
O: l3 y+ ~* h! N$ }
t: { Symbol: "t", Shift: "T" },
0 S1 K7 {' d! s, ^, h$ k; P
u: { Symbol: "u", Shift: "U" },5 l8 ], ^0 s7 D9 _# `/ f
v: { Symbol: "v", Shift: "V" },
6 q4 s1 @5 s( s% B! y5 F
w: { Symbol: "w", Shift: "W" },) E) c; x2 e+ m1 }, E7 q4 w( j
x: { Symbol: "x", Shift: "X" },. r, s/ P9 u; _* h9 q1 Z' d
y: { Symbol: "y", Shift: "Y" },
# a4 ^2 N: x& h# Z
z: { Symbol: "z", Shift: "Z" },* p/ t P( _5 p5 Q* b
"`": { Symbol: "`", Shift: "~" },/ n! a z: T7 f# v M) w
"-": { Symbol: "-", Shift: "_" },
\" G$ W* N- {1 y) d
"=": { Symbol: "=", Shift: "+" },
/ U. I1 B# d3 G1 n
";": { Symbol: ";", Shift: ":" },
( D. [6 U3 @' v4 E. d
"'": { Symbol: "'", Shift: '"' },
+ F# U! M4 O\" S; S1 i4 N
"[": { Symbol: "[", Shift: "{" },2 b/ H0 \+ A; z' F0 W/ R
"]": { Symbol: "]", Shift: "}" },
7 \* A\" Y# O% t% z& w+ ^
"\\": { Symbol: "\\", Shift: "|" },+ a1 m3 e4 E$ [1 ^7 R8 E
",": { Symbol: ",", Shift: "<" },
8 C4 u% _. a5 x% p
".": { Symbol: ".", Shift: ">" },* \0 L! l% V2 M
"/": { Symbol: "/", Shift: "?" },7 V% R# {3 Z' @
Backspace: { Symbol: "⌫", Shift: "" },7 N# D% |' r1 _' n
tab: { Symbol: " ", Shift: "" },8 `! D# Z3 I' M C3 P0 Q5 @4 R% {2 F
CapsLock: { Symbol: "⇪", Shift: "" },/ M. m- X X6 W A
Shift: { Symbol: "⇧", Shift: "" },! y! F. L# O, M4 i* Q2 v
Enter: { Symbol: "⏎", Shift: "" },
+ J) A9 }. n5 @! B& {6 f
Control: { Symbol: "⌃", Shift: "" },
' w- {8 R* v! J/ h
Alt: { Symbol: "Alt", Shift: "" },8 u! c! O, D2 ~8 h
Meta: { Symbol: "⌘", Shift: "" },$ \) w p/ j6 ]% p X( b3 x- k
ArrowLeft: { Symbol: "←", Shift: "" },( c4 f0 `4 {5 V! |\" _; V' N
ArrowUp: { Symbol: "↑", Shift: "" },4 u3 k( b5 E/ r& j$ S
ArrowDown: { Symbol: "↓", Shift: "" },2 \. Y2 q0 f; E* }
ArrowRight: { Symbol: "→", Shift: "" },
2 W$ g# y$ G: v( C b' p
" ": { Symbol: " ", Shift: "" },3 m: E4 R; Q0 k* O; F2 n) [
};8 ]7 ]! g$ x, s\" A3 s& P
let buttonMap = new Map();
5 x\" D9 C$ m. Y+ H
let height = 32;
4 E+ X6 g+ i( Z, X; f
let margin = 8;
: C0 A, f3 |) X
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);# @: G) {4 W P5 v+ N& N1 e
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);9 p5 Q, k% A5 ]( ]: o
for (let row = 0; row < keys.length; row++) {
: v* U, S2 I6 ~2 J
let x = 32; z0 W! U4 F8 L# R- v
let prev;7 \4 F2 C: F' X( j ]
for (let i = 0; i < keys[row].length; i++) {
% I3 e$ }2 i0 m
let key = keys[row][i];
! G; s0 z. g5 W
let width = 32;
. C' W# j5 o( s% D7 x, f2 C2 p\" M1 L
let button;: a1 R+ E\" u\" }9 P' R' H
switch (key) {( c8 B! o! K, K; ~. Y
case "CapsLock":
2 A% ^3 z% j& X\" a) Y
button = capslock;7 q+ ]) m8 r6 g
width = 64;
7 W\" Q9 X9 r* i\" m% x: e1 B$ b
break;$ V- S5 h, C9 F6 c
case "Shift":4 ]7 ?\" C$ m* @) y8 y1 g\" Y4 [
if (shift.x === 0) {0 |9 F M& C, A
button = shift;
, k5 `0 |( i- [4 G6 k. s: T/ {( }7 x
} else {( a o1 S5 V% L8 X# F* P
button = interactive.button(: W% Y/ G\" @ D% U3 j; Q
0,
0 @* ~: D& r! N. b
0,
7 v! P i2 g, U$ g$ s
keycodes[key] != undefined ? keycodes[key].Symbol : key
$ c9 J9 h6 Q7 O7 ^7 d6 X3 M# G
);
# K& l) p: _' D1 |, j H2 A l
}8 }- c I8 Y* \
width = 90;
. x4 c0 T; W* f# _9 a
break;
) v\" t% O\" h+ a
case "tab":
& q/ S7 p5 r6 y/ W
width = 50;
6 f* x6 X( R$ Y
button = interactive.button(; ^9 x0 `+ @) a
0,' A0 \3 D9 E6 z, ?0 [! S
0,; E' k: z' l4 ~6 {- N8 t5 J7 g
keycodes[key] != undefined ? keycodes[key].Symbol : key% s; e) k\" b7 B4 u% b
);
; g\" N* W6 q0 u! Z
break;! C8 k6 z9 j4 c, P' k8 V, U
case " ":* a) @4 ?8 P, ]6 N5 U
width = 176;
! c3 R, m/ r! T7 X8 k
button = interactive.button(
6 ~& `/ V9 k7 q I$ o
0,' g, V& N2 y8 k5 a4 {
0,5 Y* K. ~/ d: N7 Z; \
keycodes[key] != undefined ? keycodes[key].Symbol : key
1 B+ e; C; ]. P, O
);
4 L4 O: t4 `( w5 T# e2 h
break;* c7 w6 ^, Y* v4 G. B5 ^ D' A' U
case "Meta":
4 Y0 `9 K2 ^6 P% ?1 { A4 @/ R% v
width = 50;
9 D! Y# ~1 k( P ~7 O4 G
button = interactive.button(
# x! |7 z; Y; o
0,
+ O3 r6 H4 w+ o( b- `0 f
0,
1 x6 ?7 v, q# V5 Y/ {) r8 H5 Y
keycodes[key] != undefined ? keycodes[key].Symbol : key
5 Y& ~: I- `' p& z0 Y' L
);8 |8 a, V! @0 f$ R
break;. j5 S+ L6 U( v, d- I1 ~ j/ D
default:
`- D5 q: ~; X% ]+ s# O
button = interactive.button(
% H0 C& u Y9 g
0,9 j, x0 D( a N! L. S% g7 a' X
0,$ p7 g% R! T7 D* e! u
keycodes[key] != undefined ? keycodes[key].Symbol : key
4 c; U: J6 a# O3 S c! s% s
);& N$ W, j7 T\" f\" N$ G$ J! ]
if (keycodes[key] != undefined) {
% V- r Q2 l+ p9 U4 ]
if (keycodes[key].Shift != "") {
9 v$ e/ A( b2 d: y( M! a0 y4 r
button.addDependency(shift, capslock);! z3 Z t4 \( P
button.update = () => {1 [: b: `4 l, z% A
if (shift.active || capslock.active) {. B' ^. E6 H) q
button.label.contents = keycodes[key].Shift;: |2 s; x/ I+ @0 W! C
} else {$ K; @. U& p. m. C
button.label.contents = keycodes[key].Symbol;
+ S2 a- m\" g/ j( ~) O, u. m2 @
}\" D* C0 @0 n) S& G
};' d( {( X! T* k; n b. q0 s! Q
}
\" _- n2 I9 F' E; j0 {3 }2 ~
}
! V9 q b1 m$ z1 g
}
2 U# z9 k+ Z; h& T6 h$ E
button.x = x;
: O8 v3 _% G) t( Q# ~# l
button.y = 64 + row * (height + margin);\" ~, z9 g `3 i) F) H
if (button.box.width < width) {
, \3 K$ _3 D' ]2 M% |5 U
button.box.width = width;
) @) w/ n* _- ?
}( g6 ?% Y/ b! u7 x, e' g- ]\" M
let bbox = button.root.getBBox();. ` I& G. B& v, B% h: W: J
x += bbox.width + margin;
6 n1 [! _. j( ]2 K% f8 m+ r8 p# P
buttons.push(button);2 W; a( K$ B4 R\" T
prev = button;& c! t( B; S. ^0 p0 }, l5 B. j; U
buttonMap.set(key, button);4 N; [9 p+ p1 r n8 H- Z' c6 k
if (key === "ArrowUp") {
5 r5 p: T. {8 D
button.box.height = 16;3 L$ v$ ~4 \* b Z# J
button.label.root.style.display = "none";
& n* x* T- e& r7 ]- T
} else if (key === "ArrowDown") {
\" I2 I9 K; @- [- _; [' N9 ]
button.box.height = 16;9 _\" [( B1 A3 \2 T9 y& o& u- @
button.x -= 32 + margin;' E3 |' x6 A u* G% d B7 P6 r
button.y += 16;\" w3 [, o/ y4 k* g& ^3 d
button.label.root.style.display = "none";- u% J# B6 H4 ?/ ~) k' u
x -= bbox.width + margin;
2 h. ]- D6 y\" B% {
}) X; f! L$ v. _% z4 \4 }8 }1 A
}
7 u\" N+ g7 @\" \3 G# [
let right = prev.x;9 a k9 Q7 v/ P3 p
if (right < 630) {
, e& \7 }, e7 z8 e/ N
prev.box.width = 630 - right;
0 \8 U8 z! g9 c6 C1 E1 m* a
}9 K) O! ^/ }1 b3 y: I\" ]1 K! X# ^
}
% s+ O* j! @\" b0 {
// console.log(keycodes["0"], shift, capslock);
; w, f$ N4 Z) k) A/ Z
let active = [];
5 A( q8 s2 U' ]
window.onkeydown = function (event) {
0 [& A, h- Q9 g
for (let i = 0; i < buttons.length; i++) {2 f( I4 [# ~+ J7 e: O9 N( e
let button = buttons[i];
- J5 L/ @8 O/ g) s( R z$ T
if (
0 [8 |7 V. N6 e0 |
button.label.contents === event.key ||: `5 h/ o, w, x. x
(keycodes[event.key] != undefined &&
% j4 r( O4 J0 _: x5 u
button.label.contents === keycodes[event.key].Symbol). x6 S/ [! b: O( ?6 R) {
) {
- f4 `\" L& ^4 y9 Q$ o
button.box.style.fill = "#f8f8f8";
! r5 `\" @; y( ~: k4 w
button.label.style.fill = "#404040";
P. C2 T; {0 [5 `
button.active = true;: i- e: p! a1 I [. [7 V/ _, }
active.push(button);, u8 c+ I4 `8 F6 i7 C
}
\" C+ x. h9 O a, R3 N0 H
}
4 u I8 B: {: n3 U: _9 J, U
buffer += `'${event.key}',`;# u5 Z% u( s F9 ?
};
V, ]8 J8 `5 e) [& u
window.onkeyup = function (event) {
3 D+ u1 e* G8 [9 Z
let newActive = [];
: ~( i\" G% l4 } L' {- q
for (let button of active) {) ^5 u. \% a9 w; n9 p( {
if (3 x6 w+ L/ D h* a
button.label.contents === event.key ||# h$ L+ {) {4 n$ |
(keycodes[event.key] != undefined &&
+ E9 e' y/ B- G* R2 v6 g9 `
button.label.contents === keycodes[event.key].Symbol)
4 u2 T& V+ U\" D+ t: G( U\" S9 L2 D$ j
) {+ q- B! n! ~: t R6 v3 G
button.box.style.fill = "";
4 L) ? a; v% Z: y\" ?
button.label.style.fill = "";
) ]8 x4 N& j1 v8 A
button.active = false;
# L$ r4 F3 {3 l( C
} else {
# k( |! r* z; ]% _
newActive.push(button);2 }, D8 H+ q; c, Y. t
}* m1 h: U4 d\" |, k8 Q3 Z; _\" |' @
}
4 }6 D: g! q; F
active = newActive;6 g( X0 U& s2 K/ N
};
2 e9 y& U* B! h4 V) M
let bbox = interactive.input.root.getBBox();- C: Z& t- x$ @- h* w
interactive.setViewBox(+ u8 |5 E/ o. R, y# h8 ~
bbox.x - margin,
& Z Z4 P; t% M: b* O
bbox.y,
2 @& N+ K+ ?8 {9 ~2 \( e
bbox.width + 2 * margin,3 J\" s! G! y5 d# k- x- L. f
bbox.height4 s- ]! N$ I* r+ |$ T: E9 Q1 h( V
);
+ |5 } t8 O e# k7 C8 b! _
//# sourceMappingURL=keyboard.js.map
+ r) J6 ]7 L# q, t0 O9 p
: U5 G0 m) Q% K% E! c* Z# r2 f