使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1189 主题	4 听众	2934 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
7 X* L- X+ O& L3 g' y
<html lang="en">% f/ `6 h$ ~& c m% Q3 z. s
<head>) `* t. G$ V/ t
<meta charset="UTF-8">- Z9 f9 M% e3 }: z/ f
<meta http-equiv="X-UA-Compatible" content="IE=edge">) e: {0 v/ A( w- J
<meta name="viewport" content="width=device-width, initial-scale=1.0">; Q0 p& b1 H$ N8 m
<link rel="stylesheet" >
& ]+ j# O5 }* O7 {8 s- [- h
<title>vector examples Keyboard</title>
& v\" t$ f; h. l
</head>' V' R& t6 o5 ]0 b8 v
<body>
<div id="keyboard"></div>
0 q1 E7 }, O8 K g3 D3 I$ Z
6 ?' e6 q: M: N. O* d
<script type="module" src="./temp.js"></script>
d9 H% L9 v$ }% ^2 y3 T3 Z
</body>
( P6 M+ y3 G1 n* x# x/ L: |
</html>6 @4 c\" g. c' H7 M) z; }

复制代码

import Interactive from "https://vectorjs.org/interactive.js";0 F' d% H3 c( ]( S1 U
console.log("Interactive", Interactive);
9 T# {1 ^2 O' B/ G0 q8 X

复制代码

/**8 J4 @! s2 X( e' I
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard$ D5 J/ ^# [3 [
* @description This interactive demonstrates how key board input can be used to add interactivity., W. Z! X3 B% |3 ~, W6 m- l% G* [
* @tags [input]
\" q' _: m( H6 W9 O! e
*/. }' p# h9 s, ]3 p# J7 r( p
// import { Interactive, getScriptName } from "../../index.js";3 g4 z4 j- t5 I& q. L
// let interactive = new Interactive(getScriptName());8 t: V: Q& j* `5 E$ Y2 M\" M
import Interactive from "https://vectorjs.org/interactive.js";, ~# D! P/ T% X. O, D& i/ m+ J
let interactive = new Interactive("keyboard");
7 Y v/ } o0 L+ t3 j$ B+ `
interactive.width = 768;7 {6 a5 ?/ j) I4 J. i3 P7 u
interactive.height = 300;3 k' j& I. S9 g/ f9 C
interactive.border = true;( s8 R: L% m9 q/ j0 b
let buffer = "";
+ ^& a+ a1 d0 [' V8 x
let keys = [$ L! n3 ?$ t2 w
[8 D& w+ q2 w+ _+ y2 l: Z+ ~
"`",
# \1 q. K( v/ G4 M8 h1 Q$ V, B/ e
"1",
\" E' p) K2 N- g4 p- c+ w7 m! F
"2",% m' \6 }9 {5 V
"3",
+ o; x X! T# k5 l0 @7 \( T
"4",
: O9 h9 H* v; K! a/ j; C/ m
"5",. z4 {+ V/ H S( R1 C( I% P
"6",
& _2 K$ L _8 G9 z
"7",$ K' q; K\" J3 u2 r r/ ]# \6 g\" r
"8",
& t\" P9 w/ R V; Z2 N- `
"9",! ?* G\" b# j2 v9 v0 b
"0",# @& T# m* h/ {5 w5 r. k( n3 K
"-",, O8 Z' M6 x$ y- Q+ @! ?) h7 I
"=",& _7 U: Q$ o$ L\" k7 J
"Backspace",
+ F# a! g6 C2 ^, O \, l\" x
],) m3 L9 N2 L5 \, C+ z) W\" K\" |; C6 {
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],\" _9 O: j5 F* ^1 _# g5 C4 X
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],* k\" b: D! U# e/ n
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
0 w5 k. x) k3 d\" Z\" f
[9 d* c$ p- Y8 Y5 Y' R) o* P9 |2 E
"fn",
+ o; F& \$ J, C, j$ y
"Control",
6 a' N7 K' w4 H7 |) T( ~9 m% K
"Alt",
3 K/ {( T8 N7 p\" V# q4 \( l
"Meta",
5 t0 K1 Y4 r3 d2 L- w
" ",
# e% V# D3 d! P I, y
"Meta",6 ?6 I& T5 e/ w0 x( A( Q) ?1 P
"Alt",* G {! F9 z5 V5 I5 w1 U& {% i
"ArrowLeft",
$ c' X5 B$ L9 I ?5 ]6 @. C
"ArrowUp",
* Z3 t0 v f1 n8 D7 f! @
"ArrowDown",
% ]7 v5 m3 p. B, ^
"ArrowRight",
! A1 S; w9 A* W$ \ D* G1 m
],4 K5 ~3 I( y# G6 ~1 ~
];
1 @+ p' p1 {; T4 B4 a! G
let buttons = [];$ o8 K7 |0 I+ Y
let keycodes = {
! N. E6 B: _; g$ b
0: { Symbol: 0, Shift: ")" },; T/ c4 Z$ p- V% l2 U* z+ j5 f
1: { Symbol: 1, Shift: "!" },' k! m% ~\" ~. [& g. d% y
2: { Symbol: 2, Shift: "@" },; j4 R6 I) Z p# W0 G
3: { Symbol: 3, Shift: "#" },* M\" Q- f' O# v4 ^. d! H
4: { Symbol: 4, Shift: "$" },2 Q5 F3 d, f& _
5: { Symbol: 5, Shift: "%" },# l, J7 Q# @# {2 [ v
6: { Symbol: 6, Shift: "^" },# m/ N: }! {0 x\" i4 M/ b' s
7: { Symbol: 7, Shift: "&" },
1 \5 y5 q/ _) h\" Z: N O
8: { Symbol: 8, Shift: "*" },
5 @4 t5 v8 w8 c/ d; i) G
9: { Symbol: 9, Shift: "(" },+ G3 [ l1 M& [/ y. n2 X8 G
a: { Symbol: "a", Shift: "A" },2 ?; n; T# F, X- ^8 f& s
b: { Symbol: "b", Shift: "B" },
7 Q8 h. r1 D- |. X9 Y
c: { Symbol: "c", Shift: "C" },: w/ S& G8 G# b) C/ H
d: { Symbol: "d", Shift: "D" },
; d\" Z$ m: h* o
e: { Symbol: "e", Shift: "E" },& _; a/ T% _ n% P
f: { Symbol: "f", Shift: "F" },0 l2 u8 s( L$ c8 f
g: { Symbol: "g", Shift: "G" },# U9 Z; u S5 h+ `; h
h: { Symbol: "h", Shift: "H" },' v- e' Q* s$ M- Z
i: { Symbol: "i", Shift: "I" },* E/ e& x. I8 |% O6 B8 g\" g# i# x- |
j: { Symbol: "j", Shift: "J" },
/ W$ w* d8 i- y3 E0 u4 ` e x
k: { Symbol: "k", Shift: "K" },
8 [; ]& y' _8 N$ f5 q$ a# D
l: { Symbol: "l", Shift: "L" },8 o$ J2 ^2 U* q3 |
m: { Symbol: "m", Shift: "M" },2 {; r/ d( F4 g/ Y
n: { Symbol: "n", Shift: "N" },, Q, \6 i+ L. S5 o
o: { Symbol: "o", Shift: "O" },' k; u7 H' T: v) G6 n
p: { Symbol: "p", Shift: "P" },
\" b* O\" N/ I0 d3 H/ w; E8 p
q: { Symbol: "q", Shift: "Q" },
* J$ n3 n( o# p
r: { Symbol: "r", Shift: "R" },8 C2 E( I+ e6 D0 l\" Q
s: { Symbol: "s", Shift: "S" },8 ^+ M3 g9 [. g7 G7 [0 w0 `
t: { Symbol: "t", Shift: "T" },
/ c4 b: m, O/ \' T
u: { Symbol: "u", Shift: "U" },5 ^5 f# m( y/ L7 U\" c2 s. V3 k
v: { Symbol: "v", Shift: "V" },1 | F0 b) n8 p) U- c# A
w: { Symbol: "w", Shift: "W" },! c/ A: P5 j0 \
x: { Symbol: "x", Shift: "X" },* `% h6 u, D3 a6 e2 o# u9 l H
y: { Symbol: "y", Shift: "Y" },+ b; M) {; w0 M: V: B3 D: \
z: { Symbol: "z", Shift: "Z" },
+ N) p+ F# @, ^3 Y/ h
"`": { Symbol: "`", Shift: "~" },4 L, x, j$ b) c. N ]4 ]
"-": { Symbol: "-", Shift: "_" },$ y1 g' ]# `& O( h' c; g
"=": { Symbol: "=", Shift: "+" },, g5 P O. E0 |# q% I& B
";": { Symbol: ";", Shift: ":" },
$ N8 x7 }1 p8 g/ S\" w# X
"'": { Symbol: "'", Shift: '"' },
* Z- ^4 w\" q5 b9 _* I4 ~
"[": { Symbol: "[", Shift: "{" },
4 V/ N+ h: _9 R0 u
"]": { Symbol: "]", Shift: "}" },
: s0 }: e3 t! b2 P# \/ ^
"\\": { Symbol: "\\", Shift: "|" },' q& Q- ~\" T6 P
",": { Symbol: ",", Shift: "<" },! r, e4 J/ ]4 _7 t* U\" _! H9 S
".": { Symbol: ".", Shift: ">" },/ q) g* f) ]3 o1 A' S. `/ Y
"/": { Symbol: "/", Shift: "?" },& u4 q9 |. z* z
Backspace: { Symbol: "⌫", Shift: "" },
. R( i/ P5 w\" C j1 i. P4 Q\" M
tab: { Symbol: " ", Shift: "" },
g/ G+ a5 v5 @
CapsLock: { Symbol: "⇪", Shift: "" },: x\" C' |1 e; F2 q: ~, R
Shift: { Symbol: "⇧", Shift: "" },: u( j S1 _5 B+ M! s0 y
Enter: { Symbol: "⏎", Shift: "" },
% w! g- v2 ?6 }$ L2 Z$ ~- {3 i
Control: { Symbol: "⌃", Shift: "" },
s5 e1 ?# e, B
Alt: { Symbol: "Alt", Shift: "" },7 K! t( \& B/ |9 n# D% Z
Meta: { Symbol: "⌘", Shift: "" },
M; o\" z, Z# W/ s0 b4 w: C A
ArrowLeft: { Symbol: "←", Shift: "" },! b9 |& j) a3 v4 p; B: P
ArrowUp: { Symbol: "↑", Shift: "" },
0 y& G# w7 a# \/ J( G7 S* i
ArrowDown: { Symbol: "↓", Shift: "" },
; u\" \! t3 t) G7 r! S
ArrowRight: { Symbol: "→", Shift: "" },; [% E3 M% g/ {1 D. E- }! o
" ": { Symbol: " ", Shift: "" },# E4 O% h& r4 n' z1 h2 Z. g
};
/ q8 M% C5 m$ D0 @7 L6 T
let buttonMap = new Map();
/ o: o6 X3 ` A5 k: x! J* m. ?
let height = 32;. A- \! h# h$ T: n) E
let margin = 8;
; E2 |/ _1 A9 m q
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);/ M {. U$ B& s6 P% s M, k, O
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
. `9 n5 F% Y/ M- m# }2 V
for (let row = 0; row < keys.length; row++) {3 e6 D3 A J2 L3 g; N
let x = 32;
- h1 r+ q/ N; J$ j
let prev;
! {\" j) o& J/ p, d
for (let i = 0; i < keys[row].length; i++) {3 R4 ]2 p\" T) {/ L* m
let key = keys[row][i];
$ ~/ C1 f\" N- ~/ B' L
let width = 32;
|% G [# Z' |% M
let button;
/ d9 v- B0 u5 P& L! f
switch (key) {6 c6 z! P7 G6 `, T6 j5 w
case "CapsLock":
2 ?. N) m, U: W- ^- L
button = capslock;
\" ~! ?! ^3 ]! r: k+ [
width = 64;
/ P% C\" }0 _! K, x I
break;
* [$ r9 W( n\" Q. n7 a
case "Shift":4 ]- `0 R, z8 {; d( m- U2 r1 F
if (shift.x === 0) {
4 {- P l* [: h
button = shift;6 m; |5 R. ^3 ^0 l l4 q$ g
} else {
2 v2 u9 y) N2 d( u& ]7 e e\" k+ J
button = interactive.button(3 H9 N$ n% E* v2 K
0,
7 c0 }: m/ [; w: U; E$ n4 S
0,# r. r t$ K) t! ~+ L! b+ N: ^
keycodes[key] != undefined ? keycodes[key].Symbol : key
/ w, o5 ]4 A( Q\" n
);
* G, J8 Q! }% @+ H ~
}7 S0 i1 r% j) n# O
width = 90;
; w7 r- c. { i1 q, C9 j\" m
break;, c( S) {+ S/ |$ P0 Z
case "tab":5 A- g7 Y3 V6 |% e2 x6 ?. ]% Q( T& N
width = 50;
, t- R r, |& N* _# R
button = interactive.button(- e9 p# s! K7 z, U$ f; [# A
0,- G* ~7 Q, ?& H8 U
0,
- H: f1 M# F' }- J- Y
keycodes[key] != undefined ? keycodes[key].Symbol : key: @9 o% b\" v# h2 B! b$ T! X
);. F# `. X' N7 E/ {
break;$ ~9 k\" N) M2 z7 O
case " ":
+ c9 e. c; |* X; W& K4 W% }- S! r
width = 176;
+ ?\" Z5 y1 w. F3 @' ?! J
button = interactive.button(1 b0 r, J$ D7 o+ o
0,; D# t4 j! ^$ z8 p0 T
0,
. ^& b5 C% c: n. D
keycodes[key] != undefined ? keycodes[key].Symbol : key# r- `8 w& T' C1 L
);
- v+ u: [) l! L9 V% c2 |\" r5 W# j
break;+ q4 @( C) g& K; P. E2 ]1 ]
case "Meta":9 W9 T, {# R7 G/ O
width = 50;
2 {1 I T5 T! I1 \
button = interactive.button( n9 [( T\" A! Z9 q& M2 t& c7 \2 H
0,/ {$ l! u7 |0 Z2 R\" f% F* [
0,\" x6 M0 r8 V0 y* F2 h1 {5 U
keycodes[key] != undefined ? keycodes[key].Symbol : key* _: s* Y& `2 m/ J8 |
);
3 ?) Q1 w! h0 s% D\" W0 F/ N6 H
break;
; g# w% I' }2 y( V
default: g) @/ ^\" b7 t) n( l( c
button = interactive.button(
: n0 t& Y Z; @' R
0,
' _% ]/ t1 ?8 w1 G\" |# a- m; W- |
0,/ O# D5 d; l: g* X A; \3 i
keycodes[key] != undefined ? keycodes[key].Symbol : key, |1 q; X6 F* b8 W
);
* G# R! h\" i, A6 f
if (keycodes[key] != undefined) {
( f) C1 v8 S) W9 C5 l( x; Q1 L) P
if (keycodes[key].Shift != "") {
$ e2 Q. G\" n& M) ]
button.addDependency(shift, capslock);
% P2 M; Y% i5 z2 }* y C$ S
button.update = () => {
' c, J% H, ^ c5 k# b0 _! e4 R
if (shift.active || capslock.active) {
+ o# m, g/ I4 e
button.label.contents = keycodes[key].Shift;\" o; z( v, E* x; a- I9 Z
} else {& y\" n1 l. T$ d v9 U) w6 E
button.label.contents = keycodes[key].Symbol;+ [0 f8 x( C5 a; g2 L) Z; K1 [! i
}\" \/ o, V7 r! X% s0 u
};) F! U8 R0 ~) L! F+ x
}
1 _5 \, P6 V& M4 Y
}\" V4 U+ @6 X5 ^& ?+ e+ g
}/ I\" p% X5 e! j* S6 C2 q& R
button.x = x;& ?4 s. E0 C/ ]. S. d7 s0 D
button.y = 64 + row * (height + margin);6 |) q* u$ P2 k5 I: Q8 [
if (button.box.width < width) {$ T& @5 s7 J, E4 B3 { ~
button.box.width = width;2 ]; @ V, r) l- Z* ?1 B1 u
}
- d% Z2 h7 ]* l0 P% K* v, ^# Q
let bbox = button.root.getBBox();
5 P# Z) _9 t* [3 ?
x += bbox.width + margin;- ?- i6 O! M {
buttons.push(button);% D, t( Y% ^8 K6 {* D2 c2 U
prev = button;; c) V/ G6 a0 `3 ^
buttonMap.set(key, button);$ D8 f& M2 c5 T5 \6 o& |
if (key === "ArrowUp") {; E. R- M. j# i8 x& T4 i( Z
button.box.height = 16;; C3 a% G l\" m, @; i; Y6 z
button.label.root.style.display = "none";# P1 O% N0 N# E- s! \ Q
} else if (key === "ArrowDown") {
: _$ i% t5 [* y
button.box.height = 16;: d* \\" P# Y- A' v# ?' R
button.x -= 32 + margin;$ Z) U9 N0 O' U/ X\" p% M
button.y += 16;
% K, k+ Y6 L! }7 T6 b5 K( y3 a' _
button.label.root.style.display = "none";
\" @% O, b6 n- s' |, {
x -= bbox.width + margin;/ q0 h$ R4 x; o/ Y7 C
}
; K1 ?, I+ C& x; ^# {\" O
}% [0 R4 R4 A' G5 b8 E: D. I
let right = prev.x;4 r9 f: X( [* L0 c( i' U3 V8 K
if (right < 630) {) w/ ]* K/ r1 h* f* z, S( E! { H
prev.box.width = 630 - right;
, k6 _5 a, I7 \8 q4 r. ]
}
# O/ S: l$ Q5 D. J
}+ p/ _! K) C8 A) h
// console.log(keycodes["0"], shift, capslock);7 s& p6 ?+ z' @0 H
let active = [];! A% ~% h) Q X* h$ z
window.onkeydown = function (event) {/ ?9 ^) p' M. P8 P( q) m& q
for (let i = 0; i < buttons.length; i++) {
: m0 e7 O! U. N# y6 d
let button = buttons[i];7 V L& Y2 j( \6 X
if (
/ z/ i6 c$ k, {( A+ e
button.label.contents === event.key ||7 g! D8 H1 ]! [
(keycodes[event.key] != undefined &&
?$ R! n2 M, q* j/ o
button.label.contents === keycodes[event.key].Symbol)
' L1 o4 {3 s' ?$ e+ v* x1 a3 Y
) {
& Y- x% L7 q% A1 R/ G
button.box.style.fill = "#f8f8f8";, ^ {2 n% u# }
button.label.style.fill = "#404040";3 l. H4 x Y5 p, l/ W# F
button.active = true;2 y9 w7 F1 H# V/ k4 [: C3 r
active.push(button);0 }/ h0 G\" R& g: S7 n0 w7 o) {
}
9 s$ \9 D3 c0 B4 o/ L
}: T2 h\" O! c; W\" {
buffer += `'${event.key}',`;
\" x) a7 A) i: m0 p; e: g( X; L( n
};\" i1 l& i3 d. s- P, H+ }
window.onkeyup = function (event) {
- S& b9 f* v5 i4 X$ V$ z$ o$ G
let newActive = [];
7 p0 F* U1 @& h
for (let button of active) {
/ e5 r7 b( }. o' j
if (
# g: T* ~/ W6 F# |+ U3 W* ]
button.label.contents === event.key ||
) J$ R, Q! a# z( h+ k5 Q6 i. u: M
(keycodes[event.key] != undefined &&
5 ?2 K+ i! L8 l; Y0 ?\" M
button.label.contents === keycodes[event.key].Symbol)
8 U/ Q% \# `8 n1 L9 W! w- T
) {6 t j3 [( \1 k8 h+ k) ?1 `2 H8 M
button.box.style.fill = "";
: e7 T1 T, O+ E& N- O, @7 H% X
button.label.style.fill = "";
2 V5 v8 X z4 s6 H
button.active = false;
! E' {) _) x4 ~; o: P. _
} else {! B9 y% ?( N6 o
newActive.push(button);8 w4 y N, u: e( {$ [4 X+ {
}' w4 w/ N- M: r0 Q+ H5 T
}
* x% p R$ B0 z
active = newActive;\" N7 N' n5 ^ f, ^
};
4 A' i& _( d( ^& K6 H6 r
let bbox = interactive.input.root.getBBox();; X: H: p. }2 s/ D( e1 v
interactive.setViewBox(
9 O/ X2 @5 e# e9 j2 R; V\" ?
bbox.x - margin,
, M% q\" e7 N6 h
bbox.y,1 s$ w, E2 t/ Y% [* e
bbox.width + 2 * margin,1 C8 [( a7 s! s# _$ d# I8 a- E3 q% W
bbox.height1 i% J( ?+ y1 L: B8 n1 h3 k9 l
);) ~& N# z$ H8 ^
//# sourceMappingURL=keyboard.js.map( {) R! R0 Q# Y- R( [8 Z0 x, i' s: F
+ J: O' K1 P; ]& _# v$ v# F