使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
\" A( l; d2 H }' B2 j
<html lang="en">
3 q$ ]; }, H3 @& V4 a\" C
<head>6 K3 A: v; p8 T6 F
<meta charset="UTF-8">! j: J% W4 i' k' k5 S# t
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+ T: x' E. W4 f! @4 F
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2 g/ \$ C9 c2 y! U3 Q& H
<link rel="stylesheet" >6 e' g. Y E; ?0 X\" |
<title>vector examples Keyboard</title>9 b0 d: |. O, ~5 [
</head>
0 A; b& [/ ~. r6 F' ]# H' s- O$ t- Z
<body>
' V: l, G6 W: G; l5 j\" J% k( s
<div id="keyboard"></div>0 G0 B9 i5 q' a
\" M5 E/ p0 U! E. m8 j3 e, Q* O
<script type="module" src="./temp.js"></script>
# t$ V# _0 z4 W D( K7 d+ i% m
</body>
, I; ^( y$ R- _
</html>\" r5 G# m2 [; q) s# Y) A

复制代码

import Interactive from "https://vectorjs.org/interactive.js";( [6 @! X. i: s0 {7 C
console.log("Interactive", Interactive);. q! i7 Z7 j0 ?6 ^

复制代码

/**
0 o9 ~+ L% P2 r' Y/ m0 d8 }8 @
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard; q x4 M3 @. L5 T
* @description This interactive demonstrates how key board input can be used to add interactivity.
0 J: p$ G/ E1 \
* @tags [input]\" P* V( g+ {: @9 r* f6 |
*/4 l! t2 x- |7 R7 N K' ], [
// import { Interactive, getScriptName } from "../../index.js";, J0 E1 K, t8 h l7 W m2 T
// let interactive = new Interactive(getScriptName());
( p! {+ m4 n# {6 @
import Interactive from "https://vectorjs.org/interactive.js";/ A4 y. d+ r Q( _
let interactive = new Interactive("keyboard");
% P\" y! S2 G& h2 ~1 V
interactive.width = 768;$ u$ G! e3 U( {- J- ~! K) W- i
interactive.height = 300;2 K0 R1 x2 ^& l* k& {
interactive.border = true; U1 _; u5 L- E5 g, v
let buffer = "";
% l3 ?0 ?2 [' u# z+ F* P
let keys = [* N! |3 a6 A0 z3 {7 m+ j
[
4 j& o% K/ z7 z# k# y
"`",
& h! i. y) o5 Y5 N p2 ]9 V0 _4 \
"1",
[6 B% C: F2 ^! C/ |7 x
"2",
: U7 D6 J+ m) W# C\" |
"3",* i( L. z4 ]+ u; s9 U8 `7 M
"4",+ s; F\" A4 s% U\" ]7 `
"5",\" W8 \' k* U9 Q
"6",, X+ f3 R2 E$ m1 A6 B9 N8 j% X
"7",
% b H* }0 L6 t1 J0 U
"8",
; c\" [ ^8 T8 R2 {( q
"9",& s( `' J( x- o2 S# F0 Y: Y0 X1 \
"0",
( ]% r/ e. ]; _: @9 t\" v( y
"-",
- L# L4 C: }1 ^9 \# M+ X
"=",
& }7 I5 V6 S* \2 S/ R5 A: D8 e
"Backspace",* z L3 e0 A4 D; m8 }
],2 k. d2 A+ G5 N+ s H0 A
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
3 x2 Z* a3 H& f; K0 s V1 m) v
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],8 E, X. t- \5 Z; ?! j
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],2 F\" g. O V( p3 p7 E# M
[
! h2 o3 y8 t6 R5 }4 G
"fn",
3 a# y\" r' K$ f4 V' t {- L7 I8 g
"Control",
2 L5 v2 r$ Q* R, H
"Alt",
. z# j\" |6 j5 w2 |
"Meta",8 T0 S- O: d2 |0 P e+ J, b\" v
" ",, e. G& o5 _3 }- f
"Meta",2 J$ e$ [) L0 c; P
"Alt",
5 N# `+ O: N( Y2 D, E# T Q8 ^. y3 Q
"ArrowLeft",
$ `* q, i6 f, t: t/ @% I+ [
"ArrowUp",
) u! S' Z$ c6 H& {% T; z9 K
"ArrowDown",
; m, A; d& ?: w, ~# |
"ArrowRight",6 h2 f; k4 v7 \
],. f/ |/ v' T( r3 z
];
4 m/ n; f9 i$ e: N
let buttons = [];
9 Z2 H- C9 w/ G
let keycodes = {
, Q: X3 f& p; |9 f5 q: m# W
0: { Symbol: 0, Shift: ")" },3 D& E& {# H# D0 ?
1: { Symbol: 1, Shift: "!" },
9 Q9 j- o1 c* w+ S: D# ^3 k
2: { Symbol: 2, Shift: "@" },* l. f' Y' z8 x) _, q
3: { Symbol: 3, Shift: "#" },
8 ?9 z# S1 }' P( ]6 a
4: { Symbol: 4, Shift: "$" },
( Z& x8 ^0 h3 a$ _% E8 E
5: { Symbol: 5, Shift: "%" },
6 l5 H+ R. J4 @7 w4 s& I; _
6: { Symbol: 6, Shift: "^" },2 o! h) b6 ^) c/ c9 v9 x
7: { Symbol: 7, Shift: "&" },6 c7 s$ Z/ f/ Y! X+ x6 C
8: { Symbol: 8, Shift: "*" },
, t! r2 |7 s: V
9: { Symbol: 9, Shift: "(" },
2 A' G7 H: X0 g: A8 G/ Y
a: { Symbol: "a", Shift: "A" },* u0 K2 d$ h: a+ [- g2 k
b: { Symbol: "b", Shift: "B" },
4 B$ K/ a; k/ X5 x( V% g
c: { Symbol: "c", Shift: "C" },
# J. [( C, f7 z5 s
d: { Symbol: "d", Shift: "D" },6 t2 `8 T$ r: \% _
e: { Symbol: "e", Shift: "E" },) u% r, p4 b# J, y* W
f: { Symbol: "f", Shift: "F" },+ T! s$ y, G5 U( }0 d
g: { Symbol: "g", Shift: "G" },
7 | w( Z/ h% N% ~
h: { Symbol: "h", Shift: "H" },\" ]2 ~. D/ z# N5 ~
i: { Symbol: "i", Shift: "I" },
7 p\" {: H* Q' p9 N3 I$ K
j: { Symbol: "j", Shift: "J" },2 W6 ]6 B- D$ }* X! D, [% K
k: { Symbol: "k", Shift: "K" },
$ p; K. J4 d# I8 W\" t5 Q( F
l: { Symbol: "l", Shift: "L" },
3 E* j% w8 h) W1 b
m: { Symbol: "m", Shift: "M" },' k) B, @2 |\" `
n: { Symbol: "n", Shift: "N" },& D) l' V3 n2 W1 l$ A/ Y0 |0 L j
o: { Symbol: "o", Shift: "O" },- @ h1 x! _( b9 D0 r
p: { Symbol: "p", Shift: "P" },$ D8 D% |, s5 s8 D) e7 d3 s
q: { Symbol: "q", Shift: "Q" },
1 g: c2 u8 M! Y$ N( }% `- U$ S2 E
r: { Symbol: "r", Shift: "R" },6 }: d\" r$ t& E; N, o9 x; f; b
s: { Symbol: "s", Shift: "S" },5 D4 c: s6 x) O8 [2 f
t: { Symbol: "t", Shift: "T" }, A9 ]7 ?7 v( F8 k
u: { Symbol: "u", Shift: "U" },+ ?+ o# f! \5 |$ Z6 E
v: { Symbol: "v", Shift: "V" },
- v/ G/ M) q+ U4 a. T\" K$ \
w: { Symbol: "w", Shift: "W" },
+ _0 ]- K/ [8 O- s
x: { Symbol: "x", Shift: "X" },
) P' B9 i* l5 M0 Y% i6 R3 v+ i
y: { Symbol: "y", Shift: "Y" },
' d8 P9 V5 [, v, Z\" x4 q! W8 w) p
z: { Symbol: "z", Shift: "Z" },6 ]$ a$ U% v4 ]! I
"`": { Symbol: "`", Shift: "~" },2 \7 m0 V0 v# f. b0 b: E& v
"-": { Symbol: "-", Shift: "_" },
3 I$ S4 A7 E: b
"=": { Symbol: "=", Shift: "+" },
) E7 i# e. m! h6 H; g
";": { Symbol: ";", Shift: ":" },
\" G# q* j) }3 `' A7 W7 v! b7 n/ a+ F
"'": { Symbol: "'", Shift: '"' },
- Q/ P5 _# K\" J7 L& f5 a! O
"[": { Symbol: "[", Shift: "{" },- u8 A' g: {8 [+ _. `/ w/ u
"]": { Symbol: "]", Shift: "}" },; Q3 T6 ~, h7 h3 J9 b3 g
"\\": { Symbol: "\\", Shift: "|" },
z% n) I: q! c8 P: S$ l+ O
",": { Symbol: ",", Shift: "<" },
0 u\" |+ h0 ^( U
".": { Symbol: ".", Shift: ">" },
/ z+ m: s p2 j7 Q( t
"/": { Symbol: "/", Shift: "?" },
\" l% W\" C& m# g. q6 L( l( o
Backspace: { Symbol: "⌫", Shift: "" },
: ?$ m0 m' m+ {5 M% y/ |
tab: { Symbol: " ", Shift: "" },
) p3 d\" X4 ?$ l: }4 C
CapsLock: { Symbol: "⇪", Shift: "" },
, T( z% c2 v; I
Shift: { Symbol: "⇧", Shift: "" },
% |; g$ H# U, n\" }; q* b* L
Enter: { Symbol: "⏎", Shift: "" },
, K: i/ ^7 ? W
Control: { Symbol: "⌃", Shift: "" },9 q8 d* O. B- T/ ?2 E3 P
Alt: { Symbol: "Alt", Shift: "" },! O: L0 J7 r' z8 H
Meta: { Symbol: "⌘", Shift: "" },+ [. ^- z. z& i\" h, G
ArrowLeft: { Symbol: "←", Shift: "" },( k( B\" P9 ^3 B( z- _0 H
ArrowUp: { Symbol: "↑", Shift: "" },' \4 A- |+ T+ c* N/ g8 d
ArrowDown: { Symbol: "↓", Shift: "" },
/ Y$ \ S$ s7 o) I
ArrowRight: { Symbol: "→", Shift: "" },0 V6 k& p+ E3 v5 U- v
" ": { Symbol: " ", Shift: "" },
- d\" h6 N$ w8 c+ Y U, x. U
};
9 u3 S/ F: R$ X+ r$ `\" t+ [ r
let buttonMap = new Map();4 `, ]+ E4 f$ n L0 m8 M5 _
let height = 32;
/ T/ Z/ }8 v7 g' h( y5 l; ]/ m
let margin = 8;2 o) v& ]1 J* _$ _8 T) k! [& F
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);, x- l+ F: V/ W4 l0 t
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
' X# V; P6 a\" ~# M, q4 X( V\" ^
for (let row = 0; row < keys.length; row++) {' C5 O z: M0 v$ z S\" u, y
let x = 32;
8 m8 [, C4 V w) W& \- p$ Q
let prev;
$ l- C+ T |% d: e
for (let i = 0; i < keys[row].length; i++) {; u, D9 x5 X( f2 r7 K0 C2 N+ Z8 N
let key = keys[row][i];
& } E+ V6 [4 u1 T6 D
let width = 32;
5 h/ J* x% O\" l
let button;( y- p& Y6 z- l% C+ N
switch (key) {: Y7 Q2 O4 @8 i7 G; B% b! F: z9 J
case "CapsLock":, u, ^; w F* d- M/ C
button = capslock;- b0 E5 d3 n; I9 f$ s- n8 t
width = 64;
5 j9 m0 S9 O! A+ `% L
break;- }$ x6 O0 q7 w, {, ^( `
case "Shift":0 n+ [& L3 {0 O# I0 k
if (shift.x === 0) {# M0 c$ i6 \: n, L1 N: c7 f
button = shift;
8 ?9 G( d: i, J: `4 v
} else {' |5 O6 k9 D8 D9 i8 ]- S/ ?
button = interactive.button(! _$ M3 N9 u/ V& p2 z6 G
0,! q' U) N2 i* c
0,
/ G2 r! ]- H1 r3 E- x# t
keycodes[key] != undefined ? keycodes[key].Symbol : key5 Z5 |9 |- P. b- M
);
$ E4 X+ P- j, z4 N
}
+ P8 |+ n7 [! G
width = 90;
, E% |3 R- ]- u
break;: o8 J6 F5 F, F- ?0 s& l# U: U
case "tab":
, k8 ?2 s% J. h! S: p* b' K\" N5 ^
width = 50;/ c5 |1 f3 s* Q
button = interactive.button(
- c# }0 S3 h% ?5 h ~: t7 P
0,
. _ S0 K* [ `( N$ J! d
0,
. \8 g4 L0 j( f$ Q7 [
keycodes[key] != undefined ? keycodes[key].Symbol : key8 Z6 m5 S; H4 a- y( s2 Q6 {9 [
);
# X, W! ^, Z5 R, @- U
break; K; I4 e2 w% ?& u
case " ":+ t$ G: m8 | u! S8 Z
width = 176;, A' _2 q) o. L% T2 S+ Y
button = interactive.button(6 e6 l/ ?3 ^( }# T+ E
0,
+ ]* A G4 z8 y( `\" u
0,4 n/ Q0 W0 I5 G! x
keycodes[key] != undefined ? keycodes[key].Symbol : key4 M$ o# Q( v- b' u2 W. ^
);4 _9 O0 w* e7 ~! w$ i- z
break;' v3 D9 v- ]% J6 m
case "Meta":' [( {! J# c: i, E# J\" Y: t
width = 50;$ X9 y4 z3 {& D; Q
button = interactive.button(4 e4 R9 Q, D. T; q
0,( w4 @; p& E( C3 n/ N
0,% b( G2 }2 P8 S% |# r2 |+ X
keycodes[key] != undefined ? keycodes[key].Symbol : key
0 _/ w1 p. `2 [
);! W\" k1 u+ P, |6 Z\" M
break;
: U% V' B' q! V6 a4 f4 x
default:% x* W* t* P2 Q, Q# c3 ~4 l
button = interactive.button(
* n4 e& E' Z' d
0,
3 V1 y, w/ m0 K8 Q7 B
0,
\" V6 x. V' z9 h5 V\" k
keycodes[key] != undefined ? keycodes[key].Symbol : key\" z: Y- S- w5 K9 z1 _: @ }4 c8 W/ X
);5 y2 ~) Z% v) ^\" q4 ]# u
if (keycodes[key] != undefined) {
$ K, w$ d1 Z3 O4 i6 R0 I
if (keycodes[key].Shift != "") {
u& A# m; `. ~5 D3 q3 \( [
button.addDependency(shift, capslock);4 U1 s Y) ^9 [* O
button.update = () => {) `' c. _) l/ K7 z, o4 {
if (shift.active || capslock.active) {8 S4 O9 F7 e, A& A' L; u
button.label.contents = keycodes[key].Shift;6 q' K6 j% A\" t( {) F( F+ B$ F
} else {1 |0 ]' J$ D s( d$ e1 `8 z! V
button.label.contents = keycodes[key].Symbol;
; o$ G3 y0 w7 L/ w4 c/ Y$ X* f
}4 G$ ~5 B, m6 M$ q7 H4 X3 k T
};) n2 d% w( U8 v4 I1 a% {
}
7 x: v b% B4 e; p9 F4 R
}' H1 z# H. X N6 b3 d: w* k; e% j
}; c' ?% y6 u( f Y, I
button.x = x;% F0 g* l, p3 O- q* J0 X
button.y = 64 + row * (height + margin);6 f& c3 Z6 D$ X) {1 C
if (button.box.width < width) {
9 r% A% X) ~\" G' c0 i) W
button.box.width = width;2 J8 I7 L2 I/ ?4 A& n
}9 i3 g* s1 h& w! N. c/ w7 l& c
let bbox = button.root.getBBox();+ b! e4 d& W; t) {\" S) v) @- V, B
x += bbox.width + margin;1 p0 a8 G\" Q4 z' D- a5 D\" B
buttons.push(button);
prev = button;4 H0 }+ l5 z; K; K0 f
buttonMap.set(key, button);
0 b' X. T+ K# N
if (key === "ArrowUp") {7 W: |! y5 L: M& L8 }, E
button.box.height = 16;4 U. s2 {) z2 H+ O; G1 x0 |
button.label.root.style.display = "none";; S! E3 K9 G7 C
} else if (key === "ArrowDown") { v( d O! a$ W' J
button.box.height = 16;
/ v& I1 _0 Y& I) F9 Y
button.x -= 32 + margin;6 f! H' U; X; ~9 A, @
button.y += 16;/ t- p$ {) H+ y; ]
button.label.root.style.display = "none";
) A1 [8 A) h, w# x
x -= bbox.width + margin;+ Q: t$ ^8 I4 A) z( A
}
u# W/ R- A* m& T
}
1 U) n- u4 ^ q7 k8 D, {$ T
let right = prev.x; L w. M, ]; w- {. i
if (right < 630) {7 R/ g4 }+ }/ [; m% ^7 x
prev.box.width = 630 - right;
0 W/ T! F% Z- j d& _4 G; k0 r
}
5 x8 t/ p; v7 N1 I- b3 W* P$ u/ ~
}
) z1 |9 D- `4 h+ p0 z8 G
// console.log(keycodes["0"], shift, capslock);) R9 R! c5 F |3 v. Y# F9 g
let active = []; i& i( z b$ C\" c* a
window.onkeydown = function (event) {
1 r' a: Z! K% t$ ^9 k
for (let i = 0; i < buttons.length; i++) {$ K. v* m' ^2 ?0 l1 _: M2 @* B
let button = buttons[i];) w+ y1 l, t! ?9 _, T9 L3 ^
if (\" b5 E+ {2 N2 E0 k5 e\" b6 B) a
button.label.contents === event.key ||
\" L; j+ V( `3 u3 z
(keycodes[event.key] != undefined &&
: w% g4 c9 z( _7 b
button.label.contents === keycodes[event.key].Symbol)9 U\" A; U( C% s6 P0 V6 _* H
) {3 z\" ?: e ~3 J' ~
button.box.style.fill = "#f8f8f8";
a6 K% u. ~- h# |7 y* o6 D
button.label.style.fill = "#404040";) l- u! s& H) F+ k\" m
button.active = true;
$ u! M. v0 h9 t+ V' i4 p9 f# N9 i
active.push(button);
( K; F) S% V. J( I S
}
+ X/ f5 o* w% o) L* M' R: M. Q
}
' h& c5 ~5 K6 y k3 P
buffer += `'${event.key}',`;
5 C+ h1 p, J' X. s2 S\" P( t\" e
};5 z3 i x6 F$ h- c* {+ H
window.onkeyup = function (event) {! H# J5 z, |4 ^
let newActive = [];
& e: E' T; R$ U. I9 v
for (let button of active) {
4 S2 ?5 W6 l8 c# w% v
if (1 m( @* x8 c& u0 ? z& w
button.label.contents === event.key ||9 J J. H4 A# L K
(keycodes[event.key] != undefined &&& G( Z' c4 Z) K, M9 P7 c
button.label.contents === keycodes[event.key].Symbol)
, T& f2 `) D1 `! l5 x
) {$ n) n8 G* ]9 K\" s
button.box.style.fill = "";% J* F/ m( f; p% V: `. K4 U
button.label.style.fill = "";
8 J! W0 c7 H\" w3 i, N4 Q
button.active = false;% W- R G0 s3 y- U1 I
} else {' q. j1 @. M8 s1 p
newActive.push(button);) Z0 }% C0 A# ~\" ?8 l
}( B. h5 {! f9 z
}
9 M1 c0 @/ H3 _1 d5 y
active = newActive;
, u- [! q1 L6 Z4 e: _3 f
};& N0 K& R8 j) ?# p: H, M
let bbox = interactive.input.root.getBBox();8 X- Y: M' l+ }6 n6 h) @
interactive.setViewBox(1 g! V0 J+ l- J+ z\" ^% C4 I9 M
bbox.x - margin,: j; ^5 i( _# b# `! x
bbox.y,
' U. c# @$ U U4 x
bbox.width + 2 * margin,
$ M! g& _3 m! F: d8 k/ q; A! u
bbox.height+ T+ p% ?) }. ^3 \9 O+ E, ?5 s
);
: C' A' T' O7 T3 p+ _/ L
//# sourceMappingURL=keyboard.js.map
1 ]0 t1 W6 ^7 n# F5 E& @) T4 q
/ X# z9 A# M# _( _) a