使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1198 主题	4 听众	2977 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
- Q) `6 `3 |. [) |- Z! ~4 A
<html lang="en">2 p& g6 @1 F; Q; c# r) {9 b% S
<head>4 @0 X\" M7 A5 d# W+ b4 x# v+ J
<meta charset="UTF-8">2 B, @4 j& G1 _$ f4 d* J
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5 @; { T% |, R- ~6 l6 l; |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2 p4 S5 W, e; ^0 V# d, v0 A
<link rel="stylesheet" >! D; x/ {- d6 H: g2 `+ k. {+ \
<title>vector examples Keyboard</title>* V+ j3 R6 U# u\" b9 n
</head>
% `' D! c3 J1 `6 ?* B
<body>
8 U9 d4 F0 @$ D
<div id="keyboard"></div>
: Y- E2 S+ G3 Q. x- ^- K4 ?
8 A- O6 K) O1 t3 ]2 R8 }* x, F
<script type="module" src="./temp.js"></script>6 f7 @8 \6 e) s% Q4 q2 p
</body>
+ l2 E' x6 ], p: t) ?2 E0 ^- k
</html>
9 Q3 X* S4 D9 }% j: Y

复制代码

import Interactive from "https://vectorjs.org/interactive.js";3 Y' ?\" m* Y- @; R& G8 Y) C1 J
console.log("Interactive", Interactive);
: ?0 m: B' u9 i3 E9 k

复制代码

