JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
/ u- a" j# {5 P8 I- z

1. importPackage (java.lang);
   ( m- K% r/ Y4 P' o6 Z: R
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   5 `( {" m# ^, E9 B( k
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   * H8 G% n# U4 M2 ^1 w! M
7. 
   & C  P4 k6 ^' O+ w; e. k
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   ; X* {8 A6 S$ l* ]7 K
10.     bounds = font.getStringBounds(str, frc);
      ?+ Q9 |0 B4 X) r5 H
11.     return Math.ceil(bounds.getWidth());
    
12. }
    - J/ z  N  R* _& @6 W
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    + ~* j; M" H& }
18. 
    0 E' Q/ R& a! o: I7 }
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    + B- S" i, }8 b3 V5 x! I
22.     g.setColor(Color.RED);
    ! v8 S( w% h6 \/ Q; o
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    : n8 r" f0 j8 H
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
      D* I% R" \; l6 {% p: K
29. 
    + H/ B4 O0 {( L( G5 {8 @0 c7 |
30. const mat = new Matrices();
    0 [  i0 K  {; t5 q5 Y
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    , J2 s; f1 P: @' j; a- J
34.     let info = {
    
35.         ctx: ctx,
    ( w) N; b0 N+ L* I% m
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    % O2 E0 s1 ?# w8 b
39.         model: {
    7 @1 n, u4 Z( E$ D( `( w
40.             renderType: "light",
    2 B, i% F2 E( b% W
41.             size: [1, 1],
    7 C3 K. c$ I: ^8 w+ f3 t
42.             uvSize: [1, 1]
    . ^( T! e( n; N) w
43.         }
    - l0 B9 a5 t/ L
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    ; [  D* I5 D! O9 i3 p
48.     let t = f.texture;
    " P+ A0 S; W5 E2 M7 U
49.     let g = t.graphics;
    
50.     state.running = true;
    # ]: j4 ^+ v: u
51.     let fps = 24;
      Z+ H8 h" t0 m  C5 H3 k+ D
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    - }! B) w" X$ q+ t5 ?- R
55.     let ti = Date.now();
    2 d7 v: ~* U" \( M7 J
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    - [8 h  Y8 b- w
63.         let id = Thread.currentThread().getId();
    : r+ r4 C, e% a2 q0 _' B  ?
64.         print("Thread start:" + id);
    3 p4 {5 z  S4 Y0 d' b  \
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    , W0 X- U3 H' v
69.                 if (k > 1.5) {
    
70.                     k = 0;
    # ?" _; }' a1 y$ U8 q. W1 I' ~3 |8 q
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    " ~3 @. }& C# F2 ]$ i
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
      _" K, {# E& e
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    . e: {; M+ @9 H* M
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    2 l) I, [. J4 H/ G7 D
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    0 D: D! N8 r+ S2 k; U& c/ F
83.                 ctx.setDebugInfo("error", 0)
    * A7 @+ s- O( p5 @# Q& x
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    . c& d8 v0 X$ C" L
86.             }
      H) U+ v4 v0 k& U) k
87.         }
    . b+ }7 K  i9 L( v8 [1 l
88.         print("Thread end:" + id);
    . E  K# L9 _6 ?$ w, x$ m
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    + l! e5 h6 y5 f$ j. }' w
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    $ R7 g+ E5 I5 W$ l
97. 
    ) v( K4 J+ C1 E: j3 T
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     ; x" ]) `& `1 D
103. 
     
104. function setComp(g, value) {
     . P+ `! Z$ f% O8 E1 h
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     ! W' \9 \5 m& c0 g" g5 A
106. }

复制代码

, C' n# d% G: g2 F( g- t4 ~" V写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。


6 }! [8 x- [4 K* R- e顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
5 ?- @; U3 }$ v  z( T5 [

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
5 D4 B3 J7 q( k& j. _( p全场最瞩目：晴纱是男娘[狗头保命]

% g$ j  y) o: ?; \" Z甚至双引号里面的自动加粗