使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1186 主题	4 听众	2922 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>
3 v9 s, Z0 d0 S6 I, ]( o
<html lang="en">0 z5 ?. P9 W% g9 n; [
<head>
5 B4 ^8 X, R! S1 W. R3 X' Q2 C: s
<meta charset="UTF-8">* E- @# M, ~4 } h/ } {; a3 U, |, X
<meta http-equiv="X-UA-Compatible" content="IE=edge">, a4 H b6 |2 ~
<meta name="viewport" content="width=device-width, initial-scale=1.0">
* C( ?6 F$ \; H$ Q
<link rel="stylesheet" >
9 k/ n/ T0 m3 E3 e$ j6 J7 ]. r
<title>vector examples Keyboard</title>
3 v: O0 d& r\" x. N
</head>
3 n h0 f6 g8 d8 D7 n; |
<body>, f! y% R3 t# C0 d0 z5 ?\" X
<div id="keyboard"></div>
9 Z( v\" M, d; ^
, ?/ j1 y1 S6 ]' b1 s0 X1 a2 c
<script type="module" src="./temp.js"></script>% f) p* G8 I2 P' q( i+ H
</body> Z/ r; ~; x& T
</html>( b\" B9 T$ Z: S) l

复制代码

import Interactive from "https://vectorjs.org/interactive.js";\" C# s- V& ~7 ~' N& S
console.log("Interactive", Interactive);\" X% ~1 `: O& K+ A) m$ l! e

复制代码

/*** M E# L% a# g. Z# q j: K
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard8 z4 o( F7 p; n
* @description This interactive demonstrates how key board input can be used to add interactivity.
4 m C# L, p' K
* @tags [input]2 c0 M& T4 ]8 K
*/
- S; U! q0 ?% {. l$ R0 S4 c
// import { Interactive, getScriptName } from "../../index.js";. q: [1 {% D t0 L
// let interactive = new Interactive(getScriptName());
$ T/ z2 } ^& Z1 x& z+ S
import Interactive from "https://vectorjs.org/interactive.js";
4 ?! X, N) \) Q\" f$ a* V: k& i4 e
let interactive = new Interactive("keyboard");; b u4 s+ |9 p
interactive.width = 768;
, h. S. Z& |+ l! f
interactive.height = 300;% O; Q3 v e# i' o2 u/ L
interactive.border = true;
; Q7 o! a\" ^. k( }\" M8 o
let buffer = "";: s% N# z5 `8 W
let keys = [5 z0 O( c( m g2 X/ c# L3 [
[) W) L4 M+ V% s* n
"`",0 K* m$ k4 e+ b
"1",
6 ^6 p( {- x, A! x
"2",
, [$ C' z) Y+ d' h5 n. e3 B
"3",
% e( r/ u! A5 f\" Q P: ]+ l
"4",
; Q' n4 }) C# F) ]1 r) k6 T5 ]
"5",
! V* f; S1 x( N5 v
"6",9 _' R$ ^5 d1 O6 n8 Y
"7",
) K\" \* [. a0 q# P( W! h. J& I
"8",& B# y# Z$ Q4 R
"9",
- q6 V1 f1 ?1 t+ Z
"0",
0 a( E/ |7 \! Z9 r4 n; o) Z
"-",. M: F; B) s9 Q9 W* _, K% L
"=",
0 G. U# @0 e# L
"Backspace",
; r; L, W1 |8 h: k: d' C
],! A k2 U: ]! Y' ]0 r3 q
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
5 k\" Q+ x; j6 }9 c l
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
2 |) ]( ~0 Z W: R6 ~. W+ A+ [
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
6 K9 e; R6 w+ Z\" G
[0 r- J* z8 n8 j5 N5 @# t7 `
"fn",
3 _# }' L\" F/ f; K6 F9 }* b) ?: Z
"Control",% d6 g6 |7 o# i4 U+ L+ W: M- S
"Alt",
"Meta",$ X6 Q* C ?9 k: M, U/ v* H
" ",
; y0 ~4 h, z7 C) A\" Z
"Meta",6 R& m+ o8 E# Z7 H( h, V- B; a
"Alt",( Z. i, d3 V# C! g2 n8 e+ t
"ArrowLeft",( S, k& t9 l( j3 C\" a7 q
"ArrowUp",
/ w\" _% H: P( m: [
"ArrowDown",6 `4 v0 O/ V, r) J; l8 j6 Q( E8 f
"ArrowRight",' Y% w4 ]$ |- U! Q2 X2 d
],; |, ?1 V' w' V% O: g: a: f$ e
];5 l8 ?# N8 D- w5 Y3 f2 Z
let buttons = [];
3 L# Z3 ~' g0 L( E* a7 c
let keycodes = {
; ^+ _( L: F6 h5 Y6 r% \9 N\" N
0: { Symbol: 0, Shift: ")" },
5 w: |6 { n\" ?6 [+ m5 b, D
1: { Symbol: 1, Shift: "!" },
0 [+ c. \- Y+ X5 m
2: { Symbol: 2, Shift: "@" },
2 T2 C- q4 Y9 E, a
3: { Symbol: 3, Shift: "#" },+ Q& S9 B6 k! a! E% d) `
4: { Symbol: 4, Shift: "$" },
3 u( I: g; v% \
5: { Symbol: 5, Shift: "%" },
) X- l2 j/ v5 r4 b v m
6: { Symbol: 6, Shift: "^" },
9 g6 V; F\" z8 u4 W, q' F' E) {! M
7: { Symbol: 7, Shift: "&" },% o4 c6 L6 Q! Q4 B5 P2 _5 ^4 g
8: { Symbol: 8, Shift: "*" },
9: { Symbol: 9, Shift: "(" },; C/ o\" d: P3 l1 M L, ?
a: { Symbol: "a", Shift: "A" },5 h\" l) x: B, o) S
b: { Symbol: "b", Shift: "B" },
' B# L: i2 w1 d0 l
c: { Symbol: "c", Shift: "C" },
7 @3 m$ n3 ~9 o' _. _# M' |
d: { Symbol: "d", Shift: "D" },$ d( H( ^: G% F S1 e+ ]
e: { Symbol: "e", Shift: "E" },/ |. ?! v n6 U7 G* l# M0 G
f: { Symbol: "f", Shift: "F" },
( o% \8 F\" V$ ]\" A9 C
g: { Symbol: "g", Shift: "G" },
& O' I, k5 S+ g\" q& Z+ m
h: { Symbol: "h", Shift: "H" },4 Y/ T4 j8 U* z- r+ Y: Z
i: { Symbol: "i", Shift: "I" },
: `& \6 n# F# C& A4 h: `6 c6 |
j: { Symbol: "j", Shift: "J" },# u. `; g0 A: A# z h8 U
k: { Symbol: "k", Shift: "K" },' K; d$ e0 O2 E b$ Q* B
l: { Symbol: "l", Shift: "L" },
5 n8 i\" p: d* v, {2 C& T- ~
m: { Symbol: "m", Shift: "M" },2 F1 N% a }. s- D6 R. s
n: { Symbol: "n", Shift: "N" },# M; L# ]7 T# s1 z% ]
o: { Symbol: "o", Shift: "O" },; o# U& |# x9 }- \' U
p: { Symbol: "p", Shift: "P" },, a\" c4 s- x- [4 @# n5 V6 l0 k
q: { Symbol: "q", Shift: "Q" },
q, M/ @8 I& o- J* t9 q, u
r: { Symbol: "r", Shift: "R" },
/ U, }; E; j, t
s: { Symbol: "s", Shift: "S" },
k4 R+ i5 n$ W- ?\" r8 P C/ W
t: { Symbol: "t", Shift: "T" },
5 ^0 T1 S; I6 y4 l/ h
u: { Symbol: "u", Shift: "U" },\" J- r\" ^* ]0 B9 A4 t3 _
v: { Symbol: "v", Shift: "V" },
- d& w% a ~( V8 h( c4 a) _2 d
w: { Symbol: "w", Shift: "W" },
\" J& s0 r! {2 ~4 S9 |# n: |( R
x: { Symbol: "x", Shift: "X" },, M* u# ]1 a9 O4 m7 X. k5 G8 K
y: { Symbol: "y", Shift: "Y" },' l1 u# J! H' z4 @1 S' Z- [
z: { Symbol: "z", Shift: "Z" },( W- u6 k3 E/ t
"`": { Symbol: "`", Shift: "~" },, t* X) q+ K% G5 C! C
"-": { Symbol: "-", Shift: "_" },& h2 j- L- ]% ?# x' w# O9 ?9 m3 R* Y
"=": { Symbol: "=", Shift: "+" },$ B) E$ |7 ^* M8 P: ~
";": { Symbol: ";", Shift: ":" },* J3 K! p( G; T3 o# g3 E S
"'": { Symbol: "'", Shift: '"' },5 b) Q2 n) k5 b* c5 Y
"[": { Symbol: "[", Shift: "{" },+ C; M/ H: n) I* Y% C\" S
"]": { Symbol: "]", Shift: "}" },
\" H U/ z2 H& q/ m3 B
"\\": { Symbol: "\\", Shift: "|" },
; [5 ~\" Q+ ~: O, s. X4 \
",": { Symbol: ",", Shift: "<" },
6 m. z% O! A5 B4 T\" p$ p
".": { Symbol: ".", Shift: ">" },4 b7 s\" i: V9 z; m f! |
"/": { Symbol: "/", Shift: "?" },\" k6 j0 e' ~* o1 h
Backspace: { Symbol: "⌫", Shift: "" },6 r) I& H% v. N8 C
tab: { Symbol: " ", Shift: "" },
! ]4 L2 { Q, w/ g\" B
CapsLock: { Symbol: "⇪", Shift: "" },
6 h0 x4 t# b! E% P) M5 @
Shift: { Symbol: "⇧", Shift: "" },4 P7 J/ P0 o( |2 U: @\" X# r\" s
Enter: { Symbol: "⏎", Shift: "" },: K z9 ?& G$ M1 v$ c; Z9 T3 ~
Control: { Symbol: "⌃", Shift: "" },1 t\" Q+ G a\" r0 ~ D |
Alt: { Symbol: "Alt", Shift: "" },. z5 ~9 s3 |( V6 ^\" V$ _; _7 N
Meta: { Symbol: "⌘", Shift: "" },
2 H, R0 F\" C8 P+ D( b
ArrowLeft: { Symbol: "←", Shift: "" },. ]/ a9 _! o9 W8 ^' |\" D
ArrowUp: { Symbol: "↑", Shift: "" },
! t' \4 A! T: }- b8 @9 O6 y' F
ArrowDown: { Symbol: "↓", Shift: "" },3 n0 \1 L5 e* n: q9 }% y
ArrowRight: { Symbol: "→", Shift: "" },
2 `, B; J8 y; v4 L
" ": { Symbol: " ", Shift: "" },2 n! y2 k. i/ i! h- P# j
};
, b8 w; `; m% x% v% B$ A C
let buttonMap = new Map();
+ u& g* m: D9 T! ]\" k
let height = 32;: v7 X# o( ~6 C8 n/ w
let margin = 8;+ e$ V\" Q' t- n# M( |
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);. z; R' h' T7 l) E9 d
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);4 V, u8 H+ T9 Z0 V
for (let row = 0; row < keys.length; row++) {
; e& x! E0 K+ T4 t
let x = 32;
6 r4 {. W x4 s7 F\" f8 J$ Y+ c
let prev;
( M) O& F% U3 `& ~2 q7 P
for (let i = 0; i < keys[row].length; i++) {
b2 w5 E4 S\" E' Z
let key = keys[row][i];
9 Y* ?+ d/ |1 n
let width = 32;
?/ r Q g% ^! p
let button;. ] }0 @/ L) X% E
switch (key) {
+ G* { C8 E( W$ K; r( d& C
case "CapsLock":& J4 G$ a, @- c8 t& v: n
button = capslock;7 i9 f* n9 |& v3 h% A$ {
width = 64;
9 ?3 d0 N2 c: Q
break;3 j9 N& u' z\" d9 s) k8 A4 [
case "Shift":
7 H/ v: P9 X3 t/ j! I4 R
if (shift.x === 0) {+ z+ q0 u* x+ [1 w/ Q
button = shift;
* ~ j/ N3 h! J8 p; q( x
} else {2 W5 c9 t1 g2 S# r! X. i/ e
button = interactive.button(
3 [' s ?* s. n2 Q0 |3 w% `
0,
! p% L$ v4 v% t9 T. M\" m6 R2 Q
0,8 ?2 U% m7 c3 u: \5 R
keycodes[key] != undefined ? keycodes[key].Symbol : key) f( S |6 j7 X1 X N. i2 ]0 F
);
6 O1 ?0 d\" n& }! ]. W7 c
}
2 v( \5 y3 P. K& h
width = 90;8 Z6 h+ C6 }# j3 _! u
break;
. S% t8 t! d4 Y8 E$ l: F\" d
case "tab":1 L- h6 T* x/ X, q# W, O
width = 50;
. P( Y( L6 Y- M\" n: `
button = interactive.button(
0 E3 q, j2 k! i6 y. }9 Y& Z' I
0,. M3 j3 P& u; J+ D( w0 y) w
0,/ @8 T! V6 x5 N( P. q2 n$ Q6 S
keycodes[key] != undefined ? keycodes[key].Symbol : key
$ b2 y$ M- ^: R2 ~( U( j
);
0 f! z* c9 X: I\" I' H
break;: {$ Z0 q* V% J% D. d: m$ s0 [7 P3 ~
case " ":+ Q, B9 b4 r: R% ~5 r- R
width = 176;
2 U$ i# x+ k e, E5 J. ~2 e+ D
button = interactive.button(
/ \, L2 o& C8 ]\" h
0,! h9 R0 ~6 V7 x* g
0,9 t9 F\" O# L) l5 d8 D9 x
keycodes[key] != undefined ? keycodes[key].Symbol : key2 f% }2 q& J\" O4 k B- h I2 l
);
; L; H4 c( C: B$ u& Y6 a1 h
break;; \7 _! {7 U) |/ X
case "Meta":
t- u& Z1 [\" j+ v) a4 A
width = 50;2 b+ H: v. l9 w9 T/ M' {& y
button = interactive.button(
0 s7 O% Y7 D2 K8 X; w
0,; [6 R$ \. ]0 @& F2 p6 e
0,7 v( j( I- C/ i- Z
keycodes[key] != undefined ? keycodes[key].Symbol : key
2 B: X2 N) `7 [4 N: W% x: C
);) `, w+ T! }6 a( S) N* s) z
break;$ }- ?3 d6 S# R# _
default:
- F$ @# _\" _$ _0 I
button = interactive.button(
& K' o! ?: t8 q/ ^7 p5 Z: q0 `8 }
0,) O' W/ e5 P) j, |6 K0 e* `: z& O
0,
' s8 j6 L; P% @; o% d
keycodes[key] != undefined ? keycodes[key].Symbol : key1 |7 Z$ `* a( t\" z: D
);
\" O7 I$ C; z1 X' [
if (keycodes[key] != undefined) {- ?# R% x' I7 n P$ ~' a8 ?
if (keycodes[key].Shift != "") {
& R1 ^$ M, s' V
button.addDependency(shift, capslock);3 H0 t% r7 P5 a% h- X9 ^7 ?7 k3 [: l
button.update = () => {
: ~0 J0 N4 S V0 ]- T; T
if (shift.active || capslock.active) {6 r, O, B1 r4 w\" m
button.label.contents = keycodes[key].Shift;7 b1 ^8 o+ m5 n5 u' c' J
} else {
4 C7 q( ~& ~6 M6 g/ n4 m k
button.label.contents = keycodes[key].Symbol;
: q( M [2 r2 V4 ]\" l
}3 F+ n+ ^% _ F$ O* N. g- A\" y
};
* J# D1 Z/ |) \5 h
}
3 J3 \( t3 j, A- |1 j: M
}2 l+ \! y/ E& z7 K3 i
}
0 x1 C6 }0 W! j# ^5 M1 {
button.x = x;# L, w% z9 S- T; O3 B& l: q4 b
button.y = 64 + row * (height + margin);/ X* M: m! w4 O( x. j ~7 V- d
if (button.box.width < width) {
$ h; m% M1 R8 @: P2 ^ s
button.box.width = width;/ U/ r2 o& ^\" @: b8 c' K2 B
}- q( A2 b% d1 N3 D
let bbox = button.root.getBBox();& g& _* x4 q X7 ]+ P3 h1 L
x += bbox.width + margin;$ q: W/ S( S9 L! G% c
buttons.push(button);\" j2 `) t! b/ X\" H! L+ ^5 G% B9 l1 [
prev = button;( o4 l0 C, r) Y! j. a
buttonMap.set(key, button);: R! y, Z( r\" s; [& _3 h7 `/ o. p. g
if (key === "ArrowUp") {2 x) }9 K. X l, z, G1 N
button.box.height = 16;4 _8 D& ~4 W1 W
button.label.root.style.display = "none";: c& M3 \! V$ n) j2 ~
} else if (key === "ArrowDown") {\" }, T5 a% m/ L- S
button.box.height = 16;
' a# S# I3 W7 W) U. P* c4 H
button.x -= 32 + margin;3 ^( B3 J( R- `8 N% \\" _
button.y += 16;
' V2 Z- V0 B* u4 H7 {1 W1 j* i
button.label.root.style.display = "none";( K) D1 [3 P g
x -= bbox.width + margin;1 d5 S9 D7 C6 a( s2 z
}
- u% T+ N J+ m7 y/ b
}
! a$ v\" Y4 a$ ^
let right = prev.x;
\" B+ i$ k w! j* h
if (right < 630) { r9 u- u! r5 `
prev.box.width = 630 - right;: r2 J/ Y! W: ]6 ]& ` M
}
. v# ^7 W8 V9 M6 J/ |1 u$ a: m& h4 h
}' N! {% [6 S# {, g* |( L1 A
// console.log(keycodes["0"], shift, capslock);
! [, ]& v9 U0 w- Z# F. j$ l
let active = [];! m# W' O q. q+ S
window.onkeydown = function (event) {
% J: @6 I3 D! W( e( S0 K8 `) g
for (let i = 0; i < buttons.length; i++) {
, t' j3 i: L8 U2 b) L) |
let button = buttons[i];
5 M& r( a2 U4 _1 G# V+ C9 [# \
if (
; U! Y! K4 V' f; T2 j
button.label.contents === event.key ||
) b! \- B+ i9 J/ l Z! @- ^
(keycodes[event.key] != undefined && R' P* n/ B- k( d
button.label.contents === keycodes[event.key].Symbol), l: p4 G\" ?% t% c
) {$ T1 |2 e5 z# I5 n5 u# \. D
button.box.style.fill = "#f8f8f8";- A0 U: V' J% a0 Q1 V2 {
button.label.style.fill = "#404040";
( E' I8 b: {* G* W0 d3 F
button.active = true;
8 f( J4 F, Z: i5 r7 O0 e
active.push(button);
, ?* ~! X4 n$ F/ _* S+ Q
}9 t/ u- E- H& p9 Q( G
}& ~& h# \- V4 d! T) d
buffer += `'${event.key}',`;
7 e( x9 j& `2 G- r. G. l; j3 m' ^: L! E
};
3 W$ f. Y3 p: Y# `. M8 E
window.onkeyup = function (event) {
- ?4 r4 g# j& R5 K2 @& w
let newActive = [];
6 W9 N* Z, y* [. y/ x' h
for (let button of active) {1 l+ d2 }+ y( s. _; |1 w- [' Q
if (
2 p4 X; {8 |# \; z8 W0 z\" T
button.label.contents === event.key ||
( P- B! t4 }* q/ v
(keycodes[event.key] != undefined &&1 [* Q7 n( T6 t, f/ F
button.label.contents === keycodes[event.key].Symbol): i# r/ e1 |/ |: c) K( f
) {
. _9 N+ S; Y! x+ l$ F3 T
button.box.style.fill = "";
5 b' H# {! }! ?$ Q( t4 c# N$ i
button.label.style.fill = "";* z7 y, M( A8 v
button.active = false;
8 I% J0 d' G# k7 S! i& E
} else {
newActive.push(button);; M# k, J, o& O- a4 M$ b
}
5 x; M7 \2 O4 W* ~' |0 d
}
: s\" e! {, P1 o3 {; F2 O% E/ |
active = newActive;
2 q( i; E: H* }! \2 e- Q
};% q0 R9 @7 q; N; E7 }
let bbox = interactive.input.root.getBBox();. l3 @2 r) x6 ?8 P5 E
interactive.setViewBox(5 w+ J) ^) F4 z
bbox.x - margin,0 L( U\" t\" N& c7 O7 B* T
bbox.y,
\" U& D. Y6 o+ W& P\" k
bbox.width + 2 * margin,' c( V; ^& q: s8 s- ]
bbox.height
5 l8 d2 I A8 L5 `
);: Q5 Q6 V: J E7 r9 Y/ `
//# sourceMappingURL=keyboard.js.map
1 V7 R* V( u; `$ \# ?. r8 P
6 Z$ |0 ?+ u8 X