JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
' U1 z& Z8 a' B1 s* U- q

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   ( |( \/ _; J) q# O
8. function getW(str, font) {
   0 W, o/ b7 ^( p+ c- b
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    7 c! x' n% k' p' G* K
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    / n* E2 R; C7 b- W$ m5 s2 q
18. 
    
19. db = (g) => {//上层绘制
    7 ]9 K( @" {& ]" ]/ N2 [
20.     g.setColor(Color.WHITE);
    3 [7 U' ^7 t/ e& j% F3 A
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    8 A9 s  a5 G/ S& i
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    5 E8 L/ ?: n$ p; z9 V
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    ; ^7 O& {9 ]! [9 a
29. 
    
30. const mat = new Matrices();
    8 b% A" p# S9 M/ K3 x1 o
31. mat.translate(0, 0.5, 0);
    
32. 
    7 j) ]( T: c4 |6 q  q, U
33. function create(ctx, state, entity) {
    ( ?7 ]0 ]0 ^- M/ E, D+ J
34.     let info = {
    3 o4 M. N# O/ G( H. z
35.         ctx: ctx,
    * J' B: }  F' {7 d$ _3 P$ E; @" g
36.         isTrain: false,
    ) p  i! E1 F# b0 ^$ f, A# Z4 \
37.         matrices: [mat],
    
38.         texture: [400, 400],
    5 m' j: p1 z5 `
39.         model: {
    6 ?; I. V* |+ u0 x
40.             renderType: "light",
    - J4 F+ W4 j% Q% E; `* v* y
41.             size: [1, 1],
    : y% {. R' e6 _( o1 Z; g0 y8 P
42.             uvSize: [1, 1]
      s8 j: I+ O* ]$ A0 `/ C. l, ?+ g
43.         }
    
44.     }
    + B+ _8 W) ~+ Z3 I9 q
45.     let f = new Face(info);
    1 P' g: ]7 f, W7 e7 [& W
46.     state.f = f;
    5 \8 ]# \! {6 _+ J9 `
47. 
    
48.     let t = f.texture;
    : n( y2 }  @( C$ x5 `  I
49.     let g = t.graphics;
    , h* \. y8 C+ V1 ^3 ~
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    $ j$ z3 V4 P' m' b+ [, Q, D% U% I
55.     let ti = Date.now();
    
56.     let rt = 0;
    " y' O$ ?, N, f! b- w, j! S
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    ' A% I- d7 o+ r  G5 Y
59.         if (k < 0) return 0;
    2 S7 k" h. u# c: E* C( ^% n- [
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    0 ?0 \* B# y; @# a9 ?8 B& y0 |  b" N
61.     }
    
62.     run = () => {// 新线程
    1 F. S4 y6 i! n! F8 \! \  {4 }
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    - J5 c$ O9 |0 g! |7 D
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    3 H/ `: V/ `6 k
69.                 if (k > 1.5) {
    ( p& \0 b( t, i, @
70.                     k = 0;
    . |( j1 Y- d- R: G% n( E
71.                 }
    + H7 k! u1 J9 [( |" O) S  @/ o# w
72.                 setComp(g, 1);
    
73.                 da(g);
    8 H6 z" J+ O1 r! N$ p
74.                 let kk = smooth(1, k);//平滑切换透明度
    " N, B8 d8 @: [( H
75.                 setComp(g, kk);
    ! b+ D" j* t/ i
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    7 M: ~0 e( e) V3 O/ {. d# M
80.                 ctx.setDebugInfo("sm", kk);
    + P+ m5 p8 T! X/ ?( K3 B1 t3 c
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    1 g$ t# E2 S. n+ H: |; S: K( @
83.                 ctx.setDebugInfo("error", 0)
    ( \. T0 s) H4 p
84.             } catch (e) {
    9 x) J. @* b- c7 j5 f+ y
85.                 ctx.setDebugInfo("error", e);
    ' F( g/ l1 E$ D& |6 u
86.             }
    8 h0 d: L. k7 g- m+ L1 ]" N8 [: B
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    # P/ F2 X6 e6 G8 `6 p+ D4 y2 L
90.     let th = new Thread(run, "qiehuan");
    1 o2 J/ m& l0 Q+ y3 W9 X  Z
91.     th.start();
    $ A, L+ d0 D  m/ }' O
92. }
    + Y/ N* @; j0 h) C4 o
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    4 u& a! X) ?' N9 q& m0 r5 X
96. }
    / C' K. w/ L% M+ Y0 f$ q
97. 
    
98. function dispose(ctx, state, entity) {
    $ V# j( C/ p! U: G& {( I  g# s
99.     print("Dispose");
    ! m$ C' T- O0 X! k; R+ k
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     
103. 
     4 |  A6 S8 k0 Q: O7 k
104. function setComp(g, value) {
     6 r  Y9 L+ l6 k+ P$ C
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     1 \: [$ N' t% e0 s  X  ^% L1 X
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
; w( ~% R' Y( [2 a8 @- `9 H

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]

Hobbytimeblank 发表于 2024-11-16 20:38
全场最瞩目：晴纱是男娘[狗头保命]

甚至双引号里面的自动加粗