数学建模社区-数学中国

标题: 使用html画一个键盘 [打印本页]
作者: 2744557306    时间: 2024-4-27 10:42
标题: 使用html画一个键盘
  1. <!DOCTYPE html>0 q$ f- L* D1 {" t& b# O, z/ ]
  2. <html lang="en">
    ; Z9 F2 Z1 F9 E9 T# r# r
  3. <head>
      i4 W1 |# Y/ m" T% o) x  U
  4.   <meta charset="UTF-8">4 q! @: M4 F) x% t3 X" s
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    $ x+ F/ r8 X" N8 D6 R' {! z. z
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ) ~! D8 U* W  ?
  7.   <link rel="stylesheet" >
      a. O  G8 U1 y  K/ H- U
  8.   <title>vector examples Keyboard</title>
    2 i4 }$ Z; j& d( E  B
  9. </head>4 l) Y2 I  o7 f" e" F0 i% M2 b- p
  10. <body>
    4 \3 j& }9 d. I: c! }1 m* R$ X" c
  11.   <div id="keyboard"></div>) E* M& g! ?# l
  12.   <!-- <script type="module" src="./Keyboard.js"></script> -->( S- U1 w1 S( ~5 k0 p; c
  13.   <script type="module" src="./temp.js"></script>4 }3 R# N( f; L2 W7 C6 F! @' |
  14. </body>2 W. ^6 a$ Q( y1 x
  15. </html>$ z4 L# h$ s, }1 ?+ r- J
复制代码
  1. import Interactive from "https://vectorjs.org/interactive.js";
    + o  q  L9 m# P* {9 w
  2. console.log("Interactive", Interactive);( t- m9 m6 e& a4 y5 ]( i8 b" w
复制代码
  1. /**
    + y. r; f6 t# h
  2. * [url=home.php?mod=space&uid=634908]@title[/url] Keyboard0 |" x9 c+ i2 K' p6 `" [( ]
  3. * @description This interactive demonstrates how key board input can be used to add interactivity.
      K2 N  E% e* ^- Y9 ]; ]
  4. * @tags [input]. j( C  J+ v8 U) p1 t, W0 a  K
  5. */
    7 \. \) n+ t$ y# x3 _! U" y- R3 ?
  6. // import { Interactive, getScriptName } from "../../index.js";8 \) ]. N2 d% ?; W8 b
  7. // let interactive = new Interactive(getScriptName());; g. r$ `8 ^# R  U. V% [9 i
  8. import Interactive from "https://vectorjs.org/interactive.js";
    3 q: I+ [: F/ U  t; |! a
  9. let interactive = new Interactive("keyboard");
    6 r, k+ g& ]  o$ S. y% Y5 G
  10. interactive.width = 768;
    9 u  i" E- y8 h- a( |/ i' `: I3 r
  11. interactive.height = 300;
    0 n+ l. {. m& |" ^4 E$ A
  12. interactive.border = true;
    - X; L/ {# Z4 Y5 Q# T: W
  13. let buffer = "";
    4 S, q) z# C  S- ]3 c7 o
  14. let keys = [, }, O: x" b6 X
  15.   [
    + z6 l' _9 ]3 c9 c" c- x
  16.     "`",
    2 B- N/ z8 i0 w( W% A
  17.     "1",
    - P7 O& K5 ~# p* V" d) ?
  18.     "2",
    4 L8 X- r% l% Y8 G
  19.     "3",
    - |" D# d% ^# t4 _) o/ K3 A8 v
  20.     "4"," X. ^2 ]2 m2 e6 ?$ E
  21.     "5",2 D. Y5 F4 m6 B9 X( k2 {+ w
  22.     "6",; X5 f+ w- t/ Y% }7 q8 P/ w  {
  23.     "7",
    + G$ d2 _( W1 d6 e) Q2 C
  24.     "8",' O3 g  o3 S& u2 C
  25.     "9",
    3 K2 q! I* ~; F7 B* p
  26.     "0",
    % y4 x: L6 Y/ O- ^/ T8 t, W" S
  27.     "-",+ k; f% f# B5 `3 p
  28.     "=",. C; O/ n& v4 H+ i  [
  29.     "Backspace",/ s9 _# }* A/ d9 x7 s( f
  30.   ],0 U* v3 x% S3 n# g1 e# ?
  31.   ["tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
    - P: y+ y4 v. d6 m4 w5 W- J  r5 U
  32.   ["CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
    $ T& I0 U. ^. H2 _  }- P
  33.   ["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],7 d: `+ N9 T/ v8 {  D3 l- d
  34.   [! |5 w, P4 x5 A: y. q; p
  35.     "fn",* j) j) k, Y* v& @1 L7 i& H) T
  36.     "Control",
    $ u) K9 D1 f8 f
  37.     "Alt",4 z& ~) e) j3 G5 m% Y6 U/ B
  38.     "Meta",3 b* }6 w. L( T9 @4 B% K+ i
  39.     " ",6 y; d9 Z) c) l; g' {/ `
  40.     "Meta",
    * v0 _4 T! S; L- Y' Y
  41.     "Alt",1 a8 [/ g) w" h* |" C
  42.     "ArrowLeft",7 f3 g6 N* s( w( L
  43.     "ArrowUp",8 F& Y3 G5 E6 }; Q6 m/ M
  44.     "ArrowDown",
    1 H5 h4 m' h% \5 U- c2 U3 k
  45.     "ArrowRight",5 v  X: F' E0 X# c
  46.   ],
    7 [* N7 A+ N1 P, j
  47. ];, P/ S0 J$ O' D: a5 x
  48. let buttons = [];+ m# h; m& I) A2 f  W, ~% f2 c1 z
  49. let keycodes = {! a2 J2 O0 f6 C& u
  50.   0: { Symbol: 0, Shift: ")" },
    # C, y7 N# M( [: C7 }! L
  51.   1: { Symbol: 1, Shift: "!" },) P4 S8 a6 f1 W) v/ y: }, T6 H
  52.   2: { Symbol: 2, Shift: "@" },
    4 D. Q# @$ r& ~* f7 U
  53.   3: { Symbol: 3, Shift: "#" },) E+ [! i/ C0 c% g4 S+ D
  54.   4: { Symbol: 4, Shift: "$" },  Y5 b4 f* G# U9 K. }7 b
  55.   5: { Symbol: 5, Shift: "%" },  A# q# G, ]" N$ b3 p) @8 r
  56.   6: { Symbol: 6, Shift: "^" },
    : H, W/ Y9 p$ \; D+ d& \) k
  57.   7: { Symbol: 7, Shift: "&" },( H% y- e* Y& Y  H
  58.   8: { Symbol: 8, Shift: "*" },/ ?/ s+ F) J" {: n7 k- Y
  59.   9: { Symbol: 9, Shift: "(" },7 c' i3 Y9 I9 p) m$ j- m
  60.   a: { Symbol: "a", Shift: "A" },9 b% j, ^/ L2 n' ^
  61.   b: { Symbol: "b", Shift: "B" },! `0 q9 T1 _" A1 N2 j
  62.   c: { Symbol: "c", Shift: "C" },
    : r. C8 R5 T! K1 ~; r# T. W3 V
  63.   d: { Symbol: "d", Shift: "D" }," m6 C& [- w1 ?; ~# z( L% w
  64.   e: { Symbol: "e", Shift: "E" },
    3 M* m7 _! U4 y5 m$ `: x0 |
  65.   f: { Symbol: "f", Shift: "F" },. E! G- @7 z6 m7 u" C" M- Z
  66.   g: { Symbol: "g", Shift: "G" },0 {. ?& B2 `4 G
  67.   h: { Symbol: "h", Shift: "H" }," r$ R) I# _- f. K! p% J; \
  68.   i: { Symbol: "i", Shift: "I" },' B' u3 J0 |' ^, p
  69.   j: { Symbol: "j", Shift: "J" },
    % L, g# Q8 T! p" y8 T
  70.   k: { Symbol: "k", Shift: "K" },
    & k) X5 e5 W# F7 `# B
  71.   l: { Symbol: "l", Shift: "L" },3 D2 k) _% |$ j2 d& d+ g$ p
  72.   m: { Symbol: "m", Shift: "M" },
    # {( B3 Y( J& @+ @/ d. w% |
  73.   n: { Symbol: "n", Shift: "N" },7 i8 R' w6 [. }  T  W$ A
  74.   o: { Symbol: "o", Shift: "O" },
    8 q. y, P" ]; N/ e' k
  75.   p: { Symbol: "p", Shift: "P" },
    . h4 s1 t0 L8 z( s* S# ~8 p! s
  76.   q: { Symbol: "q", Shift: "Q" },
    3 z% t* L2 H. X+ w
  77.   r: { Symbol: "r", Shift: "R" },
    ( r1 _! x; x  ~( R7 Q: s
  78.   s: { Symbol: "s", Shift: "S" },& W2 e7 M6 r- L: o* b
  79.   t: { Symbol: "t", Shift: "T" },
    % X( r* R' {5 t' b) o/ A, J( }1 G
  80.   u: { Symbol: "u", Shift: "U" },  {" g" e$ m3 q' y' X% l1 e9 E
  81.   v: { Symbol: "v", Shift: "V" },
    ) }7 v7 O" `$ Y) N9 H
  82.   w: { Symbol: "w", Shift: "W" },
      [: w! U5 w, o5 ^+ Y7 v
  83.   x: { Symbol: "x", Shift: "X" },
    4 g' O( t% }/ p+ _* @6 {8 Y, v
  84.   y: { Symbol: "y", Shift: "Y" },
    ; O# F- g8 @0 u; m. A! T/ E
  85.   z: { Symbol: "z", Shift: "Z" },8 C/ ]0 t9 o' w9 X
  86.   "`": { Symbol: "`", Shift: "~" },
    ; ^9 ~5 d: w% l8 F% u! n; n* H; z
  87.   "-": { Symbol: "-", Shift: "_" },
    " |2 W0 e# x; v6 d0 _# ?# L! s
  88.   "=": { Symbol: "=", Shift: "+" },
    7 ^7 X6 `& D8 T& o2 `* h  v
  89.   ";": { Symbol: ";", Shift: ":" },- J* h0 U  ^- L( z
  90.   "'": { Symbol: "'", Shift: '"' },
    9 |  X/ s# y2 S2 e* Z8 `1 U% P0 g
  91.   "[": { Symbol: "[", Shift: "{" },- g8 v7 ?5 a( D$ t
  92.   "]": { Symbol: "]", Shift: "}" },& C  o4 l: A; x5 z2 C# M0 X: ?
  93.   "\\": { Symbol: "\\", Shift: "|" },$ e5 S8 R( E: V3 s
  94.   ",": { Symbol: ",", Shift: "<" },
    ; _! w( i- P- @4 Z$ y% {; y+ E
  95.   ".": { Symbol: ".", Shift: ">" },5 W/ g) g0 F( s+ Y2 ]
  96.   "/": { Symbol: "/", Shift: "?" },
    8 Q% F8 a9 }8 W! z
  97.   Backspace: { Symbol: "⌫", Shift: "" },+ r4 |  [8 U& P
  98.   tab: { Symbol: "  ", Shift: "" },
    5 j1 P1 z1 f; E
  99.   CapsLock: { Symbol: "⇪", Shift: "" },
    % d& s3 U7 L4 ~/ z, {) a" X; d
  100.   Shift: { Symbol: "⇧", Shift: "" },
    - ^; A  f9 {" Q( d' D  _  g$ t
  101.   Enter: { Symbol: "⏎", Shift: "" },
    4 N0 [7 x' w; {7 F: O
  102.   Control: { Symbol: "⌃", Shift: "" },% X3 X. ~" Z7 B
  103.   Alt: { Symbol: "Alt", Shift: "" },: K6 \) ^( ?' F8 @: R  a
  104.   Meta: { Symbol: "⌘", Shift: "" },
    * q# t: d  g) C1 B$ t
  105.   ArrowLeft: { Symbol: "←", Shift: "" },
    7 w) R" {. x/ g# D
  106.   ArrowUp: { Symbol: "↑", Shift: "" },, U7 c" L% R% z5 L5 l0 u+ [' }/ \
  107.   ArrowDown: { Symbol: "↓", Shift: "" },
    , [" \5 x9 E$ t  z4 C" c
  108.   ArrowRight: { Symbol: "→", Shift: "" },
    * u+ m0 r1 Q- p$ f/ w  g& d* Q
  109.   " ": { Symbol: " ", Shift: "" },( W! [, F$ Z+ _. k' O
  110. };; z& A% d9 r1 |/ T' z3 D. e
  111. let buttonMap = new Map();
    1 J$ G/ U( e& z$ n. D6 ~' I
  112. let height = 32;: g0 e* ]$ R1 G2 K
  113. let margin = 8;
    9 L& _& I0 c* \) _+ q
  114. let capslock = interactive.button(0, 0, keycodes["CapsLock"].Symbol);. T0 e1 s. c( f9 _5 W
  115. let shift = interactive.button(0, 0, keycodes["Shift"].Symbol);" b4 S0 L) j( L* g# x
  116. for (let row = 0; row < keys.length; row++) {5 }7 |8 y' h! k5 _& \  Q% `
  117.   let x = 32;/ @# S: L1 n% n3 J
  118.   let prev;
    / L! r9 K0 C- o: A
  119.   for (let i = 0; i < keys[row].length; i++) {
    3 F' q4 z  J! C
  120.     let key = keys[row][i];
    ; Z+ U4 H3 X+ d5 @& S2 ~
  121.     let width = 32;3 j# P9 ^' T6 D$ g: O  m
  122.     let button;
    $ k0 X& _, K* v. z" c$ @' E4 z; R0 G
  123.     switch (key) {
    . o& c0 i2 t9 p% {
  124.       case "CapsLock":
    ' V& G/ e' v9 y( E
  125.         button = capslock;
    + I+ C, s" I( U2 w
  126.         width = 64;1 u$ {* S* a) N+ `4 B
  127.         break;
    ; m7 `3 A! w- t4 L  F7 s
  128.       case "Shift":4 P  l& j# l1 I7 O& b
  129.         if (shift.x === 0) {( q8 |( u, p1 R8 M! T
  130.           button = shift;
    : p7 N5 i+ l: e8 Y$ ], V* K$ z
  131.         } else {
    - ?7 n* c( `# o$ g$ j: K  q& e, W# w# F
  132.           button = interactive.button(
    9 i+ w8 d0 J# R' {$ @+ o
  133.             0,
    4 a; S! b1 b7 y* P( g0 E# S/ u
  134.             0,$ [5 @/ D# ]3 C# n6 V
  135.             keycodes[key] != undefined ? keycodes[key].Symbol : key* n2 O3 O7 e4 f' j% t
  136.           );  _5 O4 ^2 v" N. W- F2 h
  137.         }
    ) G3 I, o/ [3 a8 z$ N8 |
  138.         width = 90;9 v. e; ?( c  U: u4 b
  139.         break;* Y0 J$ _9 ?/ L  O/ e6 ^! [% {4 G
  140.       case "tab":
    ' F1 A% D: z& Q' S: j& R$ q
  141.         width = 50;
    # ]& a6 D# M/ q/ D/ t0 @) q; O
  142.         button = interactive.button(
    6 e: n, @( ~! y; s" q
  143.           0,
    9 T! L) z# d, [% [7 c
  144.           0,
    * _5 K' D- i9 q3 a; S! M" j% D4 K
  145.           keycodes[key] != undefined ? keycodes[key].Symbol : key* j5 w2 T6 e: s4 ]9 {: W
  146.         );2 s$ E- l0 i5 o+ m( k* _% v6 R  e
  147.         break;
      J) }" r& Z/ r% u* q" t3 d
  148.       case " ":1 b" A; R* ~. I
  149.         width = 176;* E7 {! B% x# e6 U
  150.         button = interactive.button(
    * d* w2 R, H2 v- t9 e/ b  W
  151.           0,1 `6 v+ `* z3 G$ D  D, z! [( r+ _
  152.           0,! L* }/ E6 X4 I
  153.           keycodes[key] != undefined ? keycodes[key].Symbol : key  I* R: V6 ^& r+ g
  154.         );
    6 J0 f! M7 S: V- I* u+ K1 I
  155.         break;1 g$ V0 d7 T; C, ]1 h9 ]7 O! E
  156.       case "Meta":
    0 y8 w" Y8 M, g) H" r# d
  157.         width = 50;
    " K5 i& L1 j: {0 g& W
  158.         button = interactive.button(% L% z3 O8 f! G  y
  159.           0,
    , R6 j4 @% O4 f
  160.           0,3 o/ @; i3 V; e. J% d
  161.           keycodes[key] != undefined ? keycodes[key].Symbol : key
    ; J/ g  C5 v" C* p
  162.         );7 v, t# d8 u5 g7 v8 z, ^! t
  163.         break;$ n: E6 ~$ I# u) _" u6 g8 i
  164.       default:" ?7 J6 y0 g3 W) D' I
  165.         button = interactive.button(
    : y& @1 }8 M/ B+ s, ~8 \
  166.           0,
    5 H* M  q/ R6 F- t
  167.           0,2 H4 e& P$ _* ?; a
  168.           keycodes[key] != undefined ? keycodes[key].Symbol : key9 a5 `9 M1 w. I; v8 d
  169.         );. t  S: y: k* w1 `4 q# P3 N
  170.         if (keycodes[key] != undefined) {
    - a& G( F0 x' p( j* p
  171.           if (keycodes[key].Shift != "") {+ A2 P5 I" k3 P2 }
  172.             button.addDependency(shift, capslock);
    6 \- V' B  C6 U6 Z4 T: w- E
  173.             button.update = () => {/ X, t4 |- b( D- C" n, b% I
  174.               if (shift.active || capslock.active) {
    $ F7 C. f' d$ }3 G
  175.                 button.label.contents = keycodes[key].Shift;
    8 {% m  L, M2 H1 }1 }
  176.               } else {
    - [* a" l7 W- T( S4 j
  177.                 button.label.contents = keycodes[key].Symbol;
    . ?8 a' o( }3 E) D& g' n; t/ S: q
  178.               }9 o/ |7 J' |' |( w# u2 T
  179.             };
    $ l3 j5 o0 _: F' c
  180.           }
    1 O5 `% F+ G+ w
  181.         }8 b- S- a. N. U
  182.     }
    . w: v$ _6 Q3 l% P
  183.     button.x = x;9 G. b. G: |6 m. v
  184.     button.y = 64 + row * (height + margin);
    0 Q0 R/ q) ?$ j* I: s. y% y
  185.     if (button.box.width < width) {) i% K1 m: x& i' n/ @: F4 r' k
  186.       button.box.width = width;
    5 S* h1 R* J) O2 U5 R7 a
  187.     }: k+ `7 {' E0 C0 i3 j' p
  188.     let bbox = button.root.getBBox();% I% ^' {' g0 w6 k
  189.     x += bbox.width + margin;
    5 X0 b: c# ^' I$ L/ n4 g
  190.     buttons.push(button);  y* C/ a+ K/ Y1 s* h! f2 ^: K
  191.     prev = button;
    / o$ E. x- b" w2 U. T+ e
  192.     buttonMap.set(key, button);/ {+ |8 N, z  a! t2 a& ?  d
  193.     if (key === "ArrowUp") {2 s# w  _3 q5 Q) [4 g
  194.       button.box.height = 16;
      [: @* s! B" d
  195.       button.label.root.style.display = "none";
    . M( M* Y2 y9 {/ [1 W; `  p' w) s# P
  196.     } else if (key === "ArrowDown") {; H3 B6 ~/ @% h5 _
  197.       button.box.height = 16;( X$ t- J8 W) p4 o2 D
  198.       button.x -= 32 + margin;
    , y# c! Y( D, V/ M/ }, z4 D, @/ j
  199.       button.y += 16;
    , |! g. F: m- B1 r
  200.       button.label.root.style.display = "none";
    3 |# a( E. O# E7 m( p0 l& m
  201.       x -= bbox.width + margin;
    - s% {+ x9 Z0 ?3 i0 \
  202.     }
    3 S( Z2 S5 A  J% q7 t, {
  203.   }
    2 E( ?. ^. }, u0 _  b6 |& N
  204.   let right = prev.x;
    3 T, [# d, O( e- D" j
  205.   if (right < 630) {
    5 u3 Y& ?& s5 l- F. P5 ]/ g
  206.     prev.box.width = 630 - right;- D0 ^4 s7 |5 ^; n6 R
  207.   }: Z# g$ N' _" g* ^5 p
  208. }. d& j: ?3 h/ Z' Y7 T6 t, W- `/ y
  209. // console.log(keycodes["0"], shift, capslock);) o' T+ M9 r/ c
  210. let active = [];8 v& R0 t" }- Y, J- k+ j
  211. window.onkeydown = function (event) {- b0 m. ]7 j, N: a1 T
  212.   for (let i = 0; i < buttons.length; i++) {2 Q0 g4 L- ?2 ~! R4 i; q& C  i: F
  213.     let button = buttons[i];
    6 w, ?% p, L; L8 o: n
  214.     if (
    / @/ B6 n1 o4 _, q  a9 ]
  215.       button.label.contents === event.key ||0 F4 I6 |- v; x* r) [) _
  216.       (keycodes[event.key] != undefined &&
    % H) N8 Z4 q% ~
  217.         button.label.contents === keycodes[event.key].Symbol)9 s$ M! U4 t; j, X" E- z0 |( ~! W
  218.     ) {
    7 \6 v$ v' z. @- p: A) a
  219.       button.box.style.fill = "#f8f8f8";
    5 t$ Z9 y1 x3 N1 j
  220.       button.label.style.fill = "#404040";% j3 E* G1 O) P$ l, N
  221.       button.active = true;0 q1 e! Z# d7 h+ f! x( v& [
  222.       active.push(button);1 p% K/ s0 I# N' v8 u
  223.     }& ^8 J1 Z! g8 q& g! z
  224.   }5 Z. U6 H$ }, p) m5 ?" o
  225.   buffer += `'${event.key}',`;. u" P% q: O! [2 T& {
  226. };5 X( C7 x" Y4 X8 S$ @
  227. window.onkeyup = function (event) {9 a* b1 H3 }* `2 q0 w8 T
  228.   let newActive = [];
    5 q& Q/ I8 E9 q- C6 i6 U6 B3 M
  229.   for (let button of active) {
    . l' B& f5 M4 N: _& {3 X3 X, s
  230.     if (
    3 d9 A* k1 c- o+ W2 ~. b# I7 v0 K
  231.       button.label.contents === event.key ||. u. S+ ^- r$ B% v. I
  232.       (keycodes[event.key] != undefined &&; X$ e; ~+ P( f& b2 \/ c
  233.         button.label.contents === keycodes[event.key].Symbol)  `6 H. g7 K0 Z% r& I1 \7 o
  234.     ) {
    ; c+ _% a% c! {  G$ X* L* k
  235.       button.box.style.fill = "";
    " G; I6 p' y9 u5 F
  236.       button.label.style.fill = "";
    % d3 Y. \3 V. k" \& Q3 h7 X5 ~
  237.       button.active = false;) }. I9 F* v8 A2 n
  238.     } else {% H: t  R, v$ H$ f! X3 p0 e5 O2 p
  239.       newActive.push(button);: a: Q* w  S& X% _; M
  240.     }  E2 E! N. Q$ _5 a
  241.   }
    0 l" T% M& r+ b  C! ?
  242.   active = newActive;
    6 `- n  r1 U# D! x- A  F
  243. };
    / I; F1 L2 t- b7 }8 L+ p5 m
  244. let bbox = interactive.input.root.getBBox();
    9 G4 k4 R4 d8 L8 A; i  p; |. h3 u
  245. interactive.setViewBox(; _4 t, h0 I: i/ j- O2 D) K! w
  246.   bbox.x - margin,5 p# s% X& r- a
  247.   bbox.y," B; B2 Z, v1 [/ j6 m
  248.   bbox.width + 2 * margin,7 G0 N" ?  O3 Y3 [/ C0 S# q
  249.   bbox.height0 B" ?$ {7 l( \1 D8 H5 N0 [
  250. );5 q: t/ ?, C: k1 m
  251. //# sourceMappingURL=keyboard.js.map- B- `) k3 a! y# F" D( e9 W& ~
  252. ! i) D( a/ A( _  k' k9 V* S
复制代码
- s' u( S/ f" c* E9 M




欢迎光临 数学建模社区-数学中国 (http://www.madio.net/) Powered by Discuz! X2.5