使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
1 P: q) w2 z- [, I\" j3 d9 q
<html lang="en">
7 `0 ?4 v7 t\" N4 n\" X j/ U
<head>
; \\" `, X# [( c3 C+ A* c8 D6 R
<meta charset="UTF-8">
4 G$ @7 v. q5 f' I
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- V7 C3 q. c$ V/ Z\" R$ O; C/ S\" s
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8 [6 q% f% f5 K* D/ C j
<link rel="stylesheet" >
T, X4 e2 P6 |6 d* t9 [
<title>vector examples Keyboard</title>' r& Z& g& V0 Q# h
</head>. r3 @- O6 b7 K$ F- M5 j% h- x: c
<body>
- `; |5 k5 F$ q\" f' A
<div id="keyboard"></div>- A/ d; H2 i R; H
4 C. t9 ~# a; s2 ^6 Q, m, C
<script type="module" src="./temp.js"></script>
' k1 P6 }( G0 ]. D
</body>
5 @, K5 L h' m' b5 L9 d\" f
</html>
A) W% V. g0 _

复制代码

import Interactive from "https://vectorjs.org/interactive.js";- m) ^ p$ ~5 r\" @/ x' M3 t0 L
console.log("Interactive", Interactive);2 W/ a$ o5 v! ^# K5 c

复制代码

/**; @1 C7 Z) d1 K# |% r2 m
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard! l$ m' L6 K0 h
* @description This interactive demonstrates how key board input can be used to add interactivity. l: d( O2 {& U0 @5 U/ {* u
* @tags [input]0 J! b2 K9 F0 A0 i
*/+ c$ B; h9 Q/ ?# u2 e
// import { Interactive, getScriptName } from "../../index.js";9 H/ h: G8 J$ N& I4 l
// let interactive = new Interactive(getScriptName());, J' Z0 B3 A# I* a. {
import Interactive from "https://vectorjs.org/interactive.js";
\" s, K# c$ o, a+ r; p
let interactive = new Interactive("keyboard");; | ~# l* o, q( f# t @6 a- j+ P
interactive.width = 768;
- H3 x: j) ]. c7 L( F
interactive.height = 300;; B; j% ^( U! q1 [7 Q
interactive.border = true;) w; q8 E) C2 g1 Z3 @6 H. L
let buffer = "";
7 W h4 V. Y, z8 } U
let keys = [
# s* o# C6 c! l- V o\" ?& L8 `
[
5 Z4 p) B3 c- Q! n. t0 P3 p. h
"`",- W6 d# g* o1 \1 e
"1",+ s6 ]5 D: v, n4 Z
"2",
4 f* }7 s* z9 y1 J
"3",
+ g8 W9 C* H' T- j$ S+ r
"4",
' s x0 a( [! X! u- L, H
"5",) ?* m\" j9 l4 l
"6",
4 T6 V, w) _* {. z
"7",
! R( k( M7 j: W: u5 s/ J' ~
"8",
( M1 e8 I# ~7 {( i7 E
"9",
# S9 Z$ r* Y) r. B
"0",: C: D( q' a/ a3 t3 R# Y8 i- o\" W0 ?
"-",/ J A$ Z# C\" F/ x# ?
"=",2 n) E4 {; i0 [% m, m# G% j\" ~4 I\" V
"Backspace",- N2 W4 { o2 v! Y- h3 t0 h: k
],& [0 f8 D' \2 A9 s9 ?6 q; r8 Z5 v
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],. v3 W8 F\" E% N5 Z
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],: ]0 h4 T5 G5 z
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
0 L& x3 z5 y. b+ X5 x8 B' s
[! U+ D' i; m& P+ Z3 _3 k2 N
"fn",
0 Y: E( R. d7 Z
"Control",
: v; S4 w. ^# l# u4 V o0 Z' s6 X
"Alt",, G+ [/ q/ A5 `9 K; a
"Meta",
7 ~3 f- R; C- u) I$ {8 ]
" ",% x4 H% i4 r# C1 S1 s$ z
"Meta",
, w! V9 }& w2 d- @
"Alt",
8 a2 [0 J2 i$ u' t/ I6 _ \3 K. V
"ArrowLeft",0 G2 t( \5 h3 Z5 ~$ P. ^4 l
"ArrowUp",! r. ^$ w* c- J5 H
"ArrowDown",
. S5 g: D& {, y( G
"ArrowRight",
& Q0 a* z/ p9 X) E. [
],8 a1 ]& Z7 A$ @, g# c
];) p8 a1 o7 j3 } |; \
let buttons = [];$ `; L3 m- v9 O9 q' m3 P
let keycodes = {
- t, R% B& E7 y7 {4 d
0: { Symbol: 0, Shift: ")" },
# V8 Q* q A( A5 p) b' ^
1: { Symbol: 1, Shift: "!" },% D\" ^, b' D6 _6 s1 x0 e
2: { Symbol: 2, Shift: "@" },
! T8 h6 R. E: Y/ `. g
3: { Symbol: 3, Shift: "#" },
' T/ M8 ]0 k# z7 |
4: { Symbol: 4, Shift: "$" },; S0 a- m2 s8 Y
5: { Symbol: 5, Shift: "%" },
! k# q7 z/ \# ?3 }1 |' [
6: { Symbol: 6, Shift: "^" }, T# G+ k: }; v9 K, b' d9 u. h
7: { Symbol: 7, Shift: "&" },$ I! [$ u' O6 l: i5 v
8: { Symbol: 8, Shift: "*" },
& v- c' y7 ~9 m! T2 ]2 w$ X
9: { Symbol: 9, Shift: "(" },) G+ L7 K6 ~! ~( q
a: { Symbol: "a", Shift: "A" },
3 K, J9 I! j' \, s' _
b: { Symbol: "b", Shift: "B" },2 q4 b/ r0 m9 D\" q+ S* ]4 E% ]. r
c: { Symbol: "c", Shift: "C" },/ g% J0 E& q; n8 f- t; `) k
d: { Symbol: "d", Shift: "D" },/ F\" _1 W& O. ^& S+ n; k( b
e: { Symbol: "e", Shift: "E" },
9 s4 X8 T\" A3 m( J) c4 B& [
f: { Symbol: "f", Shift: "F" },7 K/ T7 J+ i7 m5 g1 F# E3 P
g: { Symbol: "g", Shift: "G" },
0 y: O* X+ T\" i. C' w
h: { Symbol: "h", Shift: "H" },
5 F# t% j% z( S
i: { Symbol: "i", Shift: "I" },
1 M: |& m; b3 h8 F
j: { Symbol: "j", Shift: "J" },% C( t! C4 {4 l; A2 @, R
k: { Symbol: "k", Shift: "K" },
/ |( q! {- ]7 G* X\" g8 y1 \% J( C
l: { Symbol: "l", Shift: "L" },) o7 a4 j; h G
m: { Symbol: "m", Shift: "M" },0 I9 u# Z1 z\" o1 F* h) o! G
n: { Symbol: "n", Shift: "N" },+ a' @! f C\" z! E
o: { Symbol: "o", Shift: "O" },
% D% v/ [- V9 Z* a. X
p: { Symbol: "p", Shift: "P" },
3 ^ O/ _: K! D) Z, N& n* Y\" V
q: { Symbol: "q", Shift: "Q" },
5 ?% @( M9 d i: w0 A# [; d1 A
r: { Symbol: "r", Shift: "R" },
\" _6 e2 x2 j) A% q7 J9 Z, m
s: { Symbol: "s", Shift: "S" },) o$ a* q% o, ]\" O; F
t: { Symbol: "t", Shift: "T" },
( }! P/ k3 R0 H9 G& }1 y
u: { Symbol: "u", Shift: "U" },! X! {% I/ t2 W
v: { Symbol: "v", Shift: "V" },
2 d; E# m1 ]4 U: }3 C
w: { Symbol: "w", Shift: "W" },
: ~6 z* b\" S4 F. _
x: { Symbol: "x", Shift: "X" },3 W- _ {* A+ s# r9 p i: L8 V/ z
y: { Symbol: "y", Shift: "Y" },
* P* D G9 X\" `+ R5 S# f
z: { Symbol: "z", Shift: "Z" },
- j( Q' t3 d6 ~5 C' n
"`": { Symbol: "`", Shift: "~" },% _* L! r- j8 p2 k/ F! H\" R
"-": { Symbol: "-", Shift: "_" },
\" w7 s8 F. Y4 R) R1 c- B
"=": { Symbol: "=", Shift: "+" },: _1 F' e; s0 s. r2 `& a w
";": { Symbol: ";", Shift: ":" },& n! G' N- P- Q( x$ T$ G
"'": { Symbol: "'", Shift: '"' },0 C: d0 F) O1 y0 L; u
"[": { Symbol: "[", Shift: "{" },: [ j0 W+ G! W$ V& B( V; ], v# a
"]": { Symbol: "]", Shift: "}" },$ b; {0 R; {! q5 ~9 i
"\\": { Symbol: "\\", Shift: "|" },+ @2 m- n4 O8 C& u
",": { Symbol: ",", Shift: "<" },
4 A6 V2 W+ w: C( A! {
".": { Symbol: ".", Shift: ">" },
( }. t1 {& ]# e
"/": { Symbol: "/", Shift: "?" },
, [; L$ f6 h3 H: B3 b8 b9 H
Backspace: { Symbol: "⌫", Shift: "" },
1 X4 r/ Q5 z* w: {6 i1 ?
tab: { Symbol: " ", Shift: "" },\" g5 X( k4 e7 {$ p7 w0 o/ H$ I
CapsLock: { Symbol: "⇪", Shift: "" },1 r0 D4 K\" g2 t
Shift: { Symbol: "⇧", Shift: "" },
# U4 u9 a! @3 Z; }, R, d3 R) s
Enter: { Symbol: "⏎", Shift: "" },! o\" @6 \5 S/ t4 I( M
Control: { Symbol: "⌃", Shift: "" },
* D# _1 A2 P( L) L [* A
Alt: { Symbol: "Alt", Shift: "" },
\" Y; O8 O& P0 l$ d
Meta: { Symbol: "⌘", Shift: "" },% J0 y( [! B% H$ y7 B
ArrowLeft: { Symbol: "←", Shift: "" },
9 I: p; [7 W- I9 H7 Q4 B
ArrowUp: { Symbol: "↑", Shift: "" },
6 ]. u- n* Z' p4 k' P; ?
ArrowDown: { Symbol: "↓", Shift: "" },, R7 b( w0 P- r\" D. T: ?
ArrowRight: { Symbol: "→", Shift: "" },
+ x6 k; C; |$ x# l\" f
" ": { Symbol: " ", Shift: "" },: M1 L1 w2 O8 v4 v* n3 ]
};0 t; P# d8 _* T) z0 a( q. J
let buttonMap = new Map();
# _0 ^+ Z) \# h5 ]2 Z; O4 o
let height = 32;
0 E! R0 b% D% ?, p
let margin = 8;
- i3 M+ N' y8 S: D: {& B
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
' k/ G0 M1 ]\" ]- ]; E8 ?
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
3 b- t- B, w$ s# G* N+ ?
for (let row = 0; row < keys.length; row++) {
- b4 F/ m# h1 G' D \
let x = 32;$ {/ A9 C: J8 m* T6 M1 |1 i
let prev;
; G! H, P- n$ G1 }6 Q% j& W\" i) T. b
for (let i = 0; i < keys[row].length; i++) {
$ X* p' F+ H( P
let key = keys[row][i];
4 O% \3 V8 T% X# v I
let width = 32;, |\" P3 K& S) J* O6 I7 k% ^% J
let button;& y( j- n5 w. E) }* g
switch (key) {5 j* @ z4 H* D0 j9 Y/ j2 B
case "CapsLock":
4 E% D7 K) u: l3 {/ G8 B( F
button = capslock;
* M+ M3 z0 s3 t1 M4 c3 |
width = 64;
0 v- m. c' ]1 b' I6 T7 X# b
break;
) n2 t9 @; _, Z/ V& I6 f) X
case "Shift":2 s* J: e. }0 B\" _8 W
if (shift.x === 0) { N\" S' F' B\" i# E& e& O) _
button = shift;
% o$ g6 X' a( x$ m! }
} else {
* W& u) k# t) J5 y/ F' ^9 k
button = interactive.button(! t) x\" D; v+ i$ u! |0 d! n; x0 s
0,
; Y- {* v\" Z+ _. J
0,
) d# h k( X/ x% m, r W3 X6 y) _
keycodes[key] != undefined ? keycodes[key].Symbol : key
2 D! ]' s\" R) V% a) _\" e' _3 t) J6 Y
);
3 N& S, |7 Q! [; s4 h' k, v3 ?
}1 I7 {: y: E4 |9 g) _% |) ^1 A6 b/ d
width = 90;
' t3 l\" ~ g8 s; W& c$ B1 ^& n
break;
, c6 i. ^7 ~ O' @5 W7 ]2 v9 C/ |
case "tab":) K3 t' U; y G: B
width = 50;# y8 f+ U/ P7 H' r4 ~9 M\" z3 M
button = interactive.button(
+ G* T) k% n% n+ k7 i/ P
0, A0 V5 T6 A! p4 T: Z; `
0,
) z2 |; i+ U6 [2 g' V3 h
keycodes[key] != undefined ? keycodes[key].Symbol : key4 Y3 I8 b- o, e+ }; k3 H
);' C4 m1 y0 a6 M5 G( Y) {
break;
, v- f4 c& n- x: {$ B V1 _/ X
case " ":+ U! w- o, ^' X/ Q# N- m
width = 176;\" z4 S% F4 J# R! c- l% @\" Z
button = interactive.button(. |# @9 G2 q\" W. l' a
0,. a3 Y% o1 {5 s# `5 }
0,2 i7 W, T& L# n3 L( z! E6 c
keycodes[key] != undefined ? keycodes[key].Symbol : key
/ O' R8 F- X t
);8 Q8 J7 {+ J% e3 Y; n( A5 b
break;0 ^! w. V$ l+ w9 l4 M: ]
case "Meta":: x9 I1 U\" [5 O
width = 50;
9 T% }& h- ]' h! W
button = interactive.button(
1 f, X0 p- \. X, L- @
0,
! G1 v5 R; }# z& a9 X9 [& ^5 m0 O: p
0,, L% I$ G: C: S6 |% ], [# i$ Q
keycodes[key] != undefined ? keycodes[key].Symbol : key0 l2 G& V0 T) e) G. ] z6 w
);
, W) d# Y8 x% \\" G6 ~4 D\" t& b2 }\" J
break;) }# w5 Z+ M( G
default:
: D4 a; C* u# e; l) L( K$ j, D
button = interactive.button(# p3 k* w6 h3 b5 m$ W& p1 K6 N
0,
4 x! ~3 ~2 E. D# k' f
0,
. ~9 J; m+ z$ z b* J( k
keycodes[key] != undefined ? keycodes[key].Symbol : key
- D1 O3 H, }+ f/ U' h- N
);
/ c; v/ }& w8 B) o
if (keycodes[key] != undefined) {1 u2 X$ u- @2 E6 @) ~
if (keycodes[key].Shift != "") {
! ^% b\" L/ u/ d
button.addDependency(shift, capslock);6 i* [0 X$ q. ?7 j7 t
button.update = () => {/ B9 L% ?& x. T7 q0 G
if (shift.active || capslock.active) {* a0 G5 h0 t. {, H8 Y
button.label.contents = keycodes[key].Shift;* @ k2 y+ U3 x& t- `: V
} else {' W1 l( O' E: p
button.label.contents = keycodes[key].Symbol;' U% E# s% l4 a\" L& {4 U6 j
}
0 v/ Q; `+ Y) y\" `/ r. h
};
& Y$ N! j3 T: j; E/ c
}$ H! ]' I/ r4 p: i! u# E
}; l7 ?- K3 P. B6 _+ Q7 y
}
2 N/ a0 E# L1 r
button.x = x;
* l1 s: J+ D6 n! r
button.y = 64 + row * (height + margin);
) H2 T' V\" Y' Q$ V# H4 n9 j: Y
if (button.box.width < width) {
- x; }% G9 @5 p; h) r+ F+ s
button.box.width = width;
8 X _9 y( a! x* |( c
}3 n! ~; x, B+ e* t3 F5 j
let bbox = button.root.getBBox();2 a9 T6 G) n Q% Y; P& y
x += bbox.width + margin;
\" p, v; v( Y( e' Z3 m) o J( |& N& u
buttons.push(button);3 [$ ?( n& P8 g- }; D
prev = button;
; G9 {/ W0 R2 T+ L
buttonMap.set(key, button);
3 q* l5 u3 |. C2 ~; H\" b
if (key === "ArrowUp") {
% `0 H- F4 `. {
button.box.height = 16;\" g7 U% u a: T7 K
button.label.root.style.display = "none";( ]% B. v+ z! v, I5 Q T5 M1 K
} else if (key === "ArrowDown") {
8 I: _5 d- r; C% i
button.box.height = 16;
, W! `6 _1 l( F
button.x -= 32 + margin;
1 w' S\" t* p8 h3 |- c6 g
button.y += 16;
* U. P9 l5 y- D0 ` {( Y
button.label.root.style.display = "none";
6 D1 L9 {8 f* S8 |. x
x -= bbox.width + margin;
6 P7 z- M; A$ Z
}- j4 p\" M& m0 W+ K. M! y! {
}
* t7 A- N u& K% O
let right = prev.x;5 ]- C* k# f9 b* K0 p1 O
if (right < 630) {
) d& E8 W7 f% P6 S
prev.box.width = 630 - right;
# T7 n: h8 K) F# j; E$ M
}/ A1 L/ v2 W) r$ q; W4 ?. U
}
* x6 x/ `/ ^! O# X4 Y\" T; O7 J
// console.log(keycodes["0"], shift, capslock);
6 Y8 V, `4 O4 }, O, {& M
let active = [];% g1 \0 S\" T0 d\" Z8 c
window.onkeydown = function (event) {+ d2 ~- S/ x1 p- w
for (let i = 0; i < buttons.length; i++) {
, J. z0 c* s\" S! d. o6 c
let button = buttons[i];
3 ]- H' N+ a4 t/ [6 k( E
if (9 j6 _6 G. k% q' e5 \2 l9 V
button.label.contents === event.key ||
6 R5 U0 x3 K+ w, y! P. n+ g
(keycodes[event.key] != undefined &&1 e9 C1 U2 ?) V, M' l* y# p% d5 u) {
button.label.contents === keycodes[event.key].Symbol)
3 e& {7 S, v. \* T+ j# a3 {
) {
) G9 n& A7 ]; z6 m& C
button.box.style.fill = "#f8f8f8";
1 ?* J; B5 m& U$ Q) K1 K
button.label.style.fill = "#404040";
4 \. J% r* x, P9 m. X3 s( u
button.active = true;
8 D) a0 D8 u `' E5 O% q% U J2 ?
active.push(button);$ L1 i\" f- K3 |3 L8 a8 D
}
- a7 C+ o+ d5 d% A7 ^$ K
}
5 I+ n' B6 P' j& W# O/ C
buffer += `'${event.key}',`;
/ o1 k+ z L4 @ f
};. T1 Q- f0 m2 C& E% j4 q3 h4 e
window.onkeyup = function (event) {3 f+ x; s5 v, d2 d' f
let newActive = [];
M/ q' M: g7 e4 x8 M
for (let button of active) {8 V& ]1 ?' ?1 ~2 m8 f\" ~3 R
if (
+ z( c0 E t8 @/ }# n
button.label.contents === event.key ||: f( ~3 Z5 Y. P
(keycodes[event.key] != undefined &&
0 M/ @3 [% L& a Q8 d
button.label.contents === keycodes[event.key].Symbol)
\" s' L+ O/ o: i+ y/ k# x
) {
* L! G$ e1 r1 ^# o: f; m
button.box.style.fill = "";3 s! r% Q! N( R( B1 p
button.label.style.fill = "";2 `' u3 C: r( Z* ^
button.active = false;- V% @& E( A4 C
} else {6 E; o' R, @5 q\" n0 s% o8 l ]* d
newActive.push(button);9 d1 X7 V5 [& n1 x
}9 N) r$ ]. C# w9 W: T
}9 `% M- P$ o5 ]- H2 k- j
active = newActive;6 @3 ~, T/ ~& z. A\" m3 i4 _
};3 N9 A# ? l# K2 N2 Y6 ~
let bbox = interactive.input.root.getBBox();1 P# P5 a& U I1 `
interactive.setViewBox(
5 J& `- U. {& t* }
bbox.x - margin,
! @ U/ B' E& d4 X! x! w* [
bbox.y,
1 `5 r' d9 `: p5 f) j( M; c
bbox.width + 2 * margin,
* [: r\" k! Q, G, s* O+ I j, ~
bbox.height* P h9 ^4 Y6 s
);
9 |4 Y\" U/ u ?0 m0 [
//# sourceMappingURL=keyboard.js.map
' h- X$ `0 f% i5 Z
4 F\" ]! T/ e9 U. N