使用html画一个键盘

[复制链接]

字体大小: 正常放大

2744557306

1198 主题	4 听众	2977 积分

该用户从未签到

电梯直达

1^#

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

|招呼Ta 关注Ta

<!DOCTYPE html>! [9 T1 J( T. Q! d+ b6 P% v\" n: s6 e
<html lang="en">7 [, D% V3 @4 r& Z
<head>9 @\" X# b w$ x( F# T' ]\" ~, J$ [. [
<meta charset="UTF-8">* u# {: V2 f2 n; |
<meta http-equiv="X-UA-Compatible" content="IE=edge">
' P\" w7 L, Q6 E! T( X* Y* b
<meta name="viewport" content="width=device-width, initial-scale=1.0">% C0 L. a% f( d# E, i( j: ?5 B! P7 Z
<link rel="stylesheet" >
5 k1 H( `# }& g9 w
<title>vector examples Keyboard</title>; E8 B( a M1 H ?! k Q
</head>( q+ ]/ q; y% o( K1 d0 _
<body>% E' b1 q3 s. b2 D. `+ y& j
<div id="keyboard"></div>: a A$ u: y1 v* H& o* C
, U7 H: M5 J0 y
<script type="module" src="./temp.js"></script>
8 s: v3 A1 O2 j. ]; E
</body>: n Z, E/ B# T
</html>
! I. l$ W) h\" R9 b

复制代码

import Interactive from "https://vectorjs.org/interactive.js";
+ e( v9 t) q. J0 Y# J( L
console.log("Interactive", Interactive);
0 E5 E4 O9 _/ v* c

复制代码

/**
0 o% L4 r\" W# @5 z( \: Z
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
* E3 ?9 O, v3 W' R: Y- M2 f( ^
* @description This interactive demonstrates how key board input can be used to add interactivity.
8 g% V. Y6 Z2 @* \+ w: Q6 Z4 v! P
* @tags [input]
, o% K8 Z; G( j4 q0 s
*/
7 F9 O\" p! p/ I
// import { Interactive, getScriptName } from "../../index.js";
7 z$ M- K) B5 A1 J6 s* w j
// let interactive = new Interactive(getScriptName());
! N& q- O( t* P- M( j2 J
import Interactive from "https://vectorjs.org/interactive.js";% u+ |' l% G# }: _
let interactive = new Interactive("keyboard");
3 Q6 N% @) Z0 j
interactive.width = 768;& \0 W- n; I2 I5 a/ ?
interactive.height = 300;) ]+ ]% m# |% d( a$ Y
interactive.border = true;' @( f( W- ]7 t M& M
let buffer = "";1 g0 U0 J+ Y& x: |8 X
let keys = [
4 v# A0 j M: r+ v
[
. N3 i; ]7 v4 `/ y! G; A
"`",$ @4 d2 \: ~: R& `\" b\" l: \
"1",. ~( H! c1 r- h\" i5 D! g
"2",, h' W8 X\" r4 Y- `
"3",9 ~) F0 A# j) p
"4",
8 Q( f' b6 ~- |. _2 s& Y
"5",# e9 u# M# z. W9 T o/ {' b+ k
"6",; z E0 r9 Y& ^* ?! g! x) V
"7",/ J* Z, `/ @7 S) V G3 U
"8",
; l& R1 J5 D7 y! o0 m
"9",* `# t; ?% O3 `6 x0 n- l
"0",0 m0 L9 O# W\" O7 n& b6 z/ }: T
"-",
) \1 n8 K6 t* u9 i
"=",# n% Z+ _5 ?& R& _/ g
"Backspace",( t- P9 h0 v, X7 t0 T7 I
],5 V1 c6 @6 t& G9 Y/ b8 |\" |
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
5 w. L% p! Y* f x
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],4 i; f) T- {2 G# r\" L0 g
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],, |; N\" x+ m- Q6 I4 F7 J
[7 Z, G! P$ M& W! E0 u& J
"fn", B) m' } j+ s\" V1 B5 v
"Control",) x3 Z: F/ [. x) Q3 K\" R\" O4 W1 r
"Alt",
5 y1 ]0 e7 K% Q\" J
"Meta",
' q M5 h' f ~: B( x: r
" ",\" v$ i% i' t2 F\" Q3 Z1 g* I6 |
"Meta",
Q\" J5 l5 U- b/ p2 Q6 f+ K8 d9 ?
"Alt",9 p- k- n6 H7 X# H y6 e) @
"ArrowLeft",8 \2 \. E' N0 \- S
"ArrowUp",
N- q4 t8 C: ]/ [6 M\" f4 B' z& f
"ArrowDown",8 [6 Q5 b2 D$ e! r; g
"ArrowRight",, {, j: o8 y; f
],8 z) c8 ~7 I) D% W) O8 R- t\" W
];
6 d. q8 ^* J$ s) v
let buttons = [];
% R- h R L' H$ i* T8 ~
let keycodes = {
2 v0 S* R y r! g
0: { Symbol: 0, Shift: ")" },
I7 X6 C! n9 `, m/ e\" b+ @) e
1: { Symbol: 1, Shift: "!" },
: L; ]- e5 G+ S( B: W: ?
2: { Symbol: 2, Shift: "@" },
7 N, U) X+ z7 _3 u
3: { Symbol: 3, Shift: "#" },( z6 w4 ]2 y3 p! o& }
4: { Symbol: 4, Shift: "$" },
5: { Symbol: 5, Shift: "%" },
+ u% a2 v! U+ _2 [
6: { Symbol: 6, Shift: "^" },! \, c/ ?2 n+ T0 o. }* A$ _
7: { Symbol: 7, Shift: "&" },
; _. x. o) `7 x2 e
8: { Symbol: 8, Shift: "*" },
* \4 ? N' e8 V/ D
9: { Symbol: 9, Shift: "(" },/ z7 p- | I( U9 j/ K# Z4 \6 x. k
a: { Symbol: "a", Shift: "A" },
1 k\" X- b+ _' L' s+ J: E5 V
b: { Symbol: "b", Shift: "B" },- x( r# n: P7 `
c: { Symbol: "c", Shift: "C" },% b9 e* u; M+ e( }
d: { Symbol: "d", Shift: "D" },0 }) M5 s6 l2 f4 j: Y\" E
e: { Symbol: "e", Shift: "E" },
1 G! ?7 c) S; c, x
f: { Symbol: "f", Shift: "F" },
& v4 m% e8 X8 S: W* o8 _) {
g: { Symbol: "g", Shift: "G" },
* V$ L* c4 M. |' i
h: { Symbol: "h", Shift: "H" },
N* h$ \+ \: I% z( L% _& _
i: { Symbol: "i", Shift: "I" },
2 J* ^, {1 `! J& z9 w
j: { Symbol: "j", Shift: "J" },
( C5 F( g) M, O9 a
k: { Symbol: "k", Shift: "K" },3 M% a, k! i7 v9 A1 H
l: { Symbol: "l", Shift: "L" },8 Y& _- C3 t. j/ q/ u, _+ C9 k6 L
m: { Symbol: "m", Shift: "M" },8 y7 {! g; D9 K9 b/ W
n: { Symbol: "n", Shift: "N" },5 A1 P\" Y- Q' X. [! s\" F
o: { Symbol: "o", Shift: "O" },4 G( C% z2 M\" z; t* R0 c; f\" {- K; _
p: { Symbol: "p", Shift: "P" },
+ I, T2 {! J# v0 z9 n9 k
q: { Symbol: "q", Shift: "Q" },
& d) `: H! \, Y! G
r: { Symbol: "r", Shift: "R" },1 O2 j- b& g. L, V- G( I1 `
s: { Symbol: "s", Shift: "S" },
. M5 {3 v0 B9 n1 }
t: { Symbol: "t", Shift: "T" },2 P( u' b0 j- m: z: Z; ^5 I5 g8 ]7 e
u: { Symbol: "u", Shift: "U" },# Z0 u' n7 L. `$ Y ]& `- A6 r
v: { Symbol: "v", Shift: "V" },; |6 B6 T, y3 f) u5 c! ?) {* a
w: { Symbol: "w", Shift: "W" },. `\" i3 E: q; N$ p\" T
x: { Symbol: "x", Shift: "X" },
! V( m- Z2 }/ C/ [+ A+ `
y: { Symbol: "y", Shift: "Y" },
`' H\" w, m0 W
z: { Symbol: "z", Shift: "Z" },5 ? ?6 t8 V' K) ]
"`": { Symbol: "`", Shift: "~" },
( T9 v& \, ]% z( z; v: B
"-": { Symbol: "-", Shift: "_" },4 l) n: _% n6 {6 X) c# a
"=": { Symbol: "=", Shift: "+" },
' ?3 E4 L; F7 m6 y\" @) _% m
";": { Symbol: ";", Shift: ":" },. @! v. j2 W6 J2 x2 [# l
"'": { Symbol: "'", Shift: '"' },. z6 O6 W9 G0 p8 [+ Y( C
"[": { Symbol: "[", Shift: "{" },9 e7 n. q: Y$ A9 @7 h' J3 J' u
"]": { Symbol: "]", Shift: "}" },
7 I/ b5 W4 E( W
"\\": { Symbol: "\\", Shift: "|" },
/ \2 _% g# J, I, i* z0 f, W
",": { Symbol: ",", Shift: "<" },1 |! e; w8 j# i6 h
".": { Symbol: ".", Shift: ">" },& t6 K3 ?' S6 h- j
"/": { Symbol: "/", Shift: "?" },
x T$ M, s# }; F7 e( a8 x% L
Backspace: { Symbol: "⌫", Shift: "" },
5 F( X7 s& d' j( M4 v
tab: { Symbol: " ", Shift: "" },
4 }* s, v0 z% g2 z# o
CapsLock: { Symbol: "⇪", Shift: "" },7 O7 J1 G+ y/ f* r4 S9 a
Shift: { Symbol: "⇧", Shift: "" },
( B7 R( @7 {, ~0 x9 I
Enter: { Symbol: "⏎", Shift: "" },9 |: w* t* n0 F0 K2 u2 U0 M: `4 f) O
Control: { Symbol: "⌃", Shift: "" },$ i' S1 h9 P8 y3 G% T9 O9 S
Alt: { Symbol: "Alt", Shift: "" },: Q! q) t9 P/ T3 \/ N3 I+ R# C
Meta: { Symbol: "⌘", Shift: "" },0 k\" {0 x. c9 c5 z& h m
ArrowLeft: { Symbol: "←", Shift: "" },8 ~: c3 n* J5 F# i2 d7 o0 N
ArrowUp: { Symbol: "↑", Shift: "" },/ b* j# V# ]9 P0 ?
ArrowDown: { Symbol: "↓", Shift: "" },
! I: i5 g1 L) W
ArrowRight: { Symbol: "→", Shift: "" },
4 U, w) W2 o\" s, G' T. t
" ": { Symbol: " ", Shift: "" },
+ m* g9 Y( d6 B4 y\" h) r2 h2 p- V
};! b6 |6 y( [1 G0 Z1 p: [
let buttonMap = new Map();
) E$ @- I$ d. P
let height = 32;
. |. ~& ]4 c/ O\" V( ^
let margin = 8;( B& z! x! F- u9 k) z. I
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
6 c9 O, z3 X- H+ M( {( A, |0 l
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
, U% ?! L) N; v6 u\" g\" U5 O
for (let row = 0; row < keys.length; row++) {
# f) l# p- E# g/ y- w- W/ J
let x = 32;
6 e$ w0 I3 z) c( B2 U' e1 c2 W7 C
let prev;! C% u+ t\" ~ R\" q; }
for (let i = 0; i < keys[row].length; i++) {( Q: C8 K3 w1 @3 U+ V
let key = keys[row][i];
; O% j- l1 Y% n8 O( C& z
let width = 32;3 j( M D% S. Z( u2 A
let button;
# @6 _7 x/ ~, B: a+ r4 X* l
switch (key) {6 ^( v$ y6 L* B
case "CapsLock":* w2 W1 B$ J4 H! j. R) e r6 U0 X* u# `
button = capslock;9 \% F7 ^0 `7 w1 s
width = 64;
( |) j- M# [, }5 }/ W5 n4 f' w
break;. B; z7 l# i: ]7 p, a( W! H: O; {
case "Shift":+ H/ s! X5 v' v: i# S
if (shift.x === 0) {
7 ^5 y: b: @2 S3 A! Q
button = shift;
7 j5 f( ]. ~, X6 ]- F\" M
} else {
& x1 c1 A0 u1 v. L
button = interactive.button(8 \\" u( d+ g\" C& C: L* T
0,& @0 |. G\" j3 a: t
0,2 _* D/ V4 e& D) U9 I* P3 D
keycodes[key] != undefined ? keycodes[key].Symbol : key
2 _\" ?% [/ a) [) z: \3 z
);
J3 w/ R# F. c- g# r/ ^' v0 W
}
0 S% _: I3 N4 b
width = 90;
8 Z: o2 K# S% A# }
break;
9 P4 |3 B3 s% @7 I) P! R4 p
case "tab":6 `0 |1 V7 @2 @7 O# |
width = 50;
+ y( H$ ?0 O2 U8 l' _
button = interactive.button(7 u) i$ T0 Y; h) Y
0,\" C! R1 B) s5 V% q# B, K3 J
0,
8 R0 ~7 y3 Y1 e% T$ h6 z
keycodes[key] != undefined ? keycodes[key].Symbol : key
4 F4 L* a+ _0 @3 n: b# Z: W
);
* U% y1 c1 M7 G) O) B
break;4 w' o6 F# N\" a2 j; V5 s6 i\" H
case " ":
$ k }1 }# x, c
width = 176;
9 E5 k6 ?' P/ p) y8 J+ B6 I' _. {
button = interactive.button(9 n0 u: i# D' Y9 K6 |4 H2 V
0,
4 G$ e' c2 y' z\" j% n; w: l: s2 x
0,
+ N! {& Z; l4 q2 t' k
keycodes[key] != undefined ? keycodes[key].Symbol : key
6 v2 f2 ]0 R+ h1 h4 @3 j
);/ D! J4 j+ G0 x% Y
break;' W6 u2 C: c5 X$ M- \* I
case "Meta":
$ K\" i: N% o T( k: F/ w
width = 50;
+ E8 }9 B( o6 H\" n. b& B( I# {
button = interactive.button(
8 H( ]7 y: D9 t9 T- Z: R
0,
0 r' ? z7 W2 C9 a: f
0,\" u# U3 m8 {8 D\" |9 [: {% M1 b
keycodes[key] != undefined ? keycodes[key].Symbol : key
. F j7 D4 f8 S. X
);
+ @\" i4 ]9 |+ I
break;3 D7 }! M+ g# V
default:
: w6 U. x% S/ o2 C0 h
button = interactive.button(& ?- @! u7 g8 b\" E) G& ]2 G5 ~
0,5 N( V5 U- ~/ F9 O* ?9 a0 E
0,1 d- L\" t* L. C
keycodes[key] != undefined ? keycodes[key].Symbol : key, ], F+ a4 q( Z2 H2 e$ e
);3 `/ T s& Q! h p1 q* f
if (keycodes[key] != undefined) {\" J4 f- Z2 W. ^
if (keycodes[key].Shift != "") {, x. Q1 A6 R, d
button.addDependency(shift, capslock);
. g3 E9 C2 H$ D8 s5 r
button.update = () => {
8 R. [+ V- J% f/ W ?! Z
if (shift.active || capslock.active) {
5 Y0 E3 r3 Y) V/ n l6 u1 H
button.label.contents = keycodes[key].Shift;
# R0 U# v. T$ X: I
} else {
7 o3 ~7 g) D- d% i7 M9 O
button.label.contents = keycodes[key].Symbol;6 n$ V, l& O2 S, r
}! N( H( R5 x1 ^% f: O! R+ v' Z3 b
};
Y3 y+ B1 G* l6 r' M4 `
}# K( E\" [* E V- E4 e$ {* V
}
: d' Y1 S; @$ t' W( J
}. N: ?* q# d4 W o+ [$ t6 \: Z
button.x = x;9 P- d5 g\" t. s: _; p& [7 |
button.y = 64 + row * (height + margin);+ P# `) w* g( ^& W: I
if (button.box.width < width) {
! S- q* a6 n$ L/ q! n. E
button.box.width = width;( e1 y\" c9 ?, ?; ]. `! R
}\" _3 g/ i1 R9 \5 B/ z
let bbox = button.root.getBBox();
5 ~9 @% n |9 J! M- J+ M% @
x += bbox.width + margin;
- ^* k3 N\" ^0 }2 T0 I5 w! e5 Q
buttons.push(button);, h! G1 y( l( g; G1 ]8 u
prev = button;
8 K, Z7 R, S3 L, f
buttonMap.set(key, button);
3 E! E1 o: y& h: k' r
if (key === "ArrowUp") {6 ~. g* s4 e' _% ^9 ^
button.box.height = 16;
$ W+ G2 ?9 h2 b& p7 [! r
button.label.root.style.display = "none";$ `% ~( ^- R2 Q\" x0 A
} else if (key === "ArrowDown") {
2 Q+ @9 l6 m6 O
button.box.height = 16;/ s\" X2 t! P\" m7 r
button.x -= 32 + margin;
' W/ v# Q* ^6 ^. b
button.y += 16;
$ e ]9 |6 B% E
button.label.root.style.display = "none";/ ?7 B2 W$ L& s
x -= bbox.width + margin;; e# L Q: L& x
}: o! J- B- E5 J: w9 V$ }$ C
}- t! n( H( e- P: ?. N
let right = prev.x; O! [( v% x' {% t. E9 S
if (right < 630) {
9 H, b0 z; y: s: ^
prev.box.width = 630 - right;: J7 e4 R/ }$ `; {
}1 n( i7 m# h/ l( l& d
}
$ b4 b8 K1 R\" d' j, @7 U. I
// console.log(keycodes["0"], shift, capslock);
& L% J+ ^- D! D# n8 N' [
let active = [];; p2 P) E& ^+ A
window.onkeydown = function (event) {
. p. m\" N& t& q6 `) T3 ^( ~
for (let i = 0; i < buttons.length; i++) {, Z+ |( Q4 A3 c
let button = buttons[i];
& |\" g, L\" _' D! B: v
if (
button.label.contents === event.key ||2 c: B2 P; u$ g# k6 V) ^
(keycodes[event.key] != undefined &&# n3 `; F- h. b+ p$ G; P
button.label.contents === keycodes[event.key].Symbol)1 A& ^9 X+ N& a% Z
) {
5 u* b0 ]3 k2 s3 b
button.box.style.fill = "#f8f8f8";
2 ~* @9 B1 t$ B
button.label.style.fill = "#404040";/ Z0 |' k6 W+ y- J
button.active = true;
9 D' z! y# U: E3 f' L8 U
active.push(button);# D1 P( B% r) K9 T3 v
}
8 u/ c4 n5 G$ ^
}
# ]& _1 `4 Y\" I
buffer += `'${event.key}',`;3 M) s% E J5 y: E5 {: |3 }( |: B
};
4 ]$ J) x3 a, l. Z5 `* E
window.onkeyup = function (event) {
8 R2 X! s\" Z7 B* h) Y% Z; l6 T- |
let newActive = [];
) X0 r; Y) D n. B2 c, W\" [
for (let button of active) {
) ?! }1 _( @/ N- Z! y
if (4 I\" y5 r6 @2 z\" C
button.label.contents === event.key ||$ N1 j6 I& m\" P5 e: o
(keycodes[event.key] != undefined &&
& L, _' G- {. T9 G* q* `2 i
button.label.contents === keycodes[event.key].Symbol)
! W! p1 U& u\" J( ^; }' i
) {
: h8 H4 i; i7 m, d3 T9 v3 Z8 V2 H1 K$ M
button.box.style.fill = "";- X9 k6 ^# t6 ]5 Q' `- C
button.label.style.fill = "";9 ~+ |2 a( k, K9 Q: h
button.active = false;
} else {9 w0 S2 m) i9 f: d! [* h% t\" M. c S
newActive.push(button);
9 B. E# T, x2 t5 @. {
}1 L\" I4 d: _. v. B
}
/ L1 ~. L2 V/ _, k' l) P/ |5 R- l
active = newActive;) {* i2 w\" V! v2 {3 F
};
1 _! j9 R) U- ]9 x
let bbox = interactive.input.root.getBBox();
' o2 X, S\" ]3 W9 c3 ~/ Y) R
interactive.setViewBox(! c3 H9 l* k# ^: o; N9 q8 W% T, H
bbox.x - margin,
1 z, s. A7 A+ [+ k
bbox.y,
5 y0 U1 ?8 ~# t) s$ }3 D* r
bbox.width + 2 * margin,
7 K\" ^ H+ w) _
bbox.height
' z6 ^: p! C. _. X4 |
);
2 y5 ^; e: `( A6 H' P. S0 A6 v8 @
//# sourceMappingURL=keyboard.js.map( [\" x [: O1 V& ^# `, b
\" Z) S3 Y* p\" f7 x