使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1198 主题	4 听众	2977 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>8 }# d9 Z J0 j2 M# i; D
<html lang="en">7 `+ P* Z, y8 p( g1 r
<head>
3 k$ O& w# H' N% m
<meta charset="UTF-8">
% Z& B; D: @( X5 O
<meta http-equiv="X-UA-Compatible" content="IE=edge">% r6 b( e, m0 N+ u8 s$ C, x
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7 V. i) ?' o& P; y
<link rel="stylesheet" >
. j2 l6 ]0 L) h. g2 T
<title>vector examples Keyboard</title>
6 w1 V1 A3 J: N0 F/ H
</head>, F) O/ U- c7 }1 \
<body>
], i4 x& h, V0 O8 b; ]5 l7 M
<div id="keyboard"></div>
) o# S) }; o3 z! r
0 L6 g; B+ {6 J6 ]5 ^
<script type="module" src="./temp.js"></script>
+ S: Q+ F* Z6 M\" g4 z7 p
</body> f, _0 C! q0 J) g+ v
</html>
5 i0 B# x' D9 R) A) F

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
; X5 S1 A [' S( V
console.log("Interactive", Interactive);
, [- o$ x/ v u

复制代码

/**
# r* n2 r+ q. g\" U
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
7 W* ^+ n5 @1 w D
* @description This interactive demonstrates how key board input can be used to add interactivity.. W( @2 i' I; m: d* Y8 W
* @tags [input]* ^7 [: r- @% n- u6 d+ y' X/ O( N
*/8 i8 u6 {$ K y& S9 i+ c* P
// import { Interactive, getScriptName } from "../../index.js";
/ n8 U) d5 h\" a0 S; u
// let interactive = new Interactive(getScriptName());
) x4 @/ M$ }) {$ q, l/ I9 J\" W
import Interactive from "https://vectorjs.org/interactive.js";1 E0 b$ t) L% c: Q5 `' n! e' o: s
let interactive = new Interactive("keyboard");
# h6 W$ Z$ V$ A/ I& S( s' _
interactive.width = 768;
$ D4 w3 _- U! T# {
interactive.height = 300;
. T. z6 V# y- x4 d/ y, L
interactive.border = true; D. K2 i- ]: h; T5 X2 s, U
let buffer = "";+ H) b/ i4 g7 L2 t0 D
let keys = [
5 ?5 v, i. A2 @# O ^: X( O
[% ^: r! b& i5 v+ J% U
"`",
1 M- i: K0 B: T
"1",
3 q/ H\" z) [% u n) a* l
"2",; j3 m4 G6 K. n
"3",
+ F/ E6 v2 R* ]. v' h& R7 e
"4",
5 y) t* ]6 h* q( i5 @5 J- v Y
"5",
3 b% q6 {( S& M
"6",5 b3 G3 Q1 A\" x1 X9 w+ {
"7", l8 Y% E. s0 h# h6 j1 I1 r
"8",
8 ~0 g: `1 u1 n6 x' y' F( A- t7 H6 o
"9",; w3 t% g( v0 Y# Y# s* y
"0",. s' \* }/ S' h
"-",
2 u* X) g, X A4 ~; Z2 t: A8 L; G
"=",
+ W; N2 _0 S. C3 i
"Backspace",0 ?8 b4 ~( j; b; d! w
],9 p' `6 d8 a: u5 Y9 G) Z8 b( @
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],; z: ? [. T, d* }5 {
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],+ n1 R# o* o4 t8 [, v
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
, G\" X) X' k1 z8 z
[4 w/ L; r9 q1 T( K- m) A) [
"fn",
0 X1 M! e- K\" A& b6 V5 c# I* a
"Control",
# X% c, r9 p9 H1 z, q& V+ [
"Alt",
$ k9 g' C5 |. P% C; {: ~
"Meta",
/ A1 q, k& o$ \* F* `$ k
" ",
\" ~* w8 Y5 }+ `/ `) \ U6 o
"Meta",# h. I8 |$ {6 z: Q# b
"Alt",
6 l7 K0 p6 N0 h
"ArrowLeft",
& c( A. J6 G, y& L# ?
"ArrowUp",7 J1 h$ u* Q; w7 M5 ?) y
"ArrowDown",
+ q: A# ^, ^) [& C# T( P6 n' I
"ArrowRight",
1 F6 t Z3 l: [; s/ ?8 ]2 H4 Y
],: `9 s: e, d0 H2 c, j
];$ L* ^: m5 A& e
let buttons = [];! |\" p+ x h3 q0 Z7 R
let keycodes = {; H. \/ q$ R) l) H
0: { Symbol: 0, Shift: ")" },4 g0 o2 c; h: n$ |4 a
1: { Symbol: 1, Shift: "!" },
1 G) C' T4 _3 ?' G: x3 D
2: { Symbol: 2, Shift: "@" },2 ]) t( [6 A w: ~7 v! k0 i9 R
3: { Symbol: 3, Shift: "#" },
5 m$ L; }, ~3 U+ z6 U
4: { Symbol: 4, Shift: "$" },
3 ]( e( p& i9 C2 N
5: { Symbol: 5, Shift: "%" },0 r7 I) t. d\" q5 d# H0 T* `7 H
6: { Symbol: 6, Shift: "^" },$ D1 R4 q2 p+ v# h
7: { Symbol: 7, Shift: "&" },
& ?. g# O, k4 a
8: { Symbol: 8, Shift: "*" },
$ b; ^ O: P5 B) R8 D! A
9: { Symbol: 9, Shift: "(" },: x, Q- ^* U9 ^8 W0 ?\" @
a: { Symbol: "a", Shift: "A" },
$ _, F& g6 M, e\" a7 |
b: { Symbol: "b", Shift: "B" },5 H* D& a5 ^) H K
c: { Symbol: "c", Shift: "C" },
7 O( @; N# k: B5 L# ?: \) }/ z
d: { Symbol: "d", Shift: "D" },* h/ F+ }$ u3 g: D) b' x
e: { Symbol: "e", Shift: "E" },
. T( ?6 Z1 p0 b0 c2 r5 T
f: { Symbol: "f", Shift: "F" },! F. h/ a3 U5 _9 c7 T9 N% a
g: { Symbol: "g", Shift: "G" },
g' t+ |) j/ L( ?0 B6 y0 N
h: { Symbol: "h", Shift: "H" },
7 V; B- D% J4 c# s( w2 W. o/ ^! Q' P# t
i: { Symbol: "i", Shift: "I" },
% e% _7 I) `$ V
j: { Symbol: "j", Shift: "J" },
8 d; J9 \: |% P& Y7 ]! t
k: { Symbol: "k", Shift: "K" },
' b4 S9 J- Y# T3 W d. k7 F$ Y
l: { Symbol: "l", Shift: "L" },
9 `# c6 B4 k5 d7 p
m: { Symbol: "m", Shift: "M" },
. {+ o- I. s8 l
n: { Symbol: "n", Shift: "N" },
# ?; |\" A- {: E* `3 y
o: { Symbol: "o", Shift: "O" },4 m' k8 c y3 B& X+ g z
p: { Symbol: "p", Shift: "P" },
6 W3 S) H6 F. M! J: v- s' F9 x* ]
q: { Symbol: "q", Shift: "Q" },+ O. e! Z+ Y* Y R+ B
r: { Symbol: "r", Shift: "R" },- g5 q2 x, Y2 Q; Y
s: { Symbol: "s", Shift: "S" },. O* `$ Y/ D\" I5 d; f/ q# t* \
t: { Symbol: "t", Shift: "T" },
! V6 p1 t- W- |- y
u: { Symbol: "u", Shift: "U" },
\" z7 b) \\" y% Y
v: { Symbol: "v", Shift: "V" },
! T; W* [# Z2 R: ~4 C
w: { Symbol: "w", Shift: "W" },
, @( B\" f: W; a7 n
x: { Symbol: "x", Shift: "X" },5 K5 ^5 C- b2 H7 Q) G5 ^2 [1 w
y: { Symbol: "y", Shift: "Y" },! V4 X8 ^/ N P* p1 V; T
z: { Symbol: "z", Shift: "Z" },
; t1 h\" D; u8 G# v( y
"`": { Symbol: "`", Shift: "~" },, J5 L8 {) G2 F+ z& w
"-": { Symbol: "-", Shift: "_" },
. ]0 B, O Y# [( G# T
"=": { Symbol: "=", Shift: "+" },. q$ T- u1 i+ C# g8 T% }\" G
";": { Symbol: ";", Shift: ":" },' D- D1 [+ @\" ?, K( H
"'": { Symbol: "'", Shift: '"' },' J\" w. V6 c, K$ J* Y
"[": { Symbol: "[", Shift: "{" },6 s9 {5 w# `# Z
"]": { Symbol: "]", Shift: "}" },
* @7 v3 x9 p3 w\" b: n: A1 b$ |4 e
"\\": { Symbol: "\\", Shift: "|" },# I5 ]0 q9 D N% k* D. E* ]
",": { Symbol: ",", Shift: "<" },
+ j, X% R8 {) t9 t9 ]( v: O: r
".": { Symbol: ".", Shift: ">" },
. x4 _' Y; R( x- j) p6 g
"/": { Symbol: "/", Shift: "?" },
! G4 L' Z, X( V( j
Backspace: { Symbol: "⌫", Shift: "" }, _ W, |& U: g7 h: Y; N8 m0 ~
tab: { Symbol: " ", Shift: "" },
! c7 M& @, t6 U/ z
CapsLock: { Symbol: "⇪", Shift: "" }, s% h) {9 c$ ~$ X- M( I1 t$ \( q
Shift: { Symbol: "⇧", Shift: "" },
% ?3 F4 N! O$ @6 O) H
Enter: { Symbol: "⏎", Shift: "" },7 H) X, t) J, i v# z\" H1 s\" u$ a
Control: { Symbol: "⌃", Shift: "" },1 R+ K! C! O8 ]: |; M
Alt: { Symbol: "Alt", Shift: "" },
+ e, }5 V* B7 p
Meta: { Symbol: "⌘", Shift: "" }, U/ ^' L\" p- d
ArrowLeft: { Symbol: "←", Shift: "" },* a0 r3 |+ |; v3 e1 j9 K& h
ArrowUp: { Symbol: "↑", Shift: "" },
+ _8 K\" C( e) c2 m
ArrowDown: { Symbol: "↓", Shift: "" },* |& D& Z+ i0 z' Y7 S3 J n* b
ArrowRight: { Symbol: "→", Shift: "" },
( u8 `\" c\" G* Q/ }5 T\" t- u
" ": { Symbol: " ", Shift: "" },% ]$ a# Q4 H8 J, c- ^ ^
};9 h& I! R& J0 x+ Z4 T
let buttonMap = new Map();
: b6 ~7 h3 G: K$ X- o* U
let height = 32;
. P& y# S- z1 j, t/ @, C& Y
let margin = 8;; t' l E) a6 {9 t J. F0 |
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);3 Y: T5 u- b, W! S: O) m# i
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
8 K/ ~ T; O% L- I! m
for (let row = 0; row < keys.length; row++) {0 r/ Q5 A. ^3 ]5 L! x
let x = 32;
\" v5 j* |5 C) D; r) Y
let prev;
M$ t' F$ b' v
for (let i = 0; i < keys[row].length; i++) {
: G1 L: {7 k, H- r9 W& A' f
let key = keys[row][i];; p7 W! }3 g2 v, J, f- q
let width = 32;
3 ` y7 N o* T' F- a
let button;1 |( L: r# l. W# e& o/ Q
switch (key) {
6 B( A9 N) q$ |1 m& P
case "CapsLock":5 o2 B; ?+ u\" y$ p# @
button = capslock;
$ B: w+ J# \, N0 `
width = 64;/ z8 @; Y& C, |1 `) K& k& o; I0 e; z
break;' M/ M+ H# l0 b; Y' ?% F
case "Shift":) a+ n; M+ [; a! f, T) K d
if (shift.x === 0) {
) {7 l. U0 y) M+ b: O9 q
button = shift;
( N& @; m5 v2 R! k
} else {
: Y5 F8 n7 t8 ^& \7 |- G
button = interactive.button(% d- P5 m/ d/ {: A
0,( k$ N& b0 R. Y: X
0,
( r, x. y; E+ w
keycodes[key] != undefined ? keycodes[key].Symbol : key) }- e7 D1 Q x; [3 E6 g
);0 R0 b X/ f; I6 x
}9 l- N& d) ~9 u! A. a7 Q2 a
width = 90;
9 ]* K u, k* H
break;
4 ~6 d3 K* ~/ w\" K8 X\" x
case "tab":
; u5 }) ^, @1 y: L4 g. M
width = 50;
8 Q) M8 v8 O$ | c
button = interactive.button(, H6 W! \$ o! \: U3 H! o
0,
/ A0 T8 K$ X! ^5 H0 ^* d; ?' y
0,, O- J' I2 }- z\" |. i* a' Z
keycodes[key] != undefined ? keycodes[key].Symbol : key- i L3 A0 Q% m4 w, a6 j. `- Z
);
0 _! g$ Y# b7 Y/ R
break;
3 u* r7 Z+ v6 y2 c; X
case " ":
* d+ c# P; Z- s. y- X
width = 176;
. N( ^\" Y! H! p* ^\" k
button = interactive.button(. [- N8 W4 w F7 P
0,6 L- ?5 Z; K3 P4 E
0,
; f- y: w3 j0 e! i, ~; S' r8 q
keycodes[key] != undefined ? keycodes[key].Symbol : key. b0 i! j ]2 w% }' L* a/ U# m2 W
);: w; Q' c! Y4 P( b2 Z- k2 J8 x
break;! @( y/ Z! I. F: f& z1 u; e
case "Meta":3 a! [- |\" w\" D3 e5 E
width = 50;; O0 z/ K* d\" N6 z4 j# y/ r
button = interactive.button(, \) J% u5 Z. |) I! _/ c
0,% S) T: ]# v7 e& _
0,
/ ~% P& r( O/ Z
keycodes[key] != undefined ? keycodes[key].Symbol : key$ L) B- ~4 y5 O. @. n& o; T
);$ O% v. w D) G8 D/ r( E q
break;
/ H* }7 P! P# U v* S4 d+ P
default:
% p ^9 x1 n9 ~/ b- |
button = interactive.button(
7 j' y5 W2 m/ X: Y8 m
0,$ z# `# y, N0 P3 {+ h+ }
0,5 j! U5 b6 [. ?) V
keycodes[key] != undefined ? keycodes[key].Symbol : key; s; ?0 h8 m8 v' x- Y, |
);
. v+ p/ S1 R\" I% k8 u\" O
if (keycodes[key] != undefined) {5 L, a$ u, O! f: @% W% N% @
if (keycodes[key].Shift != "") {/ _% y0 A( O- @9 R* W
button.addDependency(shift, capslock);+ Z0 `) p/ o* k% l/ ?- i
button.update = () => {
; |# K/ v\" S# |4 t
if (shift.active || capslock.active) {0 a. p3 T7 Y) e4 y
button.label.contents = keycodes[key].Shift;
2 m/ N, X: x' W5 j w% R1 z
} else {
, F4 W2 r* Q\" ]3 i' _* W$ a5 m9 s. g
button.label.contents = keycodes[key].Symbol;* Q% O* X& l- R- e$ c; s
}
/ I: r2 P5 r3 v; v3 W4 S: Q
};8 {. V# O, `, f% C2 S
}0 S6 x3 c+ |) X
}
7 G% e\" m8 t/ V, _/ @; T1 P- X+ e
}
; l5 e* c& ?+ A2 O* }$ a! s
button.x = x;
2 n0 X+ k( O/ |8 ^) r
button.y = 64 + row * (height + margin);
) y2 M8 O5 I) [7 q. m( E' y
if (button.box.width < width) {
1 @/ a& T& T2 _0 C& E, j q
button.box.width = width;
1 }1 @8 N7 ^4 ^. ^9 p
}, T3 g* n- `8 j
let bbox = button.root.getBBox();
1 h1 O\" f6 |4 h. J
x += bbox.width + margin;
, Q2 `/ f0 b3 N
buttons.push(button);1 E0 ~* o m; W9 M
prev = button;0 U7 J6 Z) r9 p
buttonMap.set(key, button);
+ h4 N\" q8 k3 i7 {
if (key === "ArrowUp") {\" l4 F0 u$ s% r6 ]) {9 V
button.box.height = 16;
0 b4 H$ K* Q7 x/ w- ?
button.label.root.style.display = "none";. s5 J, R* D2 n! H
} else if (key === "ArrowDown") {
8 |/ y. e- e- K
button.box.height = 16;
8 R+ A8 V y! K4 U# Q( B
button.x -= 32 + margin;
4 ~7 h. `7 a/ h# X! W! m7 e
button.y += 16;
: I' d; Z7 {4 V) b* h0 R
button.label.root.style.display = "none";9 b. p# N/ c' }$ g9 B6 B
x -= bbox.width + margin;0 A4 Q- P6 W\" t! v
}- T( f) J, N1 \
}
) m8 `, k, B9 c9 |% {8 |) U
let right = prev.x;) F\" Y) I3 Q9 d% D/ @' u
if (right < 630) {
8 m' I' A! w. \/ u+ d' y+ f
prev.box.width = 630 - right;
/ _6 l! x7 @) O3 Q
}
( R3 b! A* N! [8 E; ?
}
U; [$ N6 V+ }! `8 c9 c
// console.log(keycodes["0"], shift, capslock);
: P# M& i1 b, m, p) m
let active = [];) u7 T( Y* @, ^5 h. J
window.onkeydown = function (event) {
2 ~3 A0 p( V2 ^3 p6 e4 x
for (let i = 0; i < buttons.length; i++) {
7 j7 a; h- Y9 ^
let button = buttons[i];, S4 Y: O2 Z7 j
if (
5 J& L/ i; A\" \8 H. } M
button.label.contents === event.key ||% _3 {) G: `2 P5 u0 t\" u
(keycodes[event.key] != undefined &&+ A: X4 p: G4 r% s% t l1 a) u
button.label.contents === keycodes[event.key].Symbol)
9 s, f: x) G6 O- N! O& p
) {# ^3 M4 u c2 a( t) L( `0 D
button.box.style.fill = "#f8f8f8";
/ W% c: N: A9 t0 u. V# O\" D
button.label.style.fill = "#404040";* W! J/ {; [. P6 h7 n: V+ W
button.active = true;
6 W1 d( g/ `- M9 T# z: o, ^9 H
active.push(button);
- R: N8 Q8 f% A( P
}
3 B: c\" k5 c/ _\" ? E! v\" f2 k
}6 W: p: _+ a3 G) d5 }
buffer += `'${event.key}',`;
\" w# q; Q& ^$ _! {7 X
};
\" D6 }* U; W: _% ?% s( H- }
window.onkeyup = function (event) {( x) k; L/ X( q
let newActive = [];. o7 M6 t- C5 Z6 K& D3 C; P6 Y
for (let button of active) {
' W% ]; v Z2 Q) N; l$ l
if (
, H( }4 G0 E9 p) e6 p6 g# N; y0 f
button.label.contents === event.key ||% N8 E4 y* B6 E+ [% Y: T& `
(keycodes[event.key] != undefined && K) |- ?$ W: y9 a8 F, d8 B
button.label.contents === keycodes[event.key].Symbol)) z- F$ s8 R) t. X& H/ s2 O
) {3 {% Q0 W2 A: [0 Z Y# [\" h
button.box.style.fill = "";
0 n\" u7 B( X+ X8 [, Y
button.label.style.fill = "";6 D% | k- v2 V! @+ u
button.active = false;
\" r4 z: |: K2 p
} else {
2 H3 f+ o: E: Q% S3 H- @
newActive.push(button);( Q# y8 Z7 F% I% x5 E' d
}
0 ]9 N- q& W/ _
}
\" g' ]# `4 f: o. W
active = newActive;
7 q( m7 B$ I9 y% ]) q$ w6 j5 C
};
' I5 T( X8 \1 e3 z% Q) B# P( g
let bbox = interactive.input.root.getBBox();
* `* j7 k+ x* \/ T3 S4 [
interactive.setViewBox(
; W$ H1 } @9 \ |6 I J( f
bbox.x - margin,) ?5 d# v, {8 X1 Q+ P4 w7 s
bbox.y,
: w4 Y. i- a- V7 y2 e) E
bbox.width + 2 * margin,( t t\" K9 L7 _9 f* V! \
bbox.height
2 x# V2 K$ Y) j/ c\" E7 P
);
3 Z, L1 \- @) Z9 M/ k7 C
//# sourceMappingURL=keyboard.js.map
2 q; P4 y( e9 ^
! H4 ?1 C0 T x0 l% Q3 ]