JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   1 R! s- x) {. Y7 r9 a9 L
2. importPackage (java.awt);
   7 X4 F) i, ]8 q
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   + s7 Y* f$ b0 Y3 n" N& C
5. 
   - S$ a! E0 i0 F$ y
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   # p  k6 X) r% }2 ~$ T" v  E
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    0 `" z1 q/ N& Q+ _( d6 {, K; v
11.     return Math.ceil(bounds.getWidth());
    - Q6 d* K! h9 f8 }- p# k+ W6 S
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    ' q9 K  P8 n. I, Z5 Z1 a' C
18. 
      \" s* F  L+ U' ^1 X
19. db = (g) => {//上层绘制
    ' v0 k8 S; E% X9 o1 @, G, Z2 a
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    & h) F% K; E9 F7 ~8 H
22.     g.setColor(Color.RED);
    4 {  F. w9 z( c, X
23.     g.setFont(font0);
    4 D, M. F) `6 X6 \/ R, X9 H
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
      o0 A5 y: _0 ?2 R  v# E
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    5 x$ h0 y; u' r! J8 D7 J: L. Q* ?  a
29. 
    2 x5 }3 _: a' m1 N: ~+ K7 z, x) C
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    / V* `6 f! l" ^& e% z* c
33. function create(ctx, state, entity) {
    
34.     let info = {
    / M8 V: O' w; P8 y5 n
35.         ctx: ctx,
    
36.         isTrain: false,
    ! K; V7 O( ], m1 O! ]! z6 V
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    4 F! X0 S' `: R% ^9 j) Q$ g+ ~
40.             renderType: "light",
    
41.             size: [1, 1],
    / K# T) H5 R% b! z
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    , H- B! c  v( k+ c( `
45.     let f = new Face(info);
    . a9 u: F/ \; f
46.     state.f = f;
    : U. O- P! u2 A
47. 
    
48.     let t = f.texture;
    5 X$ s2 ^$ U( |3 E
49.     let g = t.graphics;
    
50.     state.running = true;
    4 }6 m8 ~8 M2 I: u
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    % o& t6 \2 \, }" W
54.     let k = 0;
    , [  L; r) ]" G8 N; R
55.     let ti = Date.now();
    
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 = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    9 X2 |: G1 l. E3 i4 ~
64.         print("Thread start:" + id);
    7 X6 ~' s  @6 P0 E, T
65.         while (state.running) {
    
66.             try {
    2 L, y' u  N  C4 @  G
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    & e* J+ [1 g7 q8 I: F0 M
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    4 y# J2 W0 V% y( [: b
70.                     k = 0;
    3 y$ K1 [+ `$ H: B+ M% p
71.                 }
    
72.                 setComp(g, 1);
    2 k; O9 L6 _& v, ^9 Z# v! \0 z
73.                 da(g);
    1 \2 r7 v5 ~8 v! o' U- ?* |
74.                 let kk = smooth(1, k);//平滑切换透明度
    ( Z+ A$ W6 ~/ w" ?7 M7 {/ @) \
75.                 setComp(g, kk);
    
76.                 db(g);
    6 K3 i. n  K: D
77.                 t.upload();
    1 B1 \7 E- _' V' z, S2 [/ t; O
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    4 ]9 u. W9 V+ U4 Z" c
79.                 ctx.setDebugInfo("k", k);
    ) c, C2 h6 e% [
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    % J& P0 ]8 [- b: K# j; M6 K+ T
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    4 _+ H3 [/ p6 i6 B( U
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    1 F! q, y, W0 ^8 D3 }
91.     th.start();
    & W3 d  I, v3 w6 |6 B+ n
92. }
    + z; S; r- m4 o
93. 
    
94. function render(ctx, state, entity) {
    7 `# h6 A2 d# i! M, Z
95.     state.f.tick();
    + v! o4 v! _8 q1 ?
96. }
    
97. 
    * _: _) i4 B/ n  G  _
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    % D* j2 L1 y3 \
100.     state.running = false;
     ! s7 a4 X( q# }
101.     state.f.close();
     % g% f* u9 n. S' \1 h& B
102. }
     # a+ _( C* A# p/ N6 @% a* [. w
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
$ Q; G% f" o& X6 \9 `0 V" \8 s! _% G

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
7 A, X, }4 z. \* j' z

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

$ X% a' v7 x3 N: @# a8 x$ t甚至双引号里面的自动加粗