JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
( z+ g1 K  y4 S! A( U. ?* D0 P

1. importPackage (java.lang);
   ; k, M# H$ G: x
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   - h: A9 r$ K7 g5 u5 j3 C
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   . ]" v, d' F! p! B, F$ ?' }- c2 i. J" F
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   % b7 S/ V" H. G* g/ b4 c
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    - f, q3 R! {2 x2 `. o# T' \
12. }
      d  ^7 w) _: Y. ?, h
13. 
    * C" P3 R8 z( k8 Y4 a' ^$ [
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    4 U( X* F' W6 `; [/ p, L/ f: _
18. 
    
19. db = (g) => {//上层绘制
    ' B# x& P, G! f  c5 l7 w
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    6 |1 E8 \6 T0 w$ u
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    5 x7 K( ?6 d. u% ~! s
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    1 Q* {) o2 B* \+ i8 V/ ]: z
32. 
    # e0 M4 C# ?  r( k0 u( t
33. function create(ctx, state, entity) {
    7 D- _/ G& Z( b% X  i9 X
34.     let info = {
    / B  O* {. j: y. \: t
35.         ctx: ctx,
    % i1 G. c+ i, }, G! u, c* ?2 h% k
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    & [/ e$ Q8 F3 M8 Y6 ~- c
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    5 f  u: c& n. |3 n( O8 o) l6 R
43.         }
    ( d! K" V/ s- @7 f- k! X: R
44.     }
    7 ?$ E. ~5 Y4 V% V9 u
45.     let f = new Face(info);
    2 L7 y; I1 n7 K% Q$ D% n( ~; O
46.     state.f = f;
    
47. 
    ) L1 H) A! F8 F- J2 }
48.     let t = f.texture;
    
49.     let g = t.graphics;
    ) Z) p* i2 x4 S5 ?7 r
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    $ H2 a1 V& ]% S6 U! B3 \1 Q' }
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    7 b+ v6 F  v- _+ ^2 X
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    , J% N6 i# f& v# E
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    ) n/ X  I8 p& Z" s
61.     }
      ]) E3 Q1 f# D8 B/ K7 h
62.     run = () => {// 新线程
    5 {: ?9 q/ H- v" Q6 L
63.         let id = Thread.currentThread().getId();
    * \1 b  I, E6 E( {
64.         print("Thread start:" + id);
    3 X7 a. a& A' @0 e7 Y+ U& u
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    + z( y- y: \* N; ]8 x$ M3 k
68.                 ti = Date.now();
    . C! c7 F* Z6 T& i( d6 d
69.                 if (k > 1.5) {
    : p/ [& @$ `+ i3 H  d! E5 \
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    * Z, }/ i  L9 c3 Y+ q
75.                 setComp(g, kk);
    2 n" K! I. f6 h- B5 ^) i6 e1 Y% ?
76.                 db(g);
    
77.                 t.upload();
    7 [2 l6 V, F# s4 Z3 t, ?
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    ) e4 }* \! [4 k3 v4 O
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    5 G/ b" ~: h* U; I% |+ `
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    ) d% b4 k& J/ x1 }' k
88.         print("Thread end:" + id);
    
89.     }
    8 _. N2 p+ a& e3 ?; V$ D
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    ) d$ h5 U9 T3 d* g
94. function render(ctx, state, entity) {
    3 g& K- q' s" \6 U% V4 o* t
95.     state.f.tick();
    
96. }
    
97. 
    4 K  ?, V  r' I0 O% H& I
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    ; Y) z# y7 D) A0 b
100.     state.running = false;
     . ^+ j/ L, f. n* K, {! |! V
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     ) N% G( w' Y2 p* Q! W3 D
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
; I0 z0 a" g' U) B. z5 s2 t
2 g2 G/ l: Y' }: j
* y# l/ R3 I! v7 A9 b顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
, |4 j4 G, v, R7 r* C- h

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

! T2 m9 q5 ^$ f甚至双引号里面的自动加粗