JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
* b9 l3 O4 N; ?2 F

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. 
   * R; t/ ]2 n/ F' W7 G6 h1 E
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
     E6 X/ q* d$ q8 ]( `& j: T7 U8 J
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    0 ~( T" p$ Y. p& O: t8 A
12. }
    . a& c# q2 |) t7 Q) f+ ^: a
13. 
    
14. da = (g) => {//底图绘制
    ( b- U8 m- w  Y* F# C
15.     g.setColor(Color.BLACK);
    " R( y, g1 ~: E! u, E, a7 K; {+ Q, m$ K
16.     g.fillRect(0, 0, 400, 400);
    . P2 A0 W# u7 b& ?/ g
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    : P6 q1 J1 z6 x% q5 J2 I" ^: ]
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    5 x3 O6 y$ p' D
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    0 u% Y3 e3 Y0 V( t( }# f' O
25.     let ww = 400;
    ' M9 I  O. V, N
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    6 C& R3 C$ e& W! `0 k5 S/ |
28. }
    
29. 
    
30. const mat = new Matrices();
    # Q/ i( A3 E1 ]1 w0 R, ]
31. mat.translate(0, 0.5, 0);
    
32. 
    $ Z( l+ i7 p; z+ b, @* I, y
33. function create(ctx, state, entity) {
    2 s7 f9 R( I, ?8 [6 _! z/ D
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    ( u0 @+ w0 s; |! P  Y
41.             size: [1, 1],
    # @4 {7 M6 Q1 B/ p
42.             uvSize: [1, 1]
    
43.         }
    - T# ~# c, s1 T7 S+ U5 T4 O
44.     }
    
45.     let f = new Face(info);
    " w) D' B) m) {) {. }( @4 c9 e
46.     state.f = f;
    5 g7 y8 q9 w3 t7 p
47. 
    4 g. Z) ^; a, q; ?7 z
48.     let t = f.texture;
    ! e! ]2 D& R9 M
49.     let g = t.graphics;
    / A2 p: E( T) B5 T2 o2 B5 a+ \0 X7 |
50.     state.running = true;
    $ i7 _5 Q2 H$ R! S7 ?/ l
51.     let fps = 24;
    $ I& ?1 V9 D! s
52.     da(g);//绘制底图
    0 Z3 @8 c: j& x
53.     t.upload();
    1 D/ K/ m# C- ^$ L
54.     let k = 0;
    ' F7 x5 r6 A: h) B  `" m; f
55.     let ti = Date.now();
    $ V0 V6 t# M0 x% a. ?; `  ^  c
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    ) H5 L- ]; }3 S
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    9 K; @0 O9 ]3 V2 J7 x. w
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    0 s6 d& c, g4 k1 ?3 c
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    + K5 m( D7 B5 O9 m
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    . ?$ p# s" ?* g" |. ^8 q  ]
68.                 ti = Date.now();
    7 [: B& ?9 Q0 g( S6 e+ b
69.                 if (k > 1.5) {
    ' \  F! Y# l5 g
70.                     k = 0;
    - L& _! }; e5 ?) l& D9 v
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    ! C5 y. R' M- {' l8 L/ N5 X
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    7 I1 ]) ?7 r+ w" v: c" D
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
      v1 `" M8 b( w& u
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    $ F7 r2 T6 G2 T4 h4 R
85.                 ctx.setDebugInfo("error", e);
    0 u: M% [6 o+ b* V' H2 i* ~
86.             }
    9 G0 t% C0 t; q$ h
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    % g: j  t2 W' O1 ~9 I6 H2 D
92. }
    7 q7 d1 ^7 w9 E' F1 F6 H  p1 O' L
93. 
    ' Y. n' _" v! G# ]% t2 q
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    - x0 Y# _" X3 L" E6 `% u4 G5 B
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    / o9 _0 i8 A/ g
99.     print("Dispose");
    . t; Y; a, p1 A& o3 g
100.     state.running = false;
     6 M1 Y# [& X$ N; W9 q# q# T
101.     state.f.close();
     : |$ a/ }5 B1 `8 J+ u
102. }
       W& {3 J6 Y* q$ e6 c
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

' d: G0 H2 z. ]写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
5 [% B' `3 o9 T& w6 t3 V) b7 [
5 X: Y2 b  O3 i( \) S# E
& {; S; \; L% r' D顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
" `4 ~  z8 I" t! j7 V* |# `

看不懂，但我大受震撼

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

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

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