/**
: d( P: s' X+ l
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard1 k/ b1 f! `4 D\" w& _, g
* @description This interactive demonstrates how key board input can be used to add interactivity.7 E9 n. J8 F% l5 w0 r; b/ p4 L! f
* @tags [input]
- c! a9 {; p0 @; K8 c
*/
7 k8 A( H) d9 ]# M# O0 |* p
// import { Interactive, getScriptName } from "../../index.js";% ]' S- A( a\" D+ ^. N; h\" S
// let interactive = new Interactive(getScriptName());
+ ^ ?4 ]6 ~/ Y# b/ Z' F! U
import Interactive from "https://vectorjs.org/interactive.js";2 h4 f( ?* Z\" F( q8 L
let interactive = new Interactive("keyboard");4 d, E7 e/ U( x2 b) H
interactive.width = 768;) k( d. S5 d\" Y2 ^- U
interactive.height = 300;! Q+ n( v- _' v
interactive.border = true;
. A- y\" b0 P& x
let buffer = "";9 _) K) B- [5 l/ U9 ^
let keys = [
( J: B! W5 |$ v' t/ ^* A q
[6 G# S; R4 W: o7 p+ d6 `& D+ B, G
"`",
4 k6 m9 d' T& I6 l7 ]5 {2 H
"1",\" K0 T+ q6 l! y8 G! b
"2",( }& g+ H( b+ @6 h
"3",) P6 I% K1 l3 Q/ g
"4",
5 e n4 ], Q' [- S; f9 [* _
"5",
' M. O) U- U\" O; }; F. _+ q
"6",
% j/ j1 q0 F3 _0 B+ Q8 U2 V/ V
"7",- r* C3 }: q. K
"8", D5 J j$ M# R4 g% e
"9",' g: u5 E, x& F d
"0",
3 ^1 i& C4 R6 P- f\" Y$ M3 L/ F m
"-",( O& k8 i, Z+ I$ Y- H* l9 Q+ v: n
"=",+ @. Q9 j6 m: V6 s6 {, n6 ` a
"Backspace",6 g\" u5 I; K% i0 }3 l
],
; k+ o( \/ d0 N* v
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
4 A6 w0 |# u9 o) S U* X; C
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
2 X/ c+ p' T$ ?
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
7 G! ?% Y1 i: o) k* ?/ M% d
[
/ F! ~; }% N1 f i
"fn",
, P% g( E/ V/ }! C3 x* `- d
"Control",
6 r7 C$ q- X' Z\" B. j/ u- _1 h
"Alt",
% ]4 m# I: M% w/ o- Y9 P- v* {
"Meta",; D d+ Q: ]# S2 L9 S9 b
" ",
' A' a3 W @\" M
"Meta",
4 ^7 u+ J: V: @0 {) X
"Alt",
( x2 y0 e% S9 ~1 `) j5 {* _/ E
"ArrowLeft",
5 v\" b' p+ k- v* p, `* G5 A\" _! B
"ArrowUp",
\" Z) K% h* ?: c
"ArrowDown",
: i5 @0 o' H$ q D2 ~: e
"ArrowRight",2 b6 B) X4 ~( u
],
. g, O7 [# m T: z( b, \1 Z
];
5 y7 q6 }' t+ U\" B8 N
let buttons = [];- x8 N7 Q* M7 X- D; i
let keycodes = {
, |0 E' k4 i# a7 W
0: { Symbol: 0, Shift: ")" },3 `7 b. X$ L# v3 e2 T3 {
1: { Symbol: 1, Shift: "!" },5 q& d# l/ U, E0 `3 l
2: { Symbol: 2, Shift: "@" },
: C% d8 I# e0 A: l6 F' S
3: { Symbol: 3, Shift: "#" },/ F6 O3 |8 S/ l) P7 R$ F
4: { Symbol: 4, Shift: "$" },
4 S% b# F) ^( J
5: { Symbol: 5, Shift: "%" },
/ T' v# g7 s8 \
6: { Symbol: 6, Shift: "^" },& a- ^7 Z n8 [$ z6 K- W
7: { Symbol: 7, Shift: "&" },
* t% R9 i4 J8 l; K2 @1 I: S. M
8: { Symbol: 8, Shift: "*" },
9 A b9 F4 e$ F& B/ \
9: { Symbol: 9, Shift: "(" },
! c1 z! \7 \/ |
a: { Symbol: "a", Shift: "A" },4 t* \) T `; S% ]
b: { Symbol: "b", Shift: "B" },& Y, s' D* K- ?3 x. D
c: { Symbol: "c", Shift: "C" },5 G& j, s. k\" j9 w! M; a7 o5 f: d% `
d: { Symbol: "d", Shift: "D" },
: M8 {7 W! Z+ }
e: { Symbol: "e", Shift: "E" },1 Q1 e; L0 Y* _; k3 M
f: { Symbol: "f", Shift: "F" },
2 f1 M6 s\" y% D% d/ t+ G
g: { Symbol: "g", Shift: "G" },
7 Y3 x! l! X9 Q2 M. S/ O5 m
h: { Symbol: "h", Shift: "H" },, S2 H* N. M9 L5 ~6 l
i: { Symbol: "i", Shift: "I" },
' c5 T8 q: p1 P7 `0 z: @
j: { Symbol: "j", Shift: "J" },
6 w$ W# E* n2 I. E
k: { Symbol: "k", Shift: "K" },
1 R$ b6 P, F* b/ O
l: { Symbol: "l", Shift: "L" },
2 _3 l+ F4 G0 L. J, y3 ]
m: { Symbol: "m", Shift: "M" },9 K F. ?7 j# H
n: { Symbol: "n", Shift: "N" },
! k& g) ^1 c. V. Z3 Z U
o: { Symbol: "o", Shift: "O" },& z# ?: Q3 v1 Z. I; y' W* K
p: { Symbol: "p", Shift: "P" },\" B. m; Z& l- f7 ]7 n5 l0 M
q: { Symbol: "q", Shift: "Q" },+ Y. V- I% W8 _2 o: `
r: { Symbol: "r", Shift: "R" },
\" ]3 B% V e6 W! Y+ O5 ^. S' {
s: { Symbol: "s", Shift: "S" },
8 |3 V. m1 v! ?9 \/ U1 h
t: { Symbol: "t", Shift: "T" },$ s! R7 w2 {: O! q
u: { Symbol: "u", Shift: "U" },: u6 l* X8 \/ V\" s5 R% C1 }3 j0 L# i
v: { Symbol: "v", Shift: "V" },
7 i\" V$ v5 i, h
w: { Symbol: "w", Shift: "W" },5 \. B/ P u0 p7 G# x
x: { Symbol: "x", Shift: "X" },
' `6 k: r1 x\" i\" \ A. W3 D% ?( _
y: { Symbol: "y", Shift: "Y" },
: K& e2 k& {1 g3 H, D% G) V
z: { Symbol: "z", Shift: "Z" },
; S# \2 |5 Z) |+ m. Z8 l
"`": { Symbol: "`", Shift: "~" },2 O! J/ s0 M3 O- @
"-": { Symbol: "-", Shift: "_" },
# V2 ^1 y3 @$ R! i5 v
"=": { Symbol: "=", Shift: "+" },
/ d1 c# S- E1 C2 P
";": { Symbol: ";", Shift: ":" },
1 A; W9 n9 y7 P3 M' r
"'": { Symbol: "'", Shift: '"' },- M9 ^% I8 j% {- O
"[": { Symbol: "[", Shift: "{" },* ?0 a7 h3 }2 d6 G
"]": { Symbol: "]", Shift: "}" },4 c8 H3 q- R+ @; d% z9 V0 k
"\\": { Symbol: "\\", Shift: "|" },/ t+ K8 n/ J# W0 S% S9 K( f
",": { Symbol: ",", Shift: "<" },
4 w* V- r5 Q7 I
".": { Symbol: ".", Shift: ">" },! y, g- I% h7 j\" i1 o9 K- A
"/": { Symbol: "/", Shift: "?" },
2 A& q) w9 F7 f7 c$ y. M
Backspace: { Symbol: "⌫", Shift: "" },
* N B2 u. m- P; Z- J
tab: { Symbol: " ", Shift: "" },8 ^6 j+ G; Q. v1 x/ X# ?
CapsLock: { Symbol: "⇪", Shift: "" },
1 X- R. |. V( o/ P( w, o
Shift: { Symbol: "⇧", Shift: "" },; L1 G\" I$ }/ J2 w) @
Enter: { Symbol: "⏎", Shift: "" },( r, q5 k1 V2 P1 O; ^' T! d. e1 H
Control: { Symbol: "⌃", Shift: "" },
# w\" I3 G- u$ r7 C2 U
Alt: { Symbol: "Alt", Shift: "" },
, ^2 ]1 f. C5 {+ z: a6 `% p( n
Meta: { Symbol: "⌘", Shift: "" },7 e) o\" }: O+ ?3 a. Y p9 {' k# H
ArrowLeft: { Symbol: "←", Shift: "" },
, y* f% O3 j e' ?& b( I3 A
ArrowUp: { Symbol: "↑", Shift: "" },
% ]4 E( d\" [, a8 F- [3 e& D: q
ArrowDown: { Symbol: "↓", Shift: "" },
* ~+ s2 s5 P' q0 Q3 | Q. ?) @
ArrowRight: { Symbol: "→", Shift: "" },
9 }- r( v. u\" ~7 D+ O+ R( V: J
" ": { Symbol: " ", Shift: "" },! T9 |; ~% |9 j
};$ V( q8 h1 o- d& b/ j9 Y
let buttonMap = new Map();0 n6 ]/ _- Y3 J2 X( n9 M- f7 i
let height = 32;/ o9 O8 a) R/ B& ~+ n, @
let margin = 8;
6 ?' ]# J7 z6 h) p) C+ t
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);( M! b) o2 V7 ^2 j0 X$ Y0 c. j
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
5 x1 B% `\" a& l, {$ {/ s! E
for (let row = 0; row < keys.length; row++) {
% Q# H% T$ u6 `3 X4 ^
let x = 32;
- n. c. s% F9 S$ [- \+ J# \. `
let prev;
6 s3 y& U$ U1 q0 x; g\" e8 I
for (let i = 0; i < keys[row].length; i++) {6 a5 J- {; V1 N4 _
let key = keys[row][i];\" W* h2 y8 n; @
let width = 32;3 W; R: k* _+ {
let button;: x- n2 k5 p+ ?- V4 {
switch (key) {* l( w- t- t$ }0 z
case "CapsLock":9 e( X R% N* R0 D
button = capslock;\" U; U0 Q* |! Z' x! l
width = 64;% C( B; w# ?* e5 o2 c
break;
6 b& y1 R: b3 w% `& r
case "Shift":! }+ r; K& h; |
if (shift.x === 0) {
5 h/ A5 Z( ~8 B, \3 Y
button = shift;2 [: s1 H: p$ v( B1 W+ E0 I
} else {) [. L- C3 g$ t7 b6 o: `
button = interactive.button(4 w5 v2 W. i- P( P+ B\" I
0,
# B) e5 Z+ n4 n$ O; C! {3 v; L
0,
4 G. h5 i5 q5 i
keycodes[key] != undefined ? keycodes[key].Symbol : key
' B* }5 n' R; L. F
);' k. V$ z7 g9 n
}9 Q) S; G- G; C' h4 v
width = 90;6 Y7 n+ e* W9 D! g1 u: w
break;
& c' K. R+ X8 ^& i* ^9 t7 K( J
case "tab":6 q! H* [' ~5 @\" o/ Q) A7 K\" X% b
width = 50;
b8 _( B( Y! Y( s
button = interactive.button(7 g9 D! T) w4 q1 g# G
0,0 z/ o- P9 ?$ o
0,
! H1 d+ S4 Y\" i* m: S, S
keycodes[key] != undefined ? keycodes[key].Symbol : key
$ L/ P9 [' O+ X* F& {: V
);\" B( }1 w. L# y+ L\" f! L0 I
break;' s& u6 a$ j8 ?% w. u$ X
case " ":
0 V5 n6 F3 z, U\" z( ` R
width = 176;
3 {. Y' R/ A4 a0 ?0 o0 r
button = interactive.button(% o* {\" Q. K! Z+ M. _& M
0,+ a! [! K! K7 ]% }& S' L. I
0,9 f4 I9 s4 U3 I( O6 u
keycodes[key] != undefined ? keycodes[key].Symbol : key# P) l) l- Y4 E: g: w\" A. d
);
9 o% ]\" c0 m+ ] F, t: V
break;
3 U: ^9 j3 W2 @7 m+ w0 L8 q: o) p# u: E
case "Meta":5 T\" n' x; ?; Q$ J6 x0 T# f
width = 50;% z- l\" g! L: k+ N: l
button = interactive.button(9 }; f9 ^( f, ^ a% q
0,
( O* m) F! f) j, t
0,
1 [: E( I\" |& d6 U! x. g' W
keycodes[key] != undefined ? keycodes[key].Symbol : key t: E8 F p6 U4 n
);: y# m3 I) ?' x+ x$ o2 q
break;* o. e* ~2 T& z# ]! Y
default:6 J% m3 y4 E! O# \
button = interactive.button(
! |8 i8 c% }\" F v- f. Q, J. L
0,
. s; y5 F% q( n, V+ |
0,1 \/ G& M/ q$ Z- u7 u: k: z3 Y
keycodes[key] != undefined ? keycodes[key].Symbol : key
: X6 F6 B0 S4 f- M. g0 B0 m
);
% y# H6 v& k3 Q. P2 C: Y* {; h/ |; }
if (keycodes[key] != undefined) {
6 s! h7 u, }9 T: s/ n
if (keycodes[key].Shift != "") {
5 s8 d( }4 a, x* }
button.addDependency(shift, capslock);
, A4 M8 w2 J2 g( Z) s
button.update = () => {) @9 ]: o1 X( D. \
if (shift.active || capslock.active) {
5 s\" O5 t2 Q# L& k
button.label.contents = keycodes[key].Shift;
* p/ p; R/ L3 }. ?0 L, z( ~: m
} else {
9 ?& R4 I2 `9 I; a\" L* s
button.label.contents = keycodes[key].Symbol;
0 \6 R. \ A$ O! v+ ]5 ~
}
};9 X F, I& m! x) g0 W1 [
}; Y8 B# y' L$ b8 C
}
% G\" M+ Q, P. a; h
}8 X7 g! k9 S- x7 C: ^/ y4 t8 I
button.x = x;
: ?\" |) I9 }0 r$ w5 Z
button.y = 64 + row * (height + margin);+ c7 @( V a\" G% e/ E
if (button.box.width < width) {( @5 R; w4 f k
button.box.width = width; P9 S1 v+ H2 ]9 _9 Q
}7 Q/ ?0 V+ L% }
let bbox = button.root.getBBox();8 R0 g, a' F( G3 r2 y
x += bbox.width + margin;
& X& G1 q3 H3 B( p
buttons.push(button);
4 E6 w- t5 h( ]2 p0 s* h0 r
prev = button;
% @! ^$ }' [( n, @
buttonMap.set(key, button);# T7 E, d! u% X' g) l
if (key === "ArrowUp") {
/ g3 k: V: ~. |4 r
button.box.height = 16;, ?7 n! ]+ `, }' D4 @3 p4 V8 ~, _
button.label.root.style.display = "none";
) r4 F9 Q5 A. I7 p
} else if (key === "ArrowDown") {7 D1 O+ ^6 Y' R\" N( h D
button.box.height = 16;& L; j: Q) @4 V
button.x -= 32 + margin;
1 q- U m) R# q; ]
button.y += 16;
8 B0 O' k9 J2 b3 D0 {
button.label.root.style.display = "none";
( D% p# V4 j8 r* l6 o
x -= bbox.width + margin;
: f5 w& ^+ } P3 J2 o8 ^
}
% R1 y! l# Z- y5 K4 a
}
# @7 O1 o+ t\" i
let right = prev.x;9 B4 y0 U( d1 h# \$ b
if (right < 630) {
, H7 ]* I3 U4 j- s5 G
prev.box.width = 630 - right;
7 Z. F4 [\" P! J\" C) K) C$ o
}) u' t8 n) ]: c* b( U/ T
}
+ o' N! R\" Q% M% o3 b
// console.log(keycodes["0"], shift, capslock);, X* T+ t9 h\" Q4 y3 B6 ^
let active = [];
* M% C5 J3 d$ N# B# q
window.onkeydown = function (event) {6 s. q* L- n( X
for (let i = 0; i < buttons.length; i++) {
) B. E- I\" t* u/ |: @( m, V\" l
let button = buttons[i];* @\" S\" ]8 ~% \0 n4 u/ ^, |
if (
\" d0 Y* ] V( B2 R! c+ V* g2 z* l
button.label.contents === event.key ||) [4 r/ k+ h$ F8 Z1 g' a7 {
(keycodes[event.key] != undefined &&+ J3 B0 b. k! y! Q
button.label.contents === keycodes[event.key].Symbol)
7 `, f, s& `3 E- A4 ~
) {
4 l: }8 [1 f9 Z j4 E
button.box.style.fill = "#f8f8f8";! B. d5 ~3 z8 \# v& Q( c7 s, Y
button.label.style.fill = "#404040";
5 y2 k8 G& {8 Q$ t2 k
button.active = true;% h7 D$ w5 O\" S) ?$ b) K
active.push(button);
- V S% q& _% P1 z
}
9 {6 H1 E. ^+ `/ s
}/ g$ `6 S: l3 H$ L+ K. A
buffer += `'${event.key}',`; y, }1 G$ ], v
};: g, K8 [ i' M3 f; v# l
window.onkeyup = function (event) {
6 `- U4 K# a( F; [( b
let newActive = [];
\" Z; s H: K; q0 Z
for (let button of active) {
8 k9 |( B4 z) E7 g
if (3 i9 m; h, X9 m, Y/ A
button.label.contents === event.key ||
3 g: k3 K! d0 p5 b, |
(keycodes[event.key] != undefined &&
~& }1 Z& ]4 {/ w7 I: G2 h
button.label.contents === keycodes[event.key].Symbol)
7 P+ }- w: L( M5 d L6 {
) {- k% @5 N4 }- j$ d% k E
button.box.style.fill = "";0 q) s7 _5 u: J( \( D! B
button.label.style.fill = "";7 u4 j8 o) E, a, j$ S' q
button.active = false;' `% C5 H1 p a% }
} else {
7 Y2 Q- @/ v3 T
newActive.push(button);) W0 `! Z) D5 j1 q3 `4 n
}
* D! f: F9 Z/ K' M& y y
}
6 _' n/ G, D3 ^/ |8 W
active = newActive;
% [1 S7 c7 C$ F7 B+ F
};
: d. } F$ N/ {\" F& [4 D
let bbox = interactive.input.root.getBBox();9 }. ?2 a. ]% n# {& M
interactive.setViewBox(
5 E- \& a. c! ]8 [. q9 ^7 F
bbox.x - margin,9 K( Y. F6 O5 u7 f1 O s+ Y8 u
bbox.y,
/ g8 Q0 n8 p% r7 h) w Q& u% d
bbox.width + 2 * margin,
% l- V8 L\" w0 H) {* X# f5 \0 s
bbox.height. h: a% p( G, a\" Z& z
);
# u- L! a4 P x h' [3 _
//# sourceMappingURL=keyboard.js.map2 G9 ^$ H+ C) @, _& B
' ^5 C* n1 g7 r I* d1 [4 _1 X