JS LCD 切换示例分享

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

1. importPackage (java.lang);
   1 n" z% n: ]6 G6 l! T6 |
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   9 q3 [, t5 R# p: p
5. 
   ; X% X( X) b  x8 |' n3 ?
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ! L7 }3 E/ t6 K( o- j: z( S, n
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    ; s  E$ y( m/ j0 _' J1 a
13. 
    - T0 R& M+ u. g+ ~! ^  u& [5 }1 z
14. da = (g) => {//底图绘制
      U/ b, u- [) f5 ]6 a; w' v
15.     g.setColor(Color.BLACK);
    : P  ^/ |9 J( r& I2 a. u4 D  n5 o
16.     g.fillRect(0, 0, 400, 400);
    6 t' j" A: H2 E& _, b; Z, X6 O
17. }
    5 L" v- r; }- C
18. 
    6 v9 D6 v8 f8 o. {
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    , g2 O; q6 a. [1 _# M: Y
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    ) D. J+ n* ]9 C/ u3 i
24.     let str = "晴纱是男娘";
    : ]9 v) [4 c( Q# Z: P! _% F
25.     let ww = 400;
    . e7 L# G4 D4 N7 I1 r' H
26.     let w = getW(str, font0);
    2 {5 R% c- ^+ w) ^7 ~
27.     g.drawString(str, ww / 2 - w / 2, 200);
    4 J2 l" }0 w  N
28. }
    
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    5 S4 W& u- W" @, x
32. 
    1 M1 T2 g) E! f8 ^! O; }2 U9 F
33. function create(ctx, state, entity) {
    
34.     let info = {
    ! c6 V" F9 I0 [
35.         ctx: ctx,
    
36.         isTrain: false,
    ) c1 h3 x' G3 k5 E) I( h7 I) A
37.         matrices: [mat],
    
38.         texture: [400, 400],
    : D$ C+ C, w0 y: l1 ?$ Z2 S
39.         model: {
    
40.             renderType: "light",
    , L8 e9 X2 S$ J  P% X
41.             size: [1, 1],
    : P8 J- c/ r8 ^( V4 q/ R6 o
42.             uvSize: [1, 1]
    
43.         }
    ! x! _" u2 d+ S9 O. Q9 [7 g! S
44.     }
    1 u5 Y# G* Z0 `8 K# A+ C. e) o+ @5 \
45.     let f = new Face(info);
    
46.     state.f = f;
    6 |# `% _- W9 a) e1 X
47. 
    0 ]- n1 u9 V2 w+ d/ M
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    . P* O# ~* \+ Z- b; t
51.     let fps = 24;
    / t' g' \$ q! p
52.     da(g);//绘制底图
    * L' Q# U+ m& O8 |8 b
53.     t.upload();
    
54.     let k = 0;
    " T+ w! F* S0 ^  A' i  E1 g9 D
55.     let ti = Date.now();
    
56.     let rt = 0;
    : ]$ N  x; t1 ~+ ^
57.     smooth = (k, v) => {// 平滑变化
    / c5 B  [8 Y( j8 E& I- r5 Y
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    - b) v. F% \5 X7 F) g
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    : T9 s" ?8 D+ B& J, F3 H
61.     }
    ; W4 u( `; K  s) z/ W
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    / D8 T, `: `6 U' y  L
65.         while (state.running) {
    1 Y  M. I% t: W% w7 g3 R; g
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
      \8 U+ L' P6 s% s1 `5 h# U
71.                 }
    & T/ K3 N* i! b. M" z* V
72.                 setComp(g, 1);
    
73.                 da(g);
    . q% i% p' `8 b% x1 B" P& T9 |7 z1 [, x
74.                 let kk = smooth(1, k);//平滑切换透明度
    9 t% K  O- r6 _3 e' K7 I2 J1 c
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    % d* g/ U/ X! z) A7 _0 D
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    0 A; y! W# x6 @9 K2 ~  ?
85.                 ctx.setDebugInfo("error", e);
    7 Y. m$ r3 M  P6 M
86.             }
    # ^9 J" `' Q5 t1 [- d$ b
87.         }
    8 E/ E9 l( S5 P0 E3 D1 H
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    - Q5 F* J' j' l0 d7 p8 t# B
91.     th.start();
    + S: \' P) q4 V' _9 P
92. }
    , j6 g  l) S% a* C
93. 
    
94. function render(ctx, state, entity) {
    ) V$ \3 i/ R& h" G& U$ |* H6 B& P2 {
95.     state.f.tick();
    9 l! ?8 C% P) B9 N
96. }
    ) i1 |. }9 T. X% n- l
97. 
    * \# j0 O2 |4 x4 @
98. function dispose(ctx, state, entity) {
    1 t% L, C, \+ m4 S* P* {3 t& ?
99.     print("Dispose");
    + f* ?  S1 W7 R* b% c3 K2 ^# F
100.     state.running = false;
     
101.     state.f.close();
     5 Z! X9 F+ k7 D
102. }
     8 L: d3 e8 l$ T1 }: A: g
103. 
     , y- J  V  v2 O: B5 O  c, V
104. function setComp(g, value) {
     2 b9 i# P0 S: F- t1 D* f  o
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

% ^3 I. N2 C9 Y- ^6 D" g" V% V
2 S, T0 i( j% Q. I" \. @顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
2 r  d7 X2 \# |2 l

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
( M, M6 A; Y2 x3 C

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

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