使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1186 主题	4 听众	2922 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>\" e\" A3 f7 S+ y4 u
<html lang="en">
9 |\" L2 h; L( Q9 d1 k' `, O& E
<head>$ b* L- u2 T* V7 O& k
<meta charset="UTF-8">
' E7 m. }5 A! v* @& J% m6 \
<meta http-equiv="X-UA-Compatible" content="IE=edge">* f& L\" c. O2 j+ j9 S1 m% \
<meta name="viewport" content="width=device-width, initial-scale=1.0">2 t! ?\" @! {# T( ^1 D8 g\" N- F% n
<link rel="stylesheet" >
K e7 A! L/ c ^& G7 J. a$ @
<title>vector examples Keyboard</title>( n# T4 c' z- S, Q7 I
</head>! ^8 N6 {1 g6 T& K2 T' b8 T( A h
<body>\" c8 A, V, A H/ p
<div id="keyboard"></div>
G# o& v2 }- ?# P4 W) S% a( S7 ~
0 [/ _9 I: f$ y5 E( x0 g
<script type="module" src="./temp.js"></script>3 d, a) V6 x0 w
</body>
& w% X$ R$ |: [
</html>' W$ U) V4 _3 A; G3 f

复制代码

import Interactive from "https://vectorjs.org/interactive.js";6 G; o5 [6 p3 T
console.log("Interactive", Interactive);
/ H, d3 S: p6 A) `6 c# ]- F9 j: U

复制代码

/**
M) J w! f: t\" _/ x. f ]- j
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard q0 `5 f x* w7 P2 N
* @description This interactive demonstrates how key board input can be used to add interactivity.
6 {9 T. B- P6 y# O# t( H
* @tags [input]
: ]; L' ?* ~3 E+ G: |1 X
*/
% Y& W& ~\" q! X8 T6 T) B
// import { Interactive, getScriptName } from "../../index.js";
# n! C% O* t$ Y) p9 j
// let interactive = new Interactive(getScriptName());
\" N7 a+ _7 j0 T% O
import Interactive from "https://vectorjs.org/interactive.js";
1 u9 N$ C; }# a& O
let interactive = new Interactive("keyboard");
$ @- t, }) G3 |' ?
interactive.width = 768;
6 x- B5 q% ^# Z- T1 }1 v
interactive.height = 300; r\" t- [ M& O5 e- M
interactive.border = true;
! F, z4 x% u6 v# O' u: a
let buffer = "";( b' |2 V( M9 H5 {+ ?9 t
let keys = [
9 T4 B# O1 c' p/ v+ t3 j# b8 _
[$ ^8 u/ P: r. E
"`",, ^\" V! Z `) Z% w; V2 |5 e! z. x
"1",\" r9 ]% d2 f$ @4 l+ C$ W$ x
"2",. T0 L+ v4 j& d\" ]0 `0 p( G
"3",
2 l8 M, x0 d# n7 x0 M
"4",: K( H+ R- Q+ w6 b* a$ P& x, X3 a
"5",% @) Q2 o* [( l# d2 l4 w
"6",+ @# ^! ~$ _; `( `! v/ e, @& r; t& w
"7",
' M; p5 G, A9 Y9 B8 q\" t
"8",
3 o5 Q# {& G% v: R: ^5 j
"9",
' U2 g+ b+ V Z; d. Y
"0",
) X( ^3 Y2 t6 a7 \' N2 y
"-",! ?- o# L# E! h# _ O
"=",4 W\" U+ k8 j% W/ _1 I. y+ @8 a
"Backspace",4 r; W; H. D9 [! Z$ y7 `
],\" {. i' S; g% f! _- `; |
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],- ^ D- s% s9 V' |. |% m0 Z
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
+ P$ A% Z2 o1 _( N/ M\" I$ R
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"], g& n\" F2 Y# u7 R; j% n! p
[6 x8 ]4 v1 Q1 D
"fn",: q1 ?) H7 ?% n+ `
"Control",
* e\" q8 E, ~1 ]' c4 M2 y
"Alt",
1 Y! v7 j\" |3 \\" l
"Meta",0 W6 G* @- }! D
" ",# G7 z' l/ i3 n
"Meta",0 T5 ~* V1 I$ ^9 b2 q- O7 Y- Z- W
"Alt",
4 I& Q1 x/ ?; Y$ q
"ArrowLeft",
: m. b# h* H- r* Y1 q& @: \/ w
"ArrowUp",! U. ^, \# ~! ~7 i7 _5 W
"ArrowDown",\" v0 w/ ?+ Y7 H. ^9 M
"ArrowRight",
3 M5 [; }2 l/ _' A, I
],
) _5 A& |1 k* h
];
8 w, P% ~1 k' A# O# ]
let buttons = [];* {1 Y6 g2 X* p) n; R4 a
let keycodes = {
; b\" L7 d1 R; ~' C
0: { Symbol: 0, Shift: ")" },; L+ I9 D# N- U! z& n0 A0 v% Q4 ^
1: { Symbol: 1, Shift: "!" },
& T+ d; _' Z\" W2 J: {0 L# v3 h
2: { Symbol: 2, Shift: "@" },* u+ J! d: W9 a! F% ]0 C
3: { Symbol: 3, Shift: "#" },
5 |( D* _' u/ p. ~0 R) K2 g
4: { Symbol: 4, Shift: "$" },
+ l V, A\" c5 o4 _# t
5: { Symbol: 5, Shift: "%" },& x1 }7 h% a- ?\" l
6: { Symbol: 6, Shift: "^" },; a. u- G% ~* s3 i0 E. D9 O5 D# }
7: { Symbol: 7, Shift: "&" },
8 s$ D& a6 N+ F3 }
8: { Symbol: 8, Shift: "*" },
5 L5 z5 a2 r+ e7 }$ N5 b6 l
9: { Symbol: 9, Shift: "(" },: ~( Z* p5 p# w$ ]2 V8 A% Z
a: { Symbol: "a", Shift: "A" },
6 l. u* q\" O\" m l [
b: { Symbol: "b", Shift: "B" },
+ }% ]) O( P3 p& l4 V
c: { Symbol: "c", Shift: "C" },8 b% b) l; s* ?8 m2 ]! t- ~- @7 J
d: { Symbol: "d", Shift: "D" },5 M( e& s8 ] p0 ~0 I9 C9 A4 u
e: { Symbol: "e", Shift: "E" },
* d) m! W2 e& H3 S: O. _, o
f: { Symbol: "f", Shift: "F" },
\" L/ |9 b; T, ]
g: { Symbol: "g", Shift: "G" },0 G8 t/ D8 R7 K w' a
h: { Symbol: "h", Shift: "H" },
6 T0 P7 m1 I% \! n; N. v8 q
i: { Symbol: "i", Shift: "I" },( X( i* k( n4 [
j: { Symbol: "j", Shift: "J" },
; K7 W- F5 o8 Z% G' ^
k: { Symbol: "k", Shift: "K" },
& F7 n4 U# G$ y' x3 ?
l: { Symbol: "l", Shift: "L" },7 i% ?3 h; r$ e* C2 G V( b3 W; U) M
m: { Symbol: "m", Shift: "M" },
6 f7 {! \2 [' g1 q+ V9 [$ n3 i, a
n: { Symbol: "n", Shift: "N" },: K3 t# s. r2 k: o; [% l\" `4 @
o: { Symbol: "o", Shift: "O" },+ t# h* u+ D7 ]* i
p: { Symbol: "p", Shift: "P" },
! }1 a5 e$ W; A3 b
q: { Symbol: "q", Shift: "Q" },
7 S5 p [/ h3 p' ~\" ^' t
r: { Symbol: "r", Shift: "R" },\" r7 F2 \0 Y9 N C
s: { Symbol: "s", Shift: "S" },' f: C0 P. Z+ R/ z+ j
t: { Symbol: "t", Shift: "T" },9 R0 X3 u+ _. L
u: { Symbol: "u", Shift: "U" },0 Y& b4 b/ B! p! x7 P3 y+ f* t
v: { Symbol: "v", Shift: "V" },7 w6 Q% o) N1 C) P, b) v
w: { Symbol: "w", Shift: "W" },
- |; _2 G! x( h0 N; v, l @! R
x: { Symbol: "x", Shift: "X" },
; h4 Y0 m\" J5 |1 C+ i8 E
y: { Symbol: "y", Shift: "Y" },
/ ^/ y, e' X. y1 O- l) j4 A* Y2 g
z: { Symbol: "z", Shift: "Z" },3 u& W: f% ?! }: _1 V
"`": { Symbol: "`", Shift: "~" },
4 B) t, H6 w' M8 [9 [ V9 e! u3 J
"-": { Symbol: "-", Shift: "_" },
7 d' ^# m4 E4 h ]+ T
"=": { Symbol: "=", Shift: "+" },
1 Q( ^2 l% o! w' d, a7 ]
";": { Symbol: ";", Shift: ":" },2 D# D7 M5 ~: y1 G4 m
"'": { Symbol: "'", Shift: '"' },1 I; Z( s% f0 w( H
"[": { Symbol: "[", Shift: "{" },
; b0 J+ X2 f. N/ j5 O- p8 v
"]": { Symbol: "]", Shift: "}" },5 C6 n. P1 v0 |1 M$ S+ ?9 X+ Y8 \! v a
"\\": { Symbol: "\\", Shift: "|" },
( v) Z; v/ l5 X
",": { Symbol: ",", Shift: "<" },
9 B. k! e& s: P1 `$ H# b( R\" i
".": { Symbol: ".", Shift: ">" },# L) ~/ f9 _4 {. F+ T2 m
"/": { Symbol: "/", Shift: "?" },
$ H) G5 ?$ r+ P
Backspace: { Symbol: "⌫", Shift: "" },\" h; \' |5 j0 z& f6 n
tab: { Symbol: " ", Shift: "" },
. w1 m- ?4 Z\" {
CapsLock: { Symbol: "⇪", Shift: "" },5 H _2 c o# `2 v* L1 @% S
Shift: { Symbol: "⇧", Shift: "" },
. Z3 }! F. u3 c% V4 L
Enter: { Symbol: "⏎", Shift: "" }, B% M/ ^% j) h& Y
Control: { Symbol: "⌃", Shift: "" },
) u2 i1 d7 ?: Q; E8 c
Alt: { Symbol: "Alt", Shift: "" },- z# N+ M1 Q, M W7 T
Meta: { Symbol: "⌘", Shift: "" },7 @) H6 _( Z# K9 a
ArrowLeft: { Symbol: "←", Shift: "" },5 y\" x/ [7 _* H* H0 I; F. t
ArrowUp: { Symbol: "↑", Shift: "" },
: c7 ^; Q. Y\" a8 o3 ^\" m
ArrowDown: { Symbol: "↓", Shift: "" },
# H2 d F% x( s2 q _9 W$ v
ArrowRight: { Symbol: "→", Shift: "" },
: ?\" S2 q9 B; @* ?) _8 n- J
" ": { Symbol: " ", Shift: "" },5 P\" v6 B3 K+ U% u) n r* G0 W
};1 n: n. `: b9 z, s4 `1 S
let buttonMap = new Map();
\" [/ i( A: }( Q5 w+ `
let height = 32;* h1 S- y: J4 U8 p5 M
let margin = 8;
! ], u' [' I0 |# e8 {
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
! a+ a, B, r: z1 f) E
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);& h: s- X) p! S& A
for (let row = 0; row < keys.length; row++) {5 C, @. m- L# m: M! W
let x = 32;+ |5 o7 S5 Q$ S# l9 k
let prev;
- {6 ?7 }7 E- |5 }7 X/ m
for (let i = 0; i < keys[row].length; i++) {
/ o3 c* j5 {: |' ]
let key = keys[row][i];
( c* x) h7 `8 q. @% Z0 t
let width = 32;
' N( t7 c\" ~ c u
let button;
, H# Y* i' d# p8 X5 F+ q\" X
switch (key) {. B* V2 _9 E6 a8 K6 i
case "CapsLock":! m$ i1 l/ E+ S3 @4 |
button = capslock;& N% o; Z* m6 ~2 Y
width = 64; B9 V\" Q% `) \6 o; P
break;
; {7 a\" N- h- o3 y6 a3 O8 i
case "Shift":
8 t# W) Y1 b6 h) \6 I\" O4 s
if (shift.x === 0) {
/ h) W; R$ o8 W$ ]
button = shift;
) _' A1 U- X( ~' x4 v! w
} else {
5 ]$ ~9 x$ Z% `9 j
button = interactive.button(
# C+ o$ r* w' i. e0 t: x\" d9 M
0,
5 r6 @' S, q Q$ K; O2 j% ^
0,! v\" G. l& v K& b9 f& ?
keycodes[key] != undefined ? keycodes[key].Symbol : key
; u1 E* B5 `5 y. a2 O) }# D
);. l7 |2 {$ G* H4 R: [8 N6 z- A8 X
}1 g0 g1 e, A, t% C% _
width = 90;
4 _% }. M8 U9 {, ~
break;
c9 T) u. a\" _6 ?\" R7 {; M
case "tab":% h1 {: G5 B! A
width = 50;: B- t3 R* ?; K: N
button = interactive.button(6 U: ?: M7 f$ b% O$ s. R( G) ~
0,
\" C! G0 u$ j# }# \5 {
0,
\" r- z: u8 z d& O
keycodes[key] != undefined ? keycodes[key].Symbol : key
1 L& g# x9 ~6 x o5 Z% B* k
);
6 h& B- _, P3 m3 p$ W
break;
8 |& g7 j2 N. t
case " ":
4 v. N! X: l( [0 K& n; w v
width = 176;
) |% o& v/ ?& |& j6 Y2 W
button = interactive.button(9 t\" X. I2 X3 X' I: R( I
0,
8 L. y5 L% w& V
0,
9 I& _5 R4 ]3 y0 T8 s- `
keycodes[key] != undefined ? keycodes[key].Symbol : key- I, A4 d7 A- o+ m6 z7 R\" |
);
3 C) J+ m+ o5 |/ A, e: D) p
break; ]( q4 M0 s% K9 T# G3 z
case "Meta":- V! b+ \0 v& Y) d; P) t! o' E; f4 t
width = 50;
. c: }. V8 ?9 v\" R# v' [+ C
button = interactive.button(- b+ L v+ c4 Z' C$ L% G6 Q0 |* n3 e
0,7 g, i$ D7 t! V% z6 m' ]
0,
0 Z, @\" Q\" h: a9 B, m2 C
keycodes[key] != undefined ? keycodes[key].Symbol : key; r+ k% b. }1 J3 e8 Q: A% m4 d
);
% T; U% i) G1 m( ]\" U+ Y
break;( \* S) g5 [. H- p) i$ ?. f0 p
default:, v( U2 a- o% z: V/ I
button = interactive.button(
0 X9 k8 R9 p7 `% b6 D1 v Z
0,, l' k z' Q+ [# Y, j$ M
0,4 w# b j9 R3 L! w
keycodes[key] != undefined ? keycodes[key].Symbol : key/ h9 E% y% c) M: ]/ H
);4 F) t$ [; I8 c5 \; Q% O
if (keycodes[key] != undefined) {
* v$ d9 Q# e5 I\" E# P; e6 V
if (keycodes[key].Shift != "") {( c: m- e& s( y( Q) @2 ^+ [
button.addDependency(shift, capslock);: j5 ^4 V9 B. y) H8 ^) \) `
button.update = () => {. _% ?9 q. c, d5 J
if (shift.active || capslock.active) {/ G# ?* r/ e E0 W# F
button.label.contents = keycodes[key].Shift;
4 v( r3 H9 _) |6 }7 y. x
} else {\" u\" V: T7 o% Z
button.label.contents = keycodes[key].Symbol;
$ g( @! z; E( J- L7 K, l- g6 A' H
}
! e, E! X$ n& D- ^! {+ ~4 z
};
3 s\" i0 O: O* S$ C$ O
}
\" \; M) T x\" ]' k$ P- p% r+ k
}- w& h6 {& f+ I\" P3 B6 c. X1 ?
}8 q% j* q% O# S& J
button.x = x;
9 e/ \ T& x5 Q9 D$ A) {
button.y = 64 + row * (height + margin);! D: V\" H. N- g9 |3 L5 s- M# N& M8 B/ [3 c
if (button.box.width < width) {
) g* N\" R$ C8 ~# L$ n8 I: x
button.box.width = width;
# W& V1 A% H& c- D; k7 Y
}) H2 {4 J4 X2 b\" J( ]
let bbox = button.root.getBBox();4 Y! v$ l3 J: p( ~) u
x += bbox.width + margin;
7 L+ ^% q5 a. Z, S9 k
buttons.push(button);
1 d\" g0 y( j; t; h: @
prev = button;# J- o( N# J1 V* n+ w+ k
buttonMap.set(key, button);
8 b7 r8 c6 u+ A\" K- e) b0 v( P
if (key === "ArrowUp") {( R/ m( O z$ r' L0 W
button.box.height = 16;
# b: k! W7 `\" w3 F
button.label.root.style.display = "none";. X5 J3 {$ ^6 x
} else if (key === "ArrowDown") {. G$ ]; P$ l2 T/ Z1 h
button.box.height = 16;
8 {& ~; z' `6 K\" ^8 N0 b% e
button.x -= 32 + margin;( @. O9 G2 k3 u: {7 x4 c) X
button.y += 16;
- L5 P8 {* c3 L/ Q/ K
button.label.root.style.display = "none";
: y. {% H( Y: Q% }5 M3 h
x -= bbox.width + margin;
6 F7 m$ [4 e2 k! X
}4 G, D4 M0 S. ^- {
}! {+ m3 q) _ W1 D
let right = prev.x;
6 Q: R9 `% H$ l
if (right < 630) {
+ ^! e3 v8 U$ [4 I C ]* ^3 \: A
prev.box.width = 630 - right;\" g4 U, _6 X1 Q7 l @8 V
}2 T\" q; N% S, Q: L
}$ X+ k1 ]9 e8 I6 C) a$ f
// console.log(keycodes["0"], shift, capslock);' w. ]$ S# i2 L) d& x4 v' F
let active = [];7 ^8 A0 N# E5 z& w, E/ l7 ~' m7 C
window.onkeydown = function (event) {
# G* c, @\" t' \! u3 ? @/ f
for (let i = 0; i < buttons.length; i++) {
7 e$ t: ~\" M1 r8 k5 Y
let button = buttons[i];
3 f9 @1 T) ?3 r8 |\" q+ D
if (
5 l W( [9 }. u4 F; |
button.label.contents === event.key ||7 a9 h# t. U1 U0 I
(keycodes[event.key] != undefined &&
; K, p' x8 r8 F+ ]) v0 Q7 H5 Z
button.label.contents === keycodes[event.key].Symbol)( X- [4 L. i2 v) ]* V8 i/ L
) {8 X6 {5 e7 D5 x! o& \/ {! B: Y
button.box.style.fill = "#f8f8f8";
, I9 i5 j/ W/ \; I; x* M
button.label.style.fill = "#404040";
/ E1 |3 R) i' C# Z2 J( g/ m$ O: ]
button.active = true;
4 K/ w! l6 ?- t: u
active.push(button);) c8 p2 D% }5 R
}' p- P2 g' D1 _' W- O. A; T1 |
}2 x* U9 ?$ t/ f8 ], i' E
buffer += `'${event.key}',`;
- a1 b4 |: ~' h: q7 k V
};9 I& I! i$ J* ?, r
window.onkeyup = function (event) {# u4 G, d7 N/ R4 y$ l' ^2 }3 o
let newActive = [];
( V! m8 t8 E( U$ k. n- `. d% r7 L4 w
for (let button of active) {- D$ F3 s1 ^4 R( o( Q$ r
if ( {+ u* C6 }, c\" G
button.label.contents === event.key ||( [& B- D( @7 e3 {2 Y
(keycodes[event.key] != undefined &&
. N( N# E6 ^7 |% @& T# u
button.label.contents === keycodes[event.key].Symbol)- x2 D9 U! R a5 I
) {
$ W$ D+ S7 I2 Z; ?- `. b8 u
button.box.style.fill = "";% \- s8 W\" n. I* U- X8 U) u+ g
button.label.style.fill = "";* N' y$ p4 X* N! o
button.active = false;
. K! }- V& N* M$ Y% ^& z/ O
} else {
5 l& o7 ~1 E1 S
newActive.push(button);, T9 z; }8 a) Z/ h; m) m6 w; i
}
$ _& j3 N9 B, x+ C9 `2 g9 R
}: B8 F& J' ^) n# b
active = newActive;
/ D. {% h+ A* o) v$ u
};
/ A% G# J( z5 W9 r, `4 x. M5 d
let bbox = interactive.input.root.getBBox();4 c U* S5 D# F& [/ X/ s
interactive.setViewBox(! G# M* y1 d3 r5 [
bbox.x - margin,9 s# I2 c% u; J% L1 T. b0 y
bbox.y,
. E& `1 j N. `' k8 ?
bbox.width + 2 * margin,
/ P P2 o6 c7 E/ M
bbox.height
( X U9 S! J: v2 Q9 m& e\" Z. c
);1 u4 L3 o1 y0 O/ F/ r
//# sourceMappingURL=keyboard.js.map
/ q+ d, H* l. U1 K& G/ b
* h% L3 ?8 X, v! `\" m. ]