数学建模社区-数学中国
标题:
使用html画一个键盘
[打印本页]
作者:
2744557306
时间:
2024-4-27 10:42
标题:
使用html画一个键盘
<!DOCTYPE html>
& q' Z- e' `8 v% l9 h7 b: k
<html lang="en">
7 i8 ^) `8 F: h( w6 }2 F7 i
<head>
: @) J% D3 t/ N, M
<meta charset="UTF-8">
% K; u( S7 u t3 {9 z" I- g
<meta http-equiv="X-UA-Compatible" content="IE=edge">
' s% x& |0 H" Q( t L- O) a
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ Z& @2 n6 w8 \$ a6 N" {
<link rel="stylesheet" >
: {! k$ H( c+ u/ m
<title>vector examples Keyboard</title>
' \" J D, _/ U" r1 _* H1 R
</head>
+ Z4 f2 Q& @" K1 q! B$ _, j" I
<body>
! Z* c! R# D) U0 ^- l6 F- _+ g
<div id="keyboard"></div>
+ @1 q9 S3 o" S0 a3 f
<!-- <script type="module" src="./Keyboard.js"></script> -->
) s" g8 E, {2 C$ j! E9 D. @9 s( m
<script type="module" src="./temp.js"></script>
' t+ d/ q. ]8 j0 |: Q
</body>
& {+ f) N' E* O0 G- i. m# d+ x
</html>
! s4 q2 L) A3 K
复制代码
import Interactive from "https://vectorjs.org/interactive.js";
6 z* W- _* T+ N0 j; Z
console.log("Interactive", Interactive);
O3 ^: o8 r* {$ D+ l6 }/ {' N
复制代码
/**
( B: o& W w5 m1 k3 w. \
* [url=home.php?mod=space&uid=634908]@title[/url] Keyboard
- r0 L% d5 t: E: J: N1 `
* @description This interactive demonstrates how key board input can be used to add interactivity.
/ Y/ W: c: t4 s5 r9 O; e
* @tags [input]
% ^2 \+ t7 c! z6 O3 J! m
*/
U: @, P5 G+ }6 |( L
// import { Interactive, getScriptName } from "../../index.js";
! N; h8 z- g: t' N) T- j
// let interactive = new Interactive(getScriptName());
6 ^% w' Z/ w, k, w$ h1 R
import Interactive from "https://vectorjs.org/interactive.js";
/ O [8 k1 D) \# S
let interactive = new Interactive("keyboard");
& V) B, O: X$ P
interactive.width = 768;
. G/ d' i5 }- _$ `; d0 H3 x
interactive.height = 300;
2 b* \* o9 C: j, h }
interactive.border = true;
, c; f# S- i# r, T6 e
let buffer = "";
8 x4 q* @' T# g& O
let keys = [
4 p# \$ h0 y. A
[
' s2 c% z8 x- J) P7 d- }+ U
"`",
* p+ \: q) H- k; Q' ?- U: W
"1",
! I4 {) \/ \2 o. H4 u9 Y+ K
"2",
& @) f# S& _6 d0 E# [
"3",
8 u+ D5 t' V) D8 F0 m# i( K
"4",
- ~" p7 N$ D3 T' t1 e
"5",
- t/ L% H% s z* x; [. u" r: p" g. F
"6",
0 s9 Y8 j F+ E& b% q2 W* {
"7",
* G& F& f8 b% L4 O: ^. _
"8",
% b7 y7 C$ c) f+ H3 Q- k) \
"9",
6 A5 t$ s) J- C1 b! b
"0",
; G! @9 Y3 C. g/ m
"-",
6 @" f% ^; G; H- V# x" a, n
"=",
0 u+ U- r$ c6 C0 I6 h
"Backspace",
/ x& d/ ?$ v R u) e n/ T; G) i
],
2 Y( Q" o, n3 I/ ?) D
["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
1 {) |+ Q4 U$ j% ]& l- h
["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
' _7 a" a' \$ e5 i
["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
' D7 e8 w& z: p1 Y- p
[
1 H' Q: W3 S, L
"fn",
/ [2 E- ]3 D: u# v# O
"Control",
& y/ A) o. s' _+ X+ s
"Alt",
, @% M7 ?; z( s3 C
"Meta",
: O) I9 d, M3 I1 |2 }+ _5 h
" ",
' K1 l, P2 v8 p# ?: Q$ V, R
"Meta",
# {" u# M$ I( W) {6 Q
"Alt",
) |0 q( w5 g1 i8 R- }1 y2 Z0 h- g
"ArrowLeft",
1 N' k$ j9 G! |6 p: s( Y& o
"ArrowUp",
' i8 c8 p( N' w! N! `
"ArrowDown",
e9 U- l3 R; g
"ArrowRight",
9 m* @4 W1 Z% X2 D! L: L8 N
],
! H& t; O$ t0 g
];
! P7 v/ l; l& u3 t. O% [
let buttons = [];
6 a( r" p3 z' |- O
let keycodes = {
- V: B& X9 L5 K; E8 N
0: { Symbol: 0, Shift: ")" },
5 N* Q8 m$ M# j% m4 b6 }: \7 } G* E
1: { Symbol: 1, Shift: "!" },
5 k7 }# n/ I) X9 P# o- |" S
2: { Symbol: 2, Shift: "@" },
( Q( B/ X0 z$ Y8 m6 I* J% j
3: { Symbol: 3, Shift: "#" },
8 m$ v" n+ M8 z6 z5 H/ D6 r( S4 m
4: { Symbol: 4, Shift: "$" },
9 W0 V! \% O- z+ C1 t5 Y8 K8 I
5: { Symbol: 5, Shift: "%" },
. H# z/ p, e" g: Z
6: { Symbol: 6, Shift: "^" },
! |: u) q7 ]( }! `) Z, i
7: { Symbol: 7, Shift: "&" },
1 o! C) L& U* {# V. W. u0 N* Z# X
8: { Symbol: 8, Shift: "*" },
* G8 _' z/ H& V8 I
9: { Symbol: 9, Shift: "(" },
' q3 K9 ?" e; E/ X5 R4 r* p" P
a: { Symbol: "a", Shift: "A" },
/ _4 ^5 T1 S6 ]7 Y" @& |4 z
b: { Symbol: "b", Shift: "B" },
, J, B7 O8 {; w$ h1 ^% `* s) ]" G
c: { Symbol: "c", Shift: "C" },
& I2 ?) P, T1 l# M2 ]
d: { Symbol: "d", Shift: "D" },
& p3 F7 Z- U3 y% ^
e: { Symbol: "e", Shift: "E" },
, c9 S, N3 f# g9 L) T9 _( v9 B
f: { Symbol: "f", Shift: "F" },
) t+ @& z" I" e( X: [4 n: k& W
g: { Symbol: "g", Shift: "G" },
* g/ Y- Q# h* E
h: { Symbol: "h", Shift: "H" },
8 A% I) p8 g$ {# B* M/ O H
i: { Symbol: "i", Shift: "I" },
3 I/ G$ a! x5 R6 ]% d
j: { Symbol: "j", Shift: "J" },
/ W, \: ~2 ?' s2 D' H' O
k: { Symbol: "k", Shift: "K" },
8 [9 G/ E8 a& @. v3 C+ u/ L0 b: a
l: { Symbol: "l", Shift: "L" },
3 N2 O% s. M. O# g2 U. ]5 m
m: { Symbol: "m", Shift: "M" },
. L+ u; i2 Y- M8 N3 l3 V: G- r: n
n: { Symbol: "n", Shift: "N" },
3 R, |. q0 v, J1 H, s# @
o: { Symbol: "o", Shift: "O" },
0 X: r& j: W( [: p
p: { Symbol: "p", Shift: "P" },
. G0 L, c/ z H
q: { Symbol: "q", Shift: "Q" },
9 s/ M6 U# f2 I
r: { Symbol: "r", Shift: "R" },
' r {9 W! a: p R$ Q$ B5 m8 \
s: { Symbol: "s", Shift: "S" },
! M; C; X! r( q" t; m: L( x; V# _
t: { Symbol: "t", Shift: "T" },
) q' a& _- Y, w6 s3 i% b8 C0 i
u: { Symbol: "u", Shift: "U" },
/ ?, R: y- C& f9 c( @
v: { Symbol: "v", Shift: "V" },
# V3 K2 X% Z1 ?% |
w: { Symbol: "w", Shift: "W" },
# W+ Y/ ^) M( E- t; x! Z
x: { Symbol: "x", Shift: "X" },
, W2 N( J4 }. m; P
y: { Symbol: "y", Shift: "Y" },
& h, U- F2 O3 Z, Q. U( q
z: { Symbol: "z", Shift: "Z" },
) X- p. ? D u* r; m- n
"`": { Symbol: "`", Shift: "~" },
% ?* s+ e- A0 c6 R5 Y# m4 |' \1 H
"-": { Symbol: "-", Shift: "_" },
0 Z. x" e2 {2 P5 M. |& U
"=": { Symbol: "=", Shift: "+" },
5 M+ {6 x. p: ?' d, [$ n- k
";": { Symbol: ";", Shift: ":" },
( N$ i1 }8 ]* P g7 i# T
"'": { Symbol: "'", Shift: '"' },
0 N+ L2 C% g# p" s" K
"[": { Symbol: "[", Shift: "{" },
* d3 e9 X, J( ? r7 W- S4 m
"]": { Symbol: "]", Shift: "}" },
! ?0 E; Y6 b% s" w' v
"\\": { Symbol: "\\", Shift: "|" },
2 I* X- m' n9 ]" K0 N- D5 Q
",": { Symbol: ",", Shift: "<" },
' ]8 c4 V5 T/ S0 t, [$ J
".": { Symbol: ".", Shift: ">" },
) [/ y) Q. Y; y' k1 w
"/": { Symbol: "/", Shift: "?" },
0 n% n% v: n& y O# V1 J Y
Backspace: { Symbol: "⌫", Shift: "" },
4 U0 l# W* h* L
tab: { Symbol: " ", Shift: "" },
0 @- h3 F! H3 A& Y
CapsLock: { Symbol: "⇪", Shift: "" },
. h* ^7 `+ t+ ~
Shift: { Symbol: "⇧", Shift: "" },
1 q+ M- `0 U, I9 r& w3 @% I9 B% D9 v+ W5 k/ Z
Enter: { Symbol: "⏎", Shift: "" },
* f% t/ i' j1 n7 e% n+ c* p
Control: { Symbol: "⌃", Shift: "" },
7 e' _1 E+ |' X, D8 X7 o
Alt: { Symbol: "Alt", Shift: "" },
7 T0 G( V' f0 K& B
Meta: { Symbol: "⌘", Shift: "" },
4 M1 ^6 H: \8 x9 J+ ]# S; U0 _) b
ArrowLeft: { Symbol: "←", Shift: "" },
6 h* A7 n, T' s: M' Q' S
ArrowUp: { Symbol: "↑", Shift: "" },
" m& f ^; i# F; u7 F
ArrowDown: { Symbol: "↓", Shift: "" },
5 ^" |4 Z' l2 F' M T5 d4 |
ArrowRight: { Symbol: "→", Shift: "" },
; H. X6 W" z+ c; f
" ": { Symbol: " ", Shift: "" },
) ?( V/ q- [6 s
};
( l. Y! N) ^0 Y x
let buttonMap = new Map();
. t o. L, t4 E) F+ k
let height = 32;
$ m7 R, j& ^1 _3 F. ]; D
let margin = 8;
( Y7 \1 b/ |- J3 \/ y, x
let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);
{' K: v( ?1 K+ B) I( `# Q$ J
let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);
8 r. I+ i7 g2 C* W3 ^
for (let row = 0; row < keys.length; row++) {
7 |9 c+ S8 G0 d M0 K3 m+ F5 C7 V
let x = 32;
5 b/ u# a3 c3 s9 S1 ]8 d
let prev;
4 C+ r% j- Y% d4 d
for (let i = 0; i < keys[row].length; i++) {
- N- _% |2 o- _* C$ ]7 E6 ]8 S
let key = keys[row][i];
, ]; f# u @; H9 Y8 z @ L$ H
let width = 32;
! a. y7 W" }" H1 v6 A! ]
let button;
- N! W9 ?& h! A t8 ?0 P! _0 n! D
switch (key) {
; j+ G2 N& e3 j4 X. |/ E. O7 D0 p
case "CapsLock":
5 R' L" c3 J5 a
button = capslock;
; j# ]5 R" L5 p& Y) f/ x
width = 64;
. S1 w F# a' l" l
break;
: @9 r9 O0 L% j1 N6 R
case "Shift":
5 F' q! i! b; q- A
if (shift.x === 0) {
& o* s* \- Y9 J6 j2 T! E
button = shift;
0 F! y; d4 l+ V
} else {
' w4 ~: O( M0 s* t3 d
button = interactive.button(
3 R8 r8 o% N2 ]2 X5 _1 ?
0,
* g& U; z6 ?2 B5 c, D7 Q! @6 X; R
0,
" D# F9 U! ?" P0 w+ M* j
keycodes[key] != undefined ? keycodes[key].Symbol : key
! s B: m+ m# Z4 e" U* S8 H" h- g
);
& Z9 k6 J- c# p6 z9 m6 [
}
4 Q4 _+ L; F: G# ^; k* T
width = 90;
" w7 n( n' c0 B# E" A, L
break;
# Z8 e+ J2 z. }! f/ U- q9 F, _
case "tab":
9 E+ |4 }1 _4 r
width = 50;
9 ^9 b5 d4 u1 Q* u9 g
button = interactive.button(
, D* z [% F) e) V. G/ z$ l) Y
0,
# g% G% |+ d! x0 x9 ]
0,
+ P `- J# v, q& ~" Z
keycodes[key] != undefined ? keycodes[key].Symbol : key
! P; v+ Y* D# g) z0 W8 G5 k6 M' P
);
B6 Q( j& g' `: ~+ O6 V
break;
9 l6 m+ L- y5 V; K
case " ":
4 q; K" N- L0 @. q( y: m0 X! L( v
width = 176;
0 y' v# B% u/ X2 n
button = interactive.button(
d3 z5 f6 S- i$ Y& R0 }) v
0,
3 w+ o3 `+ A1 A) b, b) n2 A; D
0,
$ `+ B; T# O/ B2 E3 @& t# C) P
keycodes[key] != undefined ? keycodes[key].Symbol : key
. k- U* P% o$ C6 D* _+ r8 L
);
* j" N6 a- C, l7 Q( c4 u& [8 T- H
break;
+ R4 A" q+ M- }; Z2 O
case "Meta":
# i0 c: @! x1 V0 O- u0 |
width = 50;
+ g7 A$ W, v1 V( X
button = interactive.button(
* c3 V# {5 N# f. C2 X2 ?7 ?
0,
# y3 V5 j! d: e' \; r
0,
* ^; [# w6 Z( B5 ]. R( V. N: z
keycodes[key] != undefined ? keycodes[key].Symbol : key
3 @; P- y" i6 A7 d: W
);
1 H1 c5 }5 C, W1 Q$ N% I
break;
% q% Z2 i1 a! |8 _3 y
default:
% w. T0 Y1 D- u8 f
button = interactive.button(
) G/ R/ s( J8 [) p0 e+ d; e
0,
j9 t5 j- }& f3 L% H8 ?
0,
5 b4 E' X0 m) N
keycodes[key] != undefined ? keycodes[key].Symbol : key
' v/ J. {* H! ^3 Y4 H4 {- \" k
);
* I! d$ z* o( n+ Q/ d
if (keycodes[key] != undefined) {
/ x1 H( l% j! d/ ~! E$ I
if (keycodes[key].Shift != "") {
( m' w2 \- N3 L( _" Q# e
button.addDependency(shift, capslock);
; j" ^# i1 J0 O- k
button.update = () => {
3 } J' s2 V7 |1 g
if (shift.active || capslock.active) {
y. R- h( {: @' k
button.label.contents = keycodes[key].Shift;
7 A# n6 }0 |8 x D8 D4 ?
} else {
, f" e. R! ?% n7 t" g+ W9 e) e) H
button.label.contents = keycodes[key].Symbol;
6 ?2 {2 y6 _. }* g, K: s4 \, ?
}
2 U) `7 J/ r$ R* o6 ? e! Q3 h
};
2 A4 d- P! ^5 k: q( V
}
X4 o; o" g* e* f% I$ @
}
5 O) w- h- ^% q, Y+ Z
}
# ~" T9 G T; y# d7 ~! Q# V
button.x = x;
3 ~, M9 @$ K% {& Q+ Q" X9 l$ H
button.y = 64 + row * (height + margin);
2 x1 n9 Y( \4 F2 }. C4 {
if (button.box.width < width) {
' R* \: b) Z- k; X" f' m
button.box.width = width;
6 D7 G5 q8 Z1 `6 G5 `5 m
}
! O; v q+ V, A
let bbox = button.root.getBBox();
- I- K! `- v$ b4 T: Q5 ?' k
x += bbox.width + margin;
8 e4 Z/ d" T9 p- ~
buttons.push(button);
( k, @9 T. E6 H) X. Y) H7 b
prev = button;
" o+ f& x: \3 B, s& F
buttonMap.set(key, button);
0 k1 k3 n0 [8 G; F7 y
if (key === "ArrowUp") {
p$ W# d) M. P( ?" |5 v& V t0 Q
button.box.height = 16;
$ P8 \3 x; @) G% x, c( R
button.label.root.style.display = "none";
' p3 h5 g. N. d9 B; k
} else if (key === "ArrowDown") {
+ Y) J# B, b4 M# m. m5 c( r% q' p
button.box.height = 16;
; P% t6 Y( ~# Y! x
button.x -= 32 + margin;
& U5 P' P* |" h* G# X* n" K
button.y += 16;
/ B1 w; E$ W- z/ Z* T: A
button.label.root.style.display = "none";
) b, ]; l. }+ n0 b; g3 v
x -= bbox.width + margin;
: ?) F0 j" g* [$ n
}
- G1 E0 ]7 D; T9 b
}
" A0 S' q) q k; E5 O( |
let right = prev.x;
^8 I B% R" M" L+ f3 o/ p0 d' s% i
if (right < 630) {
9 y7 A7 J" e/ V: c0 s; b& K2 p6 s
prev.box.width = 630 - right;
$ W! u/ k/ W0 H/ o# |- N6 C$ Q
}
3 Z: [& ]6 g" e' Q1 ^) l" |, Z I
}
8 P" Y3 u7 z3 n1 D" d v
// console.log(keycodes["0"], shift, capslock);
! O7 n& E" Y4 C' y5 c. K6 S1 N9 ~
let active = [];
, k- ~$ V2 ] p- p. |
window.onkeydown = function (event) {
& ~7 G5 |4 {; U j: B1 y! g9 J" e
for (let i = 0; i < buttons.length; i++) {
9 Y" L6 J# P+ x8 z: N$ q4 S6 F6 q
let button = buttons[i];
, W' y) K: g5 t! R3 C" B$ ?! n
if (
& `2 x. ]# C" b* G. `
button.label.contents === event.key ||
) T' N% c; t. ^+ J
(keycodes[event.key] != undefined &&
& O7 a' k' g/ ~0 @
button.label.contents === keycodes[event.key].Symbol)
; ] E% Y6 Y/ d
) {
5 t0 ^+ I# V" N, J# Q) q6 R Z, K
button.box.style.fill = "#f8f8f8";
4 X- @! T! ~- L6 w \
button.label.style.fill = "#404040";
& J1 P/ m$ n' r Q% N
button.active = true;
0 ^3 { z1 W7 U& W/ Q
active.push(button);
0 _ [2 T5 K# X2 P' P" F) [
}
# _6 ?$ F) ^) O7 ?9 o( \
}
1 K( R8 ?4 K6 o3 J: {/ \6 t
buffer += `'${event.key}',`;
+ ]$ u: ~% u0 E: m- y" X
};
, n& K- _+ w; T) M1 |0 }
window.onkeyup = function (event) {
4 B1 ~0 z& @+ i- w' q$ r3 W+ _
let newActive = [];
# }0 k( U# E- y2 F5 |
for (let button of active) {
6 U* ^7 M6 N' ^$ P& U! _+ H
if (
/ N9 ? j& I9 M
button.label.contents === event.key ||
( A3 d1 c+ F- ~4 Q/ p; J
(keycodes[event.key] != undefined &&
% b7 }5 f" A$ J! p+ ~1 t
button.label.contents === keycodes[event.key].Symbol)
: G5 i. h7 U6 K/ F2 C. z
) {
2 a; |) g* [5 G; l
button.box.style.fill = "";
6 P* b- y$ |; q5 H: k2 ~
button.label.style.fill = "";
5 [$ ]2 m" a4 L) ^, F
button.active = false;
, M% |/ q$ O! S
} else {
8 x g+ X, w# f4 R& D4 ^
newActive.push(button);
/ w$ z# P3 i. Y: a' U
}
' R: u/ D3 w! T" M
}
- Y7 r4 B% w0 M9 @$ C
active = newActive;
. o5 o* N1 _& Z& U
};
0 e+ @1 B% E1 p" O, s8 I/ Y; O8 i& N0 j
let bbox = interactive.input.root.getBBox();
# u4 u9 g- t: F! I
interactive.setViewBox(
- r$ q; B- H1 \) {" ^! X
bbox.x - margin,
* e9 N* L/ I. q
bbox.y,
" Y% _3 W5 ~. _0 Z3 }( U
bbox.width + 2 * margin,
. k" p& Y# P7 T7 S8 c; }2 H% Z- ]
bbox.height
5 ^5 ~# |( O8 o! @1 Z
);
# g) A+ M+ x- x" Q
//# sourceMappingURL=keyboard.js.map
$ T, C& R$ W1 J, s5 A6 Q# h
e3 q# B+ B' i+ j6 r0 Y
复制代码
+ p2 q8 U3 o3 V
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5