使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1198 主题	4 听众	2977 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>1 A- f$ g1 G\" C3 ]7 R0 }1 r
<html lang="en">
3 ?* g/ p1 U; {# _1 v0 N& h$ x
<head>; ?' W3 d* t, X/ s: z
<meta charset="UTF-8">
3 d# Z' b# R2 ?- s4 e
<meta http-equiv="X-UA-Compatible" content="IE=edge">5 S d: |\" v8 @% w% z
<meta name="viewport" content="width=device-width, initial-scale=1.0">1 p1 K/ I9 ~1 {3 n$ z) t6 o) b
<link rel="stylesheet" >
- K. U$ }+ [5 m) W0 t0 W
<title>vector examples Keyboard</title>/ T: e# S( H r: r
</head>. [! w/ z1 R) R4 {
<body>
4 d# H, s$ T# G4 y
<div id="keyboard"></div>. D/ N' n& }5 t4 K4 b
- N. @- K, `8 c; {% h
<script type="module" src="./temp.js"></script>
0 }3 v+ {: B5 q
</body>\" Q3 y- J' m1 ~2 E* u
</html>% } S' \3 g$ f

复制代码

import Interactive from "https://vectorjs.org/interactive.js";4 o% L# y: c; m `8 c e- f
console.log("Interactive", Interactive);
+ y. e4 Q\" n9 I8 f7 r9 b

复制代码

/**
( [% X- Z- o: @* M# \) @' `
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
( ^1 T- h8 }3 n% m- S
* @description This interactive demonstrates how key board input can be used to add interactivity.0 Z$ C% m9 O! r3 X3 q; U0 K/ B
* @tags [input]! t6 S1 i8 P. F6 s1 l\" x
*/+ I. n \( d x& I O2 b
// import { Interactive, getScriptName } from "../../index.js";3 H( _! C' X6 D
// let interactive = new Interactive(getScriptName());/ N( G+ ?4 c7 k% {+ A, ]
import Interactive from "https://vectorjs.org/interactive.js";
! \. q& b7 j$ t
let interactive = new Interactive("keyboard");3 J s& \$ I. d% Y) n' g0 I
interactive.width = 768;
9 g( _4 D$ u/ K% B
interactive.height = 300;
% L7 A$ n\" v5 C\" Y0 ]
interactive.border = true;5 ?4 E& u I0 j& D* v* X$ ?, E. ?* }
let buffer = "";
' v$ G/ J/ h/ T/ g7 y: F
let keys = [4 w1 d, o: w: p5 x- I3 [
[
* o9 o6 S6 Q0 @% o6 o! ?
"`",
\" S' ?/ f! D. c K
"1",
8 M$ _4 l) j! t* }% B( q
"2",4 g9 H4 q& u9 M* M u
"3",. I2 s1 N# ^8 ^) n4 B
"4",
\" a7 L& m9 |+ I: \$ z9 V
"5",
4 e5 h1 S! Y' K Q
"6",' d( [* w0 t\" j8 A1 H8 Y& C+ o' |
"7",
* |! ~/ r\" X/ Y9 P5 i2 C
"8",& V+ X; d$ L! b4 @' ]
"9",' a) M; ?& F+ ^) K& u
"0",
- _! `0 D+ a4 D
"-",8 Y& a, Z% X3 T% X! G1 {% Y\" ^
"=",, E8 g7 e l! }0 r
"Backspace",
; e4 U- p! v0 O
],8 p1 ]0 X1 _5 Y\" H. V8 ^
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
: ?2 F+ A' @# ?
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
) V\" a! L9 |; P$ ^
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
# y# F/ K- ^* p, D/ {( a/ u
[# ?; ]4 H- E6 h/ b) `7 K
"fn",
' L1 F, v; D: T& z
"Control",7 z3 {/ j0 |0 r. |1 d
"Alt",\" |4 B# ^' {) I9 {2 O# {
"Meta", U6 z0 O, a! j# r
" ",
& ~. T+ v& R3 T
"Meta",. e\" L2 ]/ \\" L
"Alt",
* e# ] `2 b1 v( e% o
"ArrowLeft",5 V( G\" ]) }9 P3 f. z
"ArrowUp",
+ s6 m4 U J$ |7 Y% f7 K, q
"ArrowDown",
# [6 c: k- U- p, k
"ArrowRight",
' A: j0 s5 _! G6 E* B$ J+ a
],
`/ M4 n\" x0 A: a0 H7 G& W! x! [
];
) M& i1 s: |5 G( o0 r, [
let buttons = [];0 F& n$ q% a4 Z- A' l) h O& e
let keycodes = {, m2 q4 n& M$ ?* g/ S
0: { Symbol: 0, Shift: ")" },; y+ M8 o$ ?) {9 P$ a; a
1: { Symbol: 1, Shift: "!" },: s$ H0 Z/ }# ~7 ~6 l
2: { Symbol: 2, Shift: "@" },\" y4 C* x\" \$ f# A
3: { Symbol: 3, Shift: "#" },
4: { Symbol: 4, Shift: "$" },
\" l3 k6 p7 n1 H
5: { Symbol: 5, Shift: "%" },
* U( Q2 C3 N0 M
6: { Symbol: 6, Shift: "^" },
; m3 M) Y- V8 j
7: { Symbol: 7, Shift: "&" },
2 Q1 `( |6 w4 J, c4 v
8: { Symbol: 8, Shift: "*" },
% H6 ], r6 |+ |$ `! f V
9: { Symbol: 9, Shift: "(" },
3 Z, B* |+ I2 t+ U, p# A
a: { Symbol: "a", Shift: "A" },/ V+ c4 Y\" k7 \) {0 p! e
b: { Symbol: "b", Shift: "B" },
8 C- j0 q6 g: Q: Y9 X' ?. A2 H
c: { Symbol: "c", Shift: "C" },9 a# a y: D) Z/ e! u! U, n
d: { Symbol: "d", Shift: "D" },' E& D6 _; b# X
e: { Symbol: "e", Shift: "E" },
5 S% F8 G; Y; ]\" d8 f, ~
f: { Symbol: "f", Shift: "F" },
' {% m x3 ?! K\" q; ~
g: { Symbol: "g", Shift: "G" },
\" A% N8 N- M- s/ b/ o
h: { Symbol: "h", Shift: "H" },
( P+ L. V- _3 z: v/ P
i: { Symbol: "i", Shift: "I" },8 A! M( s9 l, H+ E3 Q2 k
j: { Symbol: "j", Shift: "J" },
5 ?8 ^/ d! o9 m |( w. u: u; x
k: { Symbol: "k", Shift: "K" },
3 [: d1 x2 G9 ?2 L. W3 o0 m
l: { Symbol: "l", Shift: "L" },4 D B: J0 Z; m7 l5 [
m: { Symbol: "m", Shift: "M" },7 e/ {; Z- f6 U- O4 o
n: { Symbol: "n", Shift: "N" },5 P2 i) ]0 g1 D% h* i( Y3 S& Z% G
o: { Symbol: "o", Shift: "O" },2 _\" N3 ]\" r5 G
p: { Symbol: "p", Shift: "P" },
! {& A; b$ z- |4 G9 o$ U3 E
q: { Symbol: "q", Shift: "Q" },2 J, X+ n4 z1 n
r: { Symbol: "r", Shift: "R" },
+ h6 Y( G5 f0 o$ J
s: { Symbol: "s", Shift: "S" },* j8 Z% l\" V, Q6 ]7 y
t: { Symbol: "t", Shift: "T" },
: ]0 H4 ^ o) M# _
u: { Symbol: "u", Shift: "U" },* H' Y, ^! o* S0 _ L3 R+ h* ^
v: { Symbol: "v", Shift: "V" },
\" q2 e2 @0 \- U0 I$ P8 x9 z
w: { Symbol: "w", Shift: "W" },5 J+ q\" B5 W) o# i1 {
x: { Symbol: "x", Shift: "X" },' z; v3 ~, N1 c. O
y: { Symbol: "y", Shift: "Y" },$ x) G8 Q a' D5 n2 \\" D
z: { Symbol: "z", Shift: "Z" },. Q) Q; T; m/ x\" l0 U# j4 B
"`": { Symbol: "`", Shift: "~" },
( ?% W* \8 G0 m. N1 u, \
"-": { Symbol: "-", Shift: "_" },
2 f7 c$ D9 a\" V/ K& ?% L7 ~# Q
"=": { Symbol: "=", Shift: "+" },
, z, o- z- h* d# u+ _
";": { Symbol: ";", Shift: ":" },6 ~+ x0 }' A9 @3 B0 X
"'": { Symbol: "'", Shift: '"' },# H7 o, L5 a. A
"[": { Symbol: "[", Shift: "{" },: `$ P% h- A! [; p9 p* N) e
"]": { Symbol: "]", Shift: "}" },
& a2 L4 k$ j5 d+ r% c, d
"\\": { Symbol: "\\", Shift: "|" },
* J& K+ A\" W, H3 ], T. Z
",": { Symbol: ",", Shift: "<" },
' Z4 U7 A9 d% e) Y# ]# R; H. D7 Y
".": { Symbol: ".", Shift: ">" },( B7 W+ a7 \5 P9 g* y+ W/ o- Q' O9 y
"/": { Symbol: "/", Shift: "?" },\" P# n& B( O6 e\" M/ `# Q
Backspace: { Symbol: "⌫", Shift: "" },( P4 D6 l0 P9 Z3 \, w- P/ D
tab: { Symbol: " ", Shift: "" },
3 g* S/ B4 f: N7 N' `
CapsLock: { Symbol: "⇪", Shift: "" },
. f) n/ s$ j$ S4 \
Shift: { Symbol: "⇧", Shift: "" },' y3 r I% }/ I ~- \% {0 U
Enter: { Symbol: "⏎", Shift: "" },
5 U& d! m% Q8 B* z c
Control: { Symbol: "⌃", Shift: "" },
, R# i+ L! p\" B; e. k
Alt: { Symbol: "Alt", Shift: "" },
6 |\" h% q# ], r: T. B/ X
Meta: { Symbol: "⌘", Shift: "" },
! Q$ Q& N. v9 Q5 D5 G& k
ArrowLeft: { Symbol: "←", Shift: "" },
$ c- Q' Y) f+ a2 ]5 _9 W& t
ArrowUp: { Symbol: "↑", Shift: "" },: d8 B0 H# ]' d3 t- [2 p/ j8 Q
ArrowDown: { Symbol: "↓", Shift: "" },' a( M }, M+ `6 W* R. j9 Z
ArrowRight: { Symbol: "→", Shift: "" },) Q9 k0 x r# @/ f# Y
" ": { Symbol: " ", Shift: "" },
4 S+ J; x: x* n. @7 b, O
};- x& z( |1 j* w2 j; W$ F
let buttonMap = new Map();0 a3 e+ S, T3 L) t! z/ B& [- l
let height = 32;
$ B! K9 ~* B. w% t' q
let margin = 8;4 v% E; N4 `! ~\" A2 \4 o5 a7 a7 J
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);' h8 l& |$ y) L5 g- y) ^: I7 l% F# N
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);3 u( J8 J! M7 q
for (let row = 0; row < keys.length; row++) {. M: B/ D% |\" u9 U/ e) H k
let x = 32;* n4 n; `& w2 s3 {
let prev;
( v2 ^3 v; }! d$ ]
for (let i = 0; i < keys[row].length; i++) {& a) X6 l: v, s8 \/ A3 H
let key = keys[row][i];2 x+ s0 Z, }: L3 M$ c/ q5 L& B
let width = 32;
# a; I; ?, N, L7 n( A) P% D
let button;2 j0 D+ H! G7 Y$ a
switch (key) {
% Q7 k7 F* V4 B( P& T6 g
case "CapsLock":
! a' x: ^. e$ N% o, H. t1 i
button = capslock;
7 \, [- i, ~& f) ]: T. _$ i' y' [
width = 64;
\" ^# |3 x% _; o\" l5 x* F
break;
. P0 v# D+ W$ i* C
case "Shift": v4 J8 K; F1 _2 C( C5 z# o
if (shift.x === 0) {' _, P* k$ X M( U0 h5 m* |
button = shift;/ a% R% }5 F$ a- H& W# f
} else {
# Z1 I+ n\" Z, H, Q5 L
button = interactive.button(
_3 B5 O, f( `+ d% A7 q
0,
# |/ i- K+ Y: ?4 N\" U9 {+ o* P
0,1 w9 d# b' b8 a6 P& Q! K, M, i
keycodes[key] != undefined ? keycodes[key].Symbol : key
' ^. S$ g2 T+ a6 E* H% e3 ]2 R
);/ h9 p5 f0 t/ @) [, T/ s& M$ L
}
5 m. }5 P- A0 A+ ?# J; E4 j
width = 90;4 G4 F$ H; K& j* X
break;
: i* O8 O9 { m0 i0 b5 Q Q$ e2 v
case "tab":2 M( [6 N$ _% X( T! Z0 U9 t
width = 50;0 l& F2 {$ L5 ^
button = interactive.button(
8 ^. Z/ f3 f) \& b; I1 T$ r
0,7 `- d3 c\" z' I6 R0 C* ^/ T7 [
0,, l! m\" }$ Y% g) J/ v\" j
keycodes[key] != undefined ? keycodes[key].Symbol : key/ R+ t7 c( {+ Z
);
: j4 P4 ?9 M! H& P
break;
\" o2 F5 D& `5 d\" i6 f3 d) ?
case " ":
, ~# P5 p5 a0 V5 p\" L+ T+ t9 s6 K
width = 176;# s\" h- F8 x4 H/ }' f: i
button = interactive.button(8 m7 K9 v( H7 o3 c& x
0,
8 q, p. T# t& {4 r
0,0 d `2 K& S) W- o3 Y0 S
keycodes[key] != undefined ? keycodes[key].Symbol : key- S/ r. U0 M% z5 m! V( X! \
);
4 H& Q4 f( ?4 q( X\" s
break;
3 |1 W7 E2 K3 T! Y
case "Meta":% Z$ F% h! s0 D; t% b3 f
width = 50;4 E8 T) k8 ]* u6 f% b2 _
button = interactive.button(
/ F0 E\" R5 B7 ~0 |: N
0,
- ?0 t4 P7 @1 R; N& f9 ^$ i! X3 M
0,9 f\" R7 v\" `6 ~9 N5 H
keycodes[key] != undefined ? keycodes[key].Symbol : key7 @/ I( b9 T* w9 P+ o. a6 {
);- t1 [( A \# m9 l6 l: k- N
break;
3 j4 S& u4 |4 w% y& t
default:' l$ Q7 v- l: `# j8 g: m\" \
button = interactive.button(/ v! E, e\" M( m$ |0 \
0,
) q0 \ d q0 ?9 m/ S W
0,: D& I# _8 \( @6 F1 D
keycodes[key] != undefined ? keycodes[key].Symbol : key
/ @; |. t+ t% H v# [2 r1 ^
);3 i, e5 l1 I% ~2 i
if (keycodes[key] != undefined) {, _9 r# S1 u, u$ W
if (keycodes[key].Shift != "") { ^' ^8 M+ Y* m
button.addDependency(shift, capslock);
- F* s0 w* ^4 W. x$ s: \
button.update = () => {
: Q7 _* a! G# I% u0 a1 z$ t
if (shift.active || capslock.active) {
, f5 o' G5 h# d3 {- D/ g: B
button.label.contents = keycodes[key].Shift;
. d3 J' E% j6 \1 U. [7 |9 l
} else {
, E$ x: |& ]5 ]& S$ E
button.label.contents = keycodes[key].Symbol;& K$ C& [4 v: Q+ p6 e6 y, q
}
0 A- S% w5 B, o4 ?0 i0 p
};% ~0 L$ G6 Z9 d( A* _. b( Q: d
}
, \8 k1 P& I: |& f
}1 c; {. G! k) W8 x4 Z3 h/ X
}* Y/ ~7 k# b! I. B2 C! U2 d) W
button.x = x;
% X; L$ I Z. o- K1 J
button.y = 64 + row * (height + margin);
/ ]; X: E; X t1 @1 `7 ?
if (button.box.width < width) {
' x/ T, X6 |+ X
button.box.width = width;) r: M4 E% k* u/ Y
}. P9 P# H$ ]: o) G, [1 @, N
let bbox = button.root.getBBox();% B8 e i$ m5 [/ r
x += bbox.width + margin;1 r! }2 e* j( k0 }8 X
buttons.push(button);
/ z( n9 E) F) E$ z7 r! |1 ]* F; f
prev = button;, @! _% A. U( s
buttonMap.set(key, button);+ @1 T' E8 U; y0 s( \
if (key === "ArrowUp") {
5 i5 ~) O+ K% `7 O* Y\" |) [ C
button.box.height = 16;
' t, o1 s# a3 n* ?
button.label.root.style.display = "none";/ O4 C* ^4 e: l5 z$ h8 C {
} else if (key === "ArrowDown") {
; k, N% y& U# t& }: ^: _% m' l
button.box.height = 16;\" P$ A! C& V _1 M$ b; [9 W
button.x -= 32 + margin;7 p' [( i' {* L! C K
button.y += 16;1 U0 c8 y) y; K* A/ P
button.label.root.style.display = "none";
5 ^\" a1 t2 B3 b: k\" p\" D
x -= bbox.width + margin;
\" M) U. s& }) `$ M8 N3 [# s% `
}\" h0 |) H& O4 J* [
}
; S4 Y$ h+ E( B6 Q
let right = prev.x;
7 Z& w3 j$ `\" V2 z\" B, `1 o
if (right < 630) {
. M2 G4 l2 l B- `- s
prev.box.width = 630 - right;
0 `0 j- v' x; \, |
}
$ }2 C- Q8 V k6 m9 y/ ~0 {
}% ]! |& A- E9 U- ~ f, d
// console.log(keycodes["0"], shift, capslock);. }, l+ ?$ m: U' R\" @
let active = [];
: `& r$ _; h. G+ X6 c; R- R( a$ d
window.onkeydown = function (event) {$ K& d' q- M3 C0 M2 k
for (let i = 0; i < buttons.length; i++) {* N; J\" \6 A* R( C# c2 X( m
let button = buttons[i];. B, |1 ~) R, `
if (5 n3 B+ t: X- l' ^* N0 @. z
button.label.contents === event.key ||! w _- B+ s& m- C2 k
(keycodes[event.key] != undefined &&
* P5 f\" ~ d5 e3 a
button.label.contents === keycodes[event.key].Symbol)
) q/ X* B! c2 i) {3 d/ j
) {
$ M) w9 h6 k& `\" f' X1 X
button.box.style.fill = "#f8f8f8";
% g- _3 x1 d2 }+ L! E q
button.label.style.fill = "#404040";
- o0 D$ Y6 w3 D$ a9 N/ p- o
button.active = true;/ s0 U! a9 _3 b+ I O
active.push(button);\" p' M7 ]7 T6 C9 v$ O+ U- a
}! C4 S0 \* d5 A2 R1 z
}+ {5 w# S0 N9 r* X' V3 w$ A+ a
buffer += `'${event.key}',`;, I\" s* M3 v$ m6 A\" P7 M! l
};
: A\" a: A3 C! y# c. y
window.onkeyup = function (event) {; N\" W1 M7 s7 g: K; d5 Z
let newActive = [];
4 W: I7 [0 ~6 [
for (let button of active) { {7 H' p; {: \4 A2 b$ M/ X& s
if (
- _7 s# R* e. ~$ \+ t- n- f, O
button.label.contents === event.key ||
& V4 ~* i. D3 z' Q0 m- T& L: ]
(keycodes[event.key] != undefined &&
/ t% E: i\" E/ i% r6 J
button.label.contents === keycodes[event.key].Symbol)
. U- A7 ? U\" q& B
) {# X* F( g% \4 b4 v& U6 Q! O
button.box.style.fill = "";
! ?, ~1 b; `. D0 m W* q {
button.label.style.fill = "";% m6 s- J# V. a4 j+ ]8 z
button.active = false;3 o! y+ Y% _- B2 g8 X# _: j3 ?
} else {: C& G1 s: ^: H' F. ~
newActive.push(button);
# V( U( ?1 H! A e2 @- L
}
# D; ^7 Y+ _! B' m* e
}# H7 D7 e$ C3 j) y) F
active = newActive;
8 O( C* |7 Y! f9 p2 U* v3 ~( u
};
& h0 H& V. v- f) j
let bbox = interactive.input.root.getBBox();
3 Z2 H5 W; f. }0 T6 a\" }9 @' _& m# s
interactive.setViewBox(
# x0 r& J$ Q8 J$ b& @$ x+ @
bbox.x - margin,/ t ^5 q1 \, b' i; j, `) W2 T
bbox.y,5 \; o0 z\" W+ P
bbox.width + 2 * margin,& O4 _$ O) ?/ Q5 s
bbox.height
6 W1 Z\" G3 n1 N5 Q O3 I( \% |
);7 w; _; {1 `, h; T/ _
//# sourceMappingURL=keyboard.js.map9 I- y. m- Q4 N\" k
6 q, W\" W) j3 s$ w