使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>* P1 x, n+ J: \# _! ^
<html lang="en">
# S0 U+ x% Z' _) g
<head>' |5 W: B8 N0 M- b+ `8 N- t- J
<meta charset="UTF-8">
# y& [+ j! T/ X; z! i0 ^\" I
<meta http-equiv="X-UA-Compatible" content="IE=edge">& S* u9 E6 g- @- R
<meta name="viewport" content="width=device-width, initial-scale=1.0">
\" l. u, b1 O( O7 I) n' x
<link rel="stylesheet" >4 K( ^+ a( O$ H# A, j; l- x
<title>vector examples Keyboard</title>
5 Z8 L2 g\" x1 L2 A$ C' n8 }
</head>& Y9 e% y! b% a
<body>* v. P, K F2 \* r
<div id="keyboard"></div>
5 y$ A) |4 D2 i8 Q: o
) ^2 E\" }/ l6 b; h' F6 K
<script type="module" src="./temp.js"></script>
* a$ M3 ^/ ~/ p( r/ f
</body>6 |, ?( l& s' n* T7 {* t) \, P0 ]
</html>7 o1 ~* J2 E0 V\" o6 d+ I

复制代码

import Interactive from "https://vectorjs.org/interactive.js";5 Z4 B6 K6 l8 j\" ]4 H& S
console.log("Interactive", Interactive);/ Q% l& b/ @, L6 D S5 B( M# s

复制代码

/**
$ }) p' I% l+ y
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard( B6 }' a0 Y* U
* @description This interactive demonstrates how key board input can be used to add interactivity.
; B' V! `, J2 n* i
* @tags [input]9 [\" e5 X- D4 E\" t. R( z
*/* X% H* F0 c8 c/ E; X\" h
// import { Interactive, getScriptName } from "../../index.js";$ b( B! Z8 L! Q6 l5 ~
// let interactive = new Interactive(getScriptName());5 @ x. u! O7 J
import Interactive from "https://vectorjs.org/interactive.js";
! w\" }* L9 B$ b\" y
let interactive = new Interactive("keyboard");
5 }( D$ Y! F* \- B6 T1 v5 r% E8 D
interactive.width = 768;% e0 Z# @: k; s\" L0 q* e
interactive.height = 300;
% q, W- g. l- {* Z3 E
interactive.border = true;2 w: O\" e% E$ Y: `
let buffer = "";* _% a( M\" ]6 l9 |1 h, x\" k
let keys = [\" |- ?8 e\" j# O) H7 W l) Q; \
[
/ E. i3 R' m4 `# }
"`",
9 g# K) P! [3 L K2 ]\" W$ \
"1",7 u3 P0 U/ u+ v& K9 y; X( Y
"2",7 d% q2 {\" L- Z, F# H2 D/ ^) d; o, C
"3",7 w& a9 e1 c, u3 @& A; S8 T0 p2 S
"4",5 Z$ p$ Y S\" n* d+ B
"5",
( a$ q' m\" a) r- [- E
"6",3 h; e7 W- \$ M% j2 G
"7",
8 ]* ~2 c3 J# K
"8",0 Y( i8 G% W3 A3 R) ~7 Z* q
"9",
% d a3 T, d. n( v2 _* u
"0",
; W, L5 {\" x' V( W0 q1 h4 Z. A1 i; q
"-",# m' F( j) A2 p( B4 G
"=",$ h4 ]2 v/ H7 Y9 y4 K9 ?
"Backspace",6 @+ L/ F j+ H3 i' M$ p' C
],
( T6 M5 v1 w. Y
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],0 i1 g: G6 Y; U* o) N7 U
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],: @ r: y1 E6 a3 V: j+ Z
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
2 Q2 U) W& Q# p0 F$ i% D# k
[
P5 `* `& a) P0 w, a
"fn",9 g! m, X0 Q- c; ?4 i& j
"Control",) N. c9 L: C8 \/ ^4 l$ D
"Alt",! c/ e0 b' r( x0 h, q, b) H( i# n
"Meta",2 p4 A2 K\" b' {4 [
" ",6 m X+ t/ i3 L& a
"Meta",
7 b& m* ?: M9 \, P+ j: e1 e. [+ c
"Alt",; f5 P9 L; r& \- a2 b
"ArrowLeft",+ [) Y, D0 I0 h: P! _
"ArrowUp",
6 O3 l8 I\" \. S0 B- P$ L
"ArrowDown",/ n) H' m1 a8 r( D
"ArrowRight",5 q/ Y# f- t% N* C
],3 J; p6 |: ?1 O% u\" f\" m
];
5 T+ r- }1 I9 y
let buttons = [];
; w\" c+ j8 V- z; O$ o# a
let keycodes = {( ~7 N8 T1 C% o; O' F\" K
0: { Symbol: 0, Shift: ")" },7 t8 `, Y8 Q) o' w
1: { Symbol: 1, Shift: "!" },
( f4 d# F* t# q) x\" m
2: { Symbol: 2, Shift: "@" },
4 v. R, G. R d* } s8 X0 b\" {
3: { Symbol: 3, Shift: "#" },
# s& T5 s9 n. W# y4 H+ n
4: { Symbol: 4, Shift: "$" },
' x\" ^! T( p; S
5: { Symbol: 5, Shift: "%" },( Z# z; T. b( K
6: { Symbol: 6, Shift: "^" },1 z5 T6 N2 M9 I1 O! I! T4 d
7: { Symbol: 7, Shift: "&" },
) o\" s+ X0 h9 m4 O- \- i( s
8: { Symbol: 8, Shift: "*" },, T8 i, Y. c/ u6 c4 h, A\" j
9: { Symbol: 9, Shift: "(" },
; }* P5 r. o( z* o7 ^* C
a: { Symbol: "a", Shift: "A" },9 b5 J0 y/ { b\" a- _
b: { Symbol: "b", Shift: "B" },
- H\" M+ y, x\" m* ?$ X$ x. ~% ^
c: { Symbol: "c", Shift: "C" },8 R0 H' w- X& E
d: { Symbol: "d", Shift: "D" },6 r+ Z* j( `4 N+ W\" J9 u) n( T0 V7 d
e: { Symbol: "e", Shift: "E" },# ~+ @' j, z\" Q4 m
f: { Symbol: "f", Shift: "F" },4 M) [: ]- f7 Y6 k9 E
g: { Symbol: "g", Shift: "G" },
0 k9 g2 T' t5 m3 W% M
h: { Symbol: "h", Shift: "H" },
% A& I. U# X, L. _
i: { Symbol: "i", Shift: "I" },
; b2 s! F* {# A: w& v* v
j: { Symbol: "j", Shift: "J" },1 R; ]( B- r: F5 G: V
k: { Symbol: "k", Shift: "K" },& G1 a' y# G: N% x' _3 j& K
l: { Symbol: "l", Shift: "L" },, Q- {4 \4 k$ z8 ~- J: y& {
m: { Symbol: "m", Shift: "M" },8 ]& {# N: h* Z
n: { Symbol: "n", Shift: "N" },
: X* g8 e* R( P% z8 e) Q2 T8 g
o: { Symbol: "o", Shift: "O" },
5 a5 l0 y6 v\" i7 j$ g
p: { Symbol: "p", Shift: "P" },
* _0 |5 l. v; Y( n- l; P
q: { Symbol: "q", Shift: "Q" },% [- t5 }; T; S8 A0 `
r: { Symbol: "r", Shift: "R" },
. r( }3 f6 ?( }6 r3 o
s: { Symbol: "s", Shift: "S" },2 ^( K) U8 Q, l) l
t: { Symbol: "t", Shift: "T" },7 \7 b$ v4 k& D
u: { Symbol: "u", Shift: "U" },
+ G5 ~! ?# I; Q j\" J1 n1 l, Y
v: { Symbol: "v", Shift: "V" },
3 v' X5 w5 e) Y\" o) F
w: { Symbol: "w", Shift: "W" },+ h9 q6 B% H. @+ M' U
x: { Symbol: "x", Shift: "X" },
7 _/ L0 ], Y9 E, |
y: { Symbol: "y", Shift: "Y" },% h A( W \, k\" M
z: { Symbol: "z", Shift: "Z" },
1 E9 ?& J& m\" _/ ~$ U
"`": { Symbol: "`", Shift: "~" },9 J* q\" T4 n. G& o+ X; V/ ^5 D
"-": { Symbol: "-", Shift: "_" },
1 J* |& r$ n! t: {* n) m
"=": { Symbol: "=", Shift: "+" },
6 J1 m- X1 H0 q3 `
";": { Symbol: ";", Shift: ":" },
2 M- v# [$ P3 Z% }! b\" v( P4 ?
"'": { Symbol: "'", Shift: '"' },
9 o4 i* L1 |& L* b5 R% q# |- B
"[": { Symbol: "[", Shift: "{" },
9 @9 l, N) ~$ h. c\" j9 l$ V$ ]
"]": { Symbol: "]", Shift: "}" },
) R5 @( n6 ^8 i5 x4 J% P6 _
"\\": { Symbol: "\\", Shift: "|" },, K# L' ?! b( Y' {& J% P
",": { Symbol: ",", Shift: "<" },
+ X8 h% N+ P1 Y5 O; U/ @) d: Y
".": { Symbol: ".", Shift: ">" },7 k8 ^; G/ w) B8 U- Y\" H }
"/": { Symbol: "/", Shift: "?" },
9 [0 ?, O* F8 y\" B0 g
Backspace: { Symbol: "⌫", Shift: "" },
. O( b; @# @8 @1 \( K
tab: { Symbol: " ", Shift: "" },* \ m+ }% x- D, m G3 Y- a2 m
CapsLock: { Symbol: "⇪", Shift: "" },
6 G4 H& {2 A; M& r: n9 B. X
Shift: { Symbol: "⇧", Shift: "" },
, n+ y/ w& L* B
Enter: { Symbol: "⏎", Shift: "" },( C& ~ t' M. S, F
Control: { Symbol: "⌃", Shift: "" },, J\" U, s8 r8 T/ S6 T
Alt: { Symbol: "Alt", Shift: "" },' h4 [* ^6 B2 [8 \, L3 q
Meta: { Symbol: "⌘", Shift: "" },
, z. d4 M; }/ B
ArrowLeft: { Symbol: "←", Shift: "" },
8 G. Y7 @6 V2 P9 v$ B
ArrowUp: { Symbol: "↑", Shift: "" },! r- X- @! f% L; G
ArrowDown: { Symbol: "↓", Shift: "" },
! d0 Q, _! {4 k0 @
ArrowRight: { Symbol: "→", Shift: "" },
; H4 t2 A! p* Y+ c4 T! O( |
" ": { Symbol: " ", Shift: "" },! X0 a6 G* o) [
};
, v7 |! I- w\" O: _* d
let buttonMap = new Map();0 n+ ^- X% Z2 `\" T4 w; _\" d; Q9 q
let height = 32;
3 _; h5 m3 k( v: [3 o7 U
let margin = 8;
& @9 e: ?2 D' P0 p) z
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);& S3 q- a4 A+ d. `% {
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);* Y: |6 F* Y6 q7 q
for (let row = 0; row < keys.length; row++) {3 I% p# e7 }& C7 p0 M
let x = 32;
let prev;
. J8 r* G2 ` s' l e
for (let i = 0; i < keys[row].length; i++) {
. K' J1 b0 ~+ F( ] q V
let key = keys[row][i];
. B7 l5 }* Q Y1 @5 }
let width = 32;
6 \! Z& [2 R# m
let button;1 X8 y- _- \& d8 P
switch (key) {9 l% P0 B, n4 n
case "CapsLock":$ ]2 B6 L+ X9 T- v, R2 P. H( k
button = capslock;
7 o9 }7 K: x$ `, t
width = 64;
( v# d\" G/ F) w# [- V
break;; H; j0 z' S2 N [. t( ^
case "Shift":3 m2 V# C6 S% v% M3 `, Y
if (shift.x === 0) {
/ D9 A3 q) V6 A7 B
button = shift;9 P2 c6 {/ \) |9 L- u Q
} else { o2 I9 [* e# [
button = interactive.button(
: W; u; e2 S; g; O; T! {* N$ w
0,/ X7 q) d: C5 L4 z: g( `
0,$ o D& A! l4 \- @, ~1 N% c. D* z
keycodes[key] != undefined ? keycodes[key].Symbol : key
1 H4 H% E+ t7 F O
);
, R# N7 `, h\" ?0 V
}, k( q/ o! Z- s2 n* a* D
width = 90;
, g# q) c' L$ |0 H/ t/ B; Q
break;; {) A) Y0 g, ?: a' L1 K2 C- O) s
case "tab":
; W& l+ `1 d( F! Q( n) b
width = 50;
3 t' T% Z+ H0 s8 l L, k6 v5 G
button = interactive.button(5 j, [4 [& Q, Q+ h1 i
0,( @/ H3 r4 `) `- V0 K' E9 h* }7 p
0,% n2 z( [* J' k; z$ ?) c9 i! z
keycodes[key] != undefined ? keycodes[key].Symbol : key
1 V/ g5 X1 e- H: F# T. _
);
! b/ x1 ?# ?5 S
break;1 r% b1 s* v! E G* u( ]
case " ":
+ M! h6 v$ U& m. Q7 e! \% F
width = 176;$ ^$ w8 a/ S: |. `: ?
button = interactive.button(
: p' G$ ^: a8 N
0,6 _% o' T7 p: W* z' S0 Z9 a
0,
3 d9 V2 K2 O a2 s
keycodes[key] != undefined ? keycodes[key].Symbol : key
* j8 n- ~) Q( u+ @3 Q; H/ E\" ^' n9 i
);
5 U. o% n& i: K
break;) g# |* Y3 u; j u o9 y
case "Meta":6 [) z9 K' F1 Z
width = 50;- s/ R( \, Y1 w5 j1 r
button = interactive.button(
$ t6 [. k+ A2 {\" \5 |
0,( ]$ w3 x! {9 q
0,\" J2 I- D/ f- q
keycodes[key] != undefined ? keycodes[key].Symbol : key
' V* M+ Z\" U+ o9 J& V' r\" _# S4 P
);
; ] U! g- g4 C: \
break;+ h4 I\" w7 d5 }) D8 t* S\" A
default:
! @$ t6 h5 `4 i6 p, W\" f# ^
button = interactive.button($ m9 x- h8 o& b
0,
9 I, }6 x) [& ?1 \, r& Q
0,& A9 w* K$ g( O. o) E
keycodes[key] != undefined ? keycodes[key].Symbol : key5 {% B) h* N- l
);! I0 N F5 m! {: C5 Z4 ^4 x
if (keycodes[key] != undefined) {
/ o1 x* M1 C9 ?
if (keycodes[key].Shift != "") {
2 p\" J6 h0 u( h0 I' @ `' W
button.addDependency(shift, capslock);& M1 Y: j9 Y! |2 c3 _* ]4 A
button.update = () => {
5 G# v Q9 B' j2 w& v
if (shift.active || capslock.active) {
7 r% I5 r7 P- @# g6 W
button.label.contents = keycodes[key].Shift;
\" z6 b9 d5 T3 n, U
} else {
2 R0 G6 y0 T& [3 N' A) \
button.label.contents = keycodes[key].Symbol;
# q& _1 D- d- [9 F) D: {
}
+ q5 J2 ~- ~, d. u( z$ M
};$ n3 y! E( m$ g. E) k5 y
}$ z9 g0 D5 {# b, g7 k- z: K2 c5 D
}
4 F0 Z& Q5 u* R
}: R9 x l3 F7 n\" G6 c7 F2 P, \
button.x = x;( P4 [9 `$ Q. o1 N# \
button.y = 64 + row * (height + margin);
$ [! Q; p6 b2 V+ k1 ^0 e5 W/ x. L
if (button.box.width < width) {
3 k j5 ^% u) D: w0 z8 R
button.box.width = width;
\" Z4 L$ y5 \- E3 j2 S5 t1 q
}
$ q/ A, h+ [- ~9 b' k
let bbox = button.root.getBBox();+ j( K\" y7 g) b$ F' G f1 I( ~: Q: F7 J' ?
x += bbox.width + margin;9 G/ ^( S0 {& [6 f& D! v, d
buttons.push(button);3 H& e: O$ _: I; g0 a! D
prev = button; O- p9 F6 o7 r/ g' U
buttonMap.set(key, button);0 N. F, l6 b# P- Q$ y: k0 p
if (key === "ArrowUp") { w# \8 E( V9 G- \4 B+ C
button.box.height = 16;; }% \' |+ R0 i( ?5 M! l
button.label.root.style.display = "none";
; C7 P5 v! W: {
} else if (key === "ArrowDown") {
3 N* q. H& ?0 q
button.box.height = 16;
% p0 B& y$ F& T
button.x -= 32 + margin;
5 Y) d* L( ?8 _4 `0 C r$ k
button.y += 16;
: w2 {& Y6 E: q0 E Z7 n# A
button.label.root.style.display = "none";
, b8 |, J5 q! e( Y5 ? U/ o
x -= bbox.width + margin;
2 p' ~4 [: ?% K% d\" g) v
}
& w; x) [1 ], L, ]/ \& U' m- c
}
+ z. a$ b1 W, p! b
let right = prev.x;- Y9 Y) E. x7 k0 v: X6 ^
if (right < 630) {) U! u+ Z5 x9 ~: m0 v# H2 ~: y
prev.box.width = 630 - right;# M5 g6 k) f+ g2 X; h- D
}& u; @' _4 g# m* E \* v
}
! C4 `' T0 K* d( H! H9 p\" y, U
// console.log(keycodes["0"], shift, capslock);* D2 s& N& I' O4 `0 @
let active = [];
$ \0 @$ d2 E# t& A8 r
window.onkeydown = function (event) {1 j. Z* g; D Q! N
for (let i = 0; i < buttons.length; i++) {& f/ S$ l* n0 u$ e/ d
let button = buttons[i];
& U2 h' g& n: K+ S& T; f
if (
0 F: p' u% S! \7 d1 G6 U, N
button.label.contents === event.key ||8 c$ t1 K1 D\" e) O8 e
(keycodes[event.key] != undefined &&
2 t: u, }# p' g
button.label.contents === keycodes[event.key].Symbol)7 [# q* N( q) t' G1 a
) {
3 f9 k+ {# r, U& d
button.box.style.fill = "#f8f8f8";
! \2 M5 ~% x6 @6 o* p& w. G5 r0 s
button.label.style.fill = "#404040";
$ R! z7 u1 i+ h2 p! x
button.active = true;& c M9 d: v3 j5 L' l
active.push(button);
/ U, D( q. n4 }4 B
}. L8 d* y- L6 V: G% d
}& M) |9 E# T; R2 z% `2 `% ~) [\" M
buffer += `'${event.key}',`;4 |/ x1 `) x* w+ f- G
}; c7 R7 K. c$ w9 R/ X; j* ]) e, h+ b
window.onkeyup = function (event) {1 K! F\" E4 j# _4 z F+ t9 s' Z+ m
let newActive = [];4 o, B( I$ ]9 B3 X
for (let button of active) {3 U! x7 X6 X) B% x5 E2 K
if (
0 h( `! u, P: Q# P\" z* k! X2 ~
button.label.contents === event.key ||# i: B9 o3 b: ~
(keycodes[event.key] != undefined &&$ C( o C& ~\" |! A! R- e. h! ?
button.label.contents === keycodes[event.key].Symbol)
$ V( H$ T6 Z+ B/ s/ ]- O* y
) {
7 }! I _ m. Y
button.box.style.fill = "";
; ~ F/ ]' e* B0 W: r
button.label.style.fill = "";, L/ q; J1 @7 |- Z* t, Y% b1 ]
button.active = false;
\" C5 W! X* d* G b q/ R
} else {3 s\" x* ?2 L/ O |7 l, }6 A
newActive.push(button);, e- g4 z9 L1 S) W- x' e. C
}
- N, }1 S2 J4 B: p# ~
}/ z- y, L\" c! q3 B% g& `% c) P: F0 f# U' C
active = newActive;, F- A6 @0 d4 c+ M# |
};+ Y8 w( f1 {4 Y; |2 j$ C
let bbox = interactive.input.root.getBBox();
; p, o7 y I: ]
interactive.setViewBox(
& ^; {* F' F. J\" B
bbox.x - margin,
9 O* F) w8 b. b8 g
bbox.y,
0 h\" H; ?- c) r
bbox.width + 2 * margin,
7 g$ W\" N3 W9 D) w, C, `\" Y
bbox.height9 k4 Y. z2 k) e+ p
);\" j: k( K2 m. G6 o# C) B
//# sourceMappingURL=keyboard.js.map4 M& F D\" W$ n4 R: {6 W
* k8 I, h. b5 I- p( P' H) W p