使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1198 主题	4 听众	2977 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
+ n; H% [5 V8 S
<html lang="en">
6 q) y# E; {: [, ? A
<head>
\0 n* {1 n0 q4 Y
<meta charset="UTF-8">) k8 S, s/ a$ z, s\" H
<meta http-equiv="X-UA-Compatible" content="IE=edge">
. u; F$ n0 |# `- H* @4 y' X
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- B4 Z l( T/ p! V) N# e
<link rel="stylesheet" >
- m* N2 @# {' L, r4 X\" E! W7 B
<title>vector examples Keyboard</title>
) [7 M3 f9 ^! G- R9 a0 u M1 Q, D
</head># A4 L1 D/ }, }
<body>
; T; |4 I: [. H8 f: X% ~/ @
<div id="keyboard"></div>+ x$ k4 U5 i0 L0 t J; g
a\" S8 {& W# N6 n2 f
<script type="module" src="./temp.js"></script>' y- R* w% ~4 r
</body>
$ J0 C ]# J0 D9 S! y# M* E5 [
</html>) E3 y1 R: X: ?% ]. ^+ L9 H\" ^

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
$ `, o A4 B8 Q0 Y4 |; r! p% N% e
console.log("Interactive", Interactive);# K, O, o9 o6 R6 a

复制代码

/**
) d3 k% e! r* A/ p# @\" s
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard! b+ N# {/ L6 [/ {
* @description This interactive demonstrates how key board input can be used to add interactivity.
# l1 p/ W5 J$ T$ s1 a; D, |; G
* @tags [input]& [3 c8 t4 G3 W9 |6 B) ?4 H4 q
*/( e, R+ O+ K6 q, u
// import { Interactive, getScriptName } from "../../index.js";
4 B! |' t( H: ~# \+ R\" d9 X- s! c0 h
// let interactive = new Interactive(getScriptName());
1 {& C0 M& ?( b6 |
import Interactive from "https://vectorjs.org/interactive.js";+ d7 Y- p' u* x' [
let interactive = new Interactive("keyboard");0 N2 d9 g9 s* P
interactive.width = 768;
& T& g* f6 D: c( A0 r
interactive.height = 300;
3 y% B/ F( j3 D9 J$ U
interactive.border = true;
. n& m& {, i\" d# K( l/ X0 H5 y
let buffer = "";
. E/ U9 g% k! _# W3 ?2 |5 y; |1 Y
let keys = [
% s) p! i! o. M, p# i7 w\" Q
[1 p' G; {& C$ m4 c
"`",
2 n8 U6 L\" M. b
"1",
, I+ F5 Q+ E2 M& Q% P\" D7 d\" n
"2",( W7 M3 ?. H5 _( Y; i+ T
"3",
3 p9 {3 n5 L& Z: f! f
"4",- G E; i\" T! M }
"5",
2 W8 O3 r& R% G) T% J9 Z\" n/ T. `
"6",. i2 P8 B2 l$ x
"7",' `8 l% s+ F$ f% e; H# j- h
"8",
/ z! T& v) P! A% C1 O
"9",
1 ?- R/ Q& T# E
"0",$ ]! f+ }. ?5 {% M6 f
"-",8 [. H9 O: c3 M) _8 q+ D
"=",; X# k4 o# x# r. E& E- ^9 K& p! d/ {0 e
"Backspace",4 T6 F S2 U6 N; c
],
y) j9 O* k% m8 b1 W; t\" T5 y
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"], }% e% y: a6 q/ }8 K
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
: v( z, {$ v8 N' S4 M' v# g2 Q9 }
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],\" h1 N9 I2 e- X, h
[
3 n7 @( w' m$ B* M8 M
"fn",
; j2 Y. R9 }' Z0 u& l
"Control",
2 W6 F k8 C O3 z\" Y, c
"Alt",
- [. g% `5 S/ C
"Meta",
$ k5 S% l: b- c1 B
" ",7 u0 r. }4 l8 L. f; l
"Meta",( Y1 ~+ K+ l4 m
"Alt",
! {4 W$ f2 G, R# V* f; N) k1 Z
"ArrowLeft",
- F. O$ y4 @5 h# C- t
"ArrowUp",
# \2 y6 {/ ~( z# \
"ArrowDown",
# ]5 i3 C' ^4 H* f8 M0 G; H
"ArrowRight",
. u4 t& z8 @+ T0 O# _
],
+ v k) }& P4 ^3 N# E
];5 m5 }! D5 G& [+ D2 L4 \
let buttons = [];, r* p% C+ U/ N1 b! `1 ]1 P% a! w B- v
let keycodes = {4 t% x4 F; h) }3 R% @
0: { Symbol: 0, Shift: ")" },
; B! ~' Z- \6 x* v% E' V
1: { Symbol: 1, Shift: "!" },
& h* C, c* i! w7 I' {5 B5 j/ L
2: { Symbol: 2, Shift: "@" },) W/ K2 q- {) \( D
3: { Symbol: 3, Shift: "#" },4 A* f: L# U4 D
4: { Symbol: 4, Shift: "$" },
' n& f5 ?) z$ w5 r; m- H
5: { Symbol: 5, Shift: "%" },4 a2 I! Q9 o k
6: { Symbol: 6, Shift: "^" },% O- u* y& G4 @
7: { Symbol: 7, Shift: "&" },' A3 f; V8 J6 Q, K( D& N9 S
8: { Symbol: 8, Shift: "*" },6 ?1 o8 n7 a. W
9: { Symbol: 9, Shift: "(" },$ b! a, N. J, H' C0 l0 U
a: { Symbol: "a", Shift: "A" },
2 t' o5 j# x) n
b: { Symbol: "b", Shift: "B" },$ l6 V6 }& {5 W
c: { Symbol: "c", Shift: "C" },; s8 Q! }' E: W; S
d: { Symbol: "d", Shift: "D" },
. o: T7 f# l) e2 w. D8 d; N
e: { Symbol: "e", Shift: "E" },1 N c5 U\" z: v
f: { Symbol: "f", Shift: "F" },1 ^' i( N3 H) q. R8 L' j' Y, h
g: { Symbol: "g", Shift: "G" },
7 l6 w+ Y5 B9 o' a, O7 ]
h: { Symbol: "h", Shift: "H" },0 _ G! u9 e7 I$ Z
i: { Symbol: "i", Shift: "I" },; f& H% B9 `0 c; v1 f
j: { Symbol: "j", Shift: "J" },6 d/ B2 i/ k. {
k: { Symbol: "k", Shift: "K" },+ L4 K6 t5 Z' z( `; W\" n
l: { Symbol: "l", Shift: "L" },
m: { Symbol: "m", Shift: "M" },. A+ v! a2 z3 O% Y* h2 P
n: { Symbol: "n", Shift: "N" },
h7 \\" g8 m4 F5 q# U
o: { Symbol: "o", Shift: "O" },$ }4 [- L# i5 K0 w4 A
p: { Symbol: "p", Shift: "P" },
\" m( q. j\" E; L$ _$ t
q: { Symbol: "q", Shift: "Q" },3 J\" r\" g+ J* W4 N
r: { Symbol: "r", Shift: "R" },
9 ?\" i$ h: Q* L* p
s: { Symbol: "s", Shift: "S" },. C. Y) a. H: Q- p( P, ?
t: { Symbol: "t", Shift: "T" },7 n9 E\" t& I9 {5 Z
u: { Symbol: "u", Shift: "U" },* Y! F! ^) d1 ~0 I. p\" w
v: { Symbol: "v", Shift: "V" },9 F, R7 p+ Y* i
w: { Symbol: "w", Shift: "W" },
( Z! c; v; k( j9 V& w! p
x: { Symbol: "x", Shift: "X" },, `' q- i& |* y1 l5 T2 f- q
y: { Symbol: "y", Shift: "Y" },. H. X( b& B\" B) _
z: { Symbol: "z", Shift: "Z" },
0 o9 z( z( t. s* i. n( D
"`": { Symbol: "`", Shift: "~" },
2 U, J, @4 y/ d. S1 ~; q( R
"-": { Symbol: "-", Shift: "_" },7 M6 ?1 c5 a3 R5 t3 ?5 w- F
"=": { Symbol: "=", Shift: "+" },
, Z3 \1 ~( |2 ^5 K R: ?6 J
";": { Symbol: ";", Shift: ":" },4 {3 |3 r; A, K2 s+ a4 V$ W
"'": { Symbol: "'", Shift: '"' },
6 B' Z, T$ f% }6 a
"[": { Symbol: "[", Shift: "{" },1 L# L% g, j% C* Z/ @) R' g
"]": { Symbol: "]", Shift: "}" },
& `) o% z1 D& N; U; H$ l o
"\\": { Symbol: "\\", Shift: "|" },
' o$ C; k9 n, b2 U
",": { Symbol: ",", Shift: "<" },
\" u1 K) b+ V, f( m4 a. T
".": { Symbol: ".", Shift: ">" },
$ b2 I+ q0 f+ G1 _4 c( ^0 I
"/": { Symbol: "/", Shift: "?" },
+ y! n% B$ ]7 V' _\" y$ I
Backspace: { Symbol: "⌫", Shift: "" },# y4 z0 D\" Q( q\" B
tab: { Symbol: " ", Shift: "" },
) c- ]9 V# A ~$ y/ W, r+ y! P
CapsLock: { Symbol: "⇪", Shift: "" },
* I5 M\" ^5 p! U! Q* }* ^ J
Shift: { Symbol: "⇧", Shift: "" },
# M9 k6 x! N7 t+ f/ P
Enter: { Symbol: "⏎", Shift: "" },4 E3 H( b+ v2 I* R) u$ @$ M
Control: { Symbol: "⌃", Shift: "" },+ v. d6 {4 d1 a2 S6 S
Alt: { Symbol: "Alt", Shift: "" },0 j0 h% S( ]8 e0 z4 f& n+ x\" g
Meta: { Symbol: "⌘", Shift: "" },
, D. Z8 D+ L% z! }5 i+ d
ArrowLeft: { Symbol: "←", Shift: "" },
; u\" W! C* C. l9 w- T
ArrowUp: { Symbol: "↑", Shift: "" },' S\" A3 J4 g) Y+ s$ O
ArrowDown: { Symbol: "↓", Shift: "" },
/ ?( O) E% m( u8 E, t
ArrowRight: { Symbol: "→", Shift: "" },
) E+ ? Z: \# {& k/ d
" ": { Symbol: " ", Shift: "" },( @7 q9 p\" \! z
};
! D; i* }# F0 J
let buttonMap = new Map();
0 g+ A% ?4 Q4 O
let height = 32;
' U: W K& N4 t! I! O/ \
let margin = 8;
9 f& r+ o, ?5 P\" ]1 Q7 q1 {6 ?
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
\" Y& C% m) j3 a5 V
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);* o3 L\" z- V# |! f# f# k0 k2 x
for (let row = 0; row < keys.length; row++) {
0 d) A* R' I5 F
let x = 32;
: ^6 Q* r. l7 Y H- n
let prev;8 R$ u2 P2 G$ T5 w\" u2 X5 w% M5 J
for (let i = 0; i < keys[row].length; i++) {9 L0 W; [ u- }4 i; s4 ?( x
let key = keys[row][i];
2 j8 K4 X( H7 P, v
let width = 32;& c2 x b: k' r8 [4 u2 U
let button;
# ]5 M4 t* e% L% s3 F
switch (key) {7 y* D+ W$ @9 \- s5 t8 ~
case "CapsLock":0 B$ Z; o& z; d. I
button = capslock;
' l: a8 \\" A6 g4 p n
width = 64;0 b' E6 \% `; L1 j3 Y
break;! B8 l7 z- |3 O\" f' y$ ]' u T# m
case "Shift":8 R& H' t7 H' q: K5 f6 H
if (shift.x === 0) {
: L5 f6 e4 E) W/ a' F, m1 u
button = shift;; U5 ^3 W# n7 l, @/ c' t* n+ E
} else {
/ M3 \ e3 n% ?/ Z2 h
button = interactive.button(
: u1 P7 m7 f0 R5 d; u\" t8 V
0,
% E$ e+ B* A5 Y6 j0 c. T, ^5 L
0,
4 ]: g) P& p6 N
keycodes[key] != undefined ? keycodes[key].Symbol : key
/ ^$ r- Z, i; L4 n, ~4 J: i
);
' l5 _/ t' B' h! s
}4 a2 f* r# z( f: u# x
width = 90;
) a0 f0 r0 q# u\" ?$ D
break;+ `! }1 ~0 W- Y\" l7 n x
case "tab":7 w1 t1 W' X( _. Q' Z& h4 M! Z
width = 50;2 C\" B) D/ U% n: x
button = interactive.button(\" I5 C5 u9 V t/ k2 k) R
0,
/ n9 \) Z7 q; i( x% y y
0, {% b+ _' |- p7 \9 n8 r
keycodes[key] != undefined ? keycodes[key].Symbol : key
\" n$ J/ U( S$ o& S' u0 _4 v. O
);5 S\" X. h. C# X x\" ^, i4 D
break;
/ k! Z: _2 s3 T) e6 i) z+ Z
case " ":7 h5 Z3 N. E0 x0 d, I$ o7 K) k; R9 E
width = 176;
+ K' `0 Y3 @( x: o
button = interactive.button(
: r% s\" w3 d: H& b n& |0 N
0,
6 f1 |: `, S) r* |/ n; d7 Y
0,$ s. N' `! S; F! D
keycodes[key] != undefined ? keycodes[key].Symbol : key
c. B& E; y- M9 H' \# h
);6 R5 n* X) d: J! h
break;\" r3 D2 A0 k0 ~
case "Meta":4 g9 B7 R& p& Y) b- X5 o5 t6 k5 J7 V y
width = 50;8 B+ l( A6 {, Y. Y2 ?
button = interactive.button(
5 H\" f4 Q. c\" n! g Z- C2 C- c8 I
0,\" r: f, G1 }* j. ~
0,
- c6 z4 }: ^/ W! I i
keycodes[key] != undefined ? keycodes[key].Symbol : key# {6 u. ?& C\" d
);4 q9 R! E/ C/ k* Z8 Z, P9 a
break;4 G e& L4 @& ^# y
default:3 b\" Z5 |$ k5 G
button = interactive.button(
4 q8 l' D* `8 o A2 K. E' r
0,
+ W C\" `! m& Q0 L# T) i9 F
0,9 a. d4 S# X( h$ ~2 j
keycodes[key] != undefined ? keycodes[key].Symbol : key
! r; x f4 P- Z. O
);$ `2 S' R3 u' I9 O# M' n c
if (keycodes[key] != undefined) {
. X/ a( h) W5 z\" ~% [ D
if (keycodes[key].Shift != "") {0 p7 h/ Q2 M$ C& N
button.addDependency(shift, capslock);6 B# M\" Y7 B( z3 E& a# B9 H
button.update = () => {
) {; p& ]; |! G8 U
if (shift.active || capslock.active) {
! _3 v, e3 K8 Y, U D
button.label.contents = keycodes[key].Shift;
0 W1 F6 r7 v/ `2 m
} else {
6 x# `3 G\" \\" M# d8 q* D
button.label.contents = keycodes[key].Symbol;- e, @9 H8 ?5 }; J& ~& C
}
( [2 ?& p+ |5 i& T- d
};& K, v3 n7 P8 [. Y& H8 F
}
6 b8 ^9 U. ]8 W2 n& s
}. c- ]0 [' Q0 g
}9 k! Z1 X1 J7 D6 U/ W! X\" V
button.x = x;
! F% S6 W% U' E& @1 s; C
button.y = 64 + row * (height + margin);' U3 ~6 [# ]' ^* O& S2 \\" G$ }
if (button.box.width < width) {8 N/ k2 S, {7 ?1 h/ Z5 C1 q( M
button.box.width = width;/ U, M2 l; G- Z$ w
}
' \9 A1 O* H2 G
let bbox = button.root.getBBox();
: y. F1 k4 F% J( b: L
x += bbox.width + margin;
; b; o; Z8 j1 O
buttons.push(button);7 ~; R; P; @/ z0 [) r
prev = button;
4 c) l1 h: @+ K$ T; s5 g* Q. X
buttonMap.set(key, button);
8 V# R' B0 b- U l
if (key === "ArrowUp") {) v\" b$ U3 T7 n) N$ L1 k
button.box.height = 16;/ X* k0 d0 U/ _\" U8 u
button.label.root.style.display = "none";
\" D7 o' R6 ^& X9 U! ]. h$ H0 z
} else if (key === "ArrowDown") {+ n' k2 b. C9 N8 T9 B
button.box.height = 16;
6 }4 o6 |2 s' Z |
button.x -= 32 + margin;
e) S9 N7 }4 b$ P! E/ z
button.y += 16;* @. h. q9 l; {/ c
button.label.root.style.display = "none";$ w& s, D# B: Q\" ]$ F1 s
x -= bbox.width + margin;
' E. E* T: ]' i {( v5 }, `/ e
}
9 T$ O9 _# ~ }5 s6 j
}
- P4 S# y/ K7 O( p0 ~- r7 A$ z
let right = prev.x;& F7 W% d2 r( ]1 g$ {
if (right < 630) {
9 I3 G% _( Q$ L) a/ _6 r3 G
prev.box.width = 630 - right;3 P7 p# R1 |6 z2 U* r\" E
}% {& k* G3 e7 _: n
}% b* j8 w# }& Z% ?& H# u E; W
// console.log(keycodes["0"], shift, capslock);
- v5 ^- o) Y2 S0 C
let active = [];
window.onkeydown = function (event) {4 X* E( r) L5 p$ b1 c
for (let i = 0; i < buttons.length; i++) {; v$ y4 _8 g( b n* O4 k8 V6 n# S
let button = buttons[i];
% g+ n6 A2 ~2 a- [* g/ W
if (
; ~- i% s) j: c* Y* e
button.label.contents === event.key ||\" ^$ \: ^; h\" ^6 q% r
(keycodes[event.key] != undefined &&9 o2 z8 s6 T+ I
button.label.contents === keycodes[event.key].Symbol)
. i3 M# P5 d1 R$ {. t
) {
' T6 A: }9 l3 w& `
button.box.style.fill = "#f8f8f8";
9 x/ T6 N: y0 p( r7 T
button.label.style.fill = "#404040";, A0 r- q. f1 {/ z0 f
button.active = true;& N3 `; y( L2 l, \\" u$ M' o\" n
active.push(button);; L7 Y- ~' t( H2 y\" A
}) ], z9 @7 Q* x: h: r
}) k8 ^% v5 R' s7 }% I
buffer += `'${event.key}',`;
' x\" T- [' E3 H* Q
};- G6 @3 B\" p$ x( F, f5 u6 X% g
window.onkeyup = function (event) {, p+ \$ g9 Q7 @; [- b( y
let newActive = [];
F& G- z$ w! O\" d9 O
for (let button of active) {% @3 e4 S0 D! N
if (
6 ~& A+ u E4 \, H5 F8 N& e
button.label.contents === event.key || ~0 S5 r# \! A& I* D9 s
(keycodes[event.key] != undefined &&: ~, w8 O2 S p6 e5 v* y# O1 d4 m
button.label.contents === keycodes[event.key].Symbol)
: T$ \! L5 X* ?9 j
) {
* W' Z3 A% S4 O' c; y3 l j
button.box.style.fill = "";0 d5 G1 V3 O. Y) \/ k- B a
button.label.style.fill = "";4 Q7 A\" V1 j\" A$ d3 f/ ~1 {
button.active = false;- g. k. b& \ P/ w6 G, {0 Y X
} else {6 z. U$ d; O5 w8 h' o, Z/ p
newActive.push(button);1 k0 k! M% O2 j% s. K
}
) K% m. G8 u. p# h$ |4 h2 j
}6 T% L4 N) r0 z L
active = newActive;
T4 E% Y# k9 c6 j
};& R ~5 f, `& W/ x# L
let bbox = interactive.input.root.getBBox();9 Y! a; K' H# G
interactive.setViewBox(
) E' [8 Q2 w4 g1 ]. z
bbox.x - margin,$ j, h$ t7 l0 q/ Y4 D) X8 [
bbox.y,4 s0 M) M h9 W$ ?( l4 s+ N
bbox.width + 2 * margin,
; _; U) z+ G$ ~, b5 o, I% w
bbox.height
6 J- a5 r I& q\" X( k
);
; b, [5 s4 k( K, d/ V\" i
//# sourceMappingURL=keyboard.js.map
: G1 H8 n- Y! c# q: b8 o
\" e$ {8 B+ l, e2 o