JS LCD 切换示例分享

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

1. importPackage (java.lang);
   7 F6 h( s0 t% K- B( Q
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   3 u( `! a* m5 B
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   2 m( x* J) b; l' M, K
7. 
   % Z. G) L( e' I' R. O) [' Q5 \  C
8. function getW(str, font) {
   ; o! b' w  L8 I' A9 G
9.     let frc = Resources.getFontRenderContext();
   ! E" s* B9 m  z
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    9 E  K, r5 B; W* a) p
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    % O% K4 n) e- E
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    9 m4 \% }0 b4 g5 b; a( {
17. }
    , E$ n. v9 S: q1 ^5 k) @
18. 
    
19. db = (g) => {//上层绘制
    ! \& }3 E. k$ i
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    8 S# ?+ b( ^* P+ P8 ^4 |
22.     g.setColor(Color.RED);
    ' n) z! g) K! N  j, B  ]
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    8 O+ Q) L7 }0 T
25.     let ww = 400;
    2 s% v, V6 c' M0 F' i* c
26.     let w = getW(str, font0);
    / |, K* y9 R5 `& t! r. s0 F0 f
27.     g.drawString(str, ww / 2 - w / 2, 200);
    4 n* _9 [0 t' A0 e
28. }
    - ^* J# }9 H6 p2 I2 q
29. 
    - z- D6 ^7 f. C/ w  [  K
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    : b: ]. L$ y& {: e+ t# x
32. 
    + X/ ~$ @) Y% K, @9 z
33. function create(ctx, state, entity) {
    1 `. V' e3 Z1 s( E5 ~
34.     let info = {
    
35.         ctx: ctx,
    / }* w3 G0 [# b
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    + I+ ]" x3 Q, l% K
40.             renderType: "light",
    
41.             size: [1, 1],
    4 W8 t; d3 k6 G+ T" m0 y; |
42.             uvSize: [1, 1]
    % O/ p4 m5 |9 U
43.         }
    - h- j  o7 o. F' ~/ |4 V7 D' K
44.     }
    ( o0 \* x# l( S
45.     let f = new Face(info);
    8 K2 A. r  ]7 H0 G4 o
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    " `+ a( u) a* @' Z0 V
49.     let g = t.graphics;
    $ d4 W* T  r7 t7 I' z! T$ c# d
50.     state.running = true;
    $ _- t  i) w- |# M% m1 }
51.     let fps = 24;
    # z7 ?  q+ X: |3 {, O
52.     da(g);//绘制底图
    
53.     t.upload();
    : |2 @* j& K. `/ ^) C
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    & X, _+ A" h3 a& @0 K/ W) U) p
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
      M- E1 `7 F1 W
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    ; P/ l, a) L! g* ?
62.     run = () => {// 新线程
    ) G; O! K/ J2 O% ]
63.         let id = Thread.currentThread().getId();
    3 @4 _! y$ a  e8 o
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    5 m& K4 M3 B+ q% d; M+ H
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    / Y( v. h7 y. M. _3 o
69.                 if (k > 1.5) {
    3 h, }" I( `' ]
70.                     k = 0;
      a" y% v" X) u$ [  d: a; @& y
71.                 }
      c1 t1 K* \3 b0 J
72.                 setComp(g, 1);
    
73.                 da(g);
    ( C+ o7 a4 Q' B! C2 o
74.                 let kk = smooth(1, k);//平滑切换透明度
    " X" \7 j, m; A# c. `7 m& \$ L, d, X
75.                 setComp(g, kk);
    
76.                 db(g);
    ' j/ i8 y) R5 P- E
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    - w# P! ^6 @0 }
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    4 v/ u- U, P0 E7 P4 C
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    ; ^/ k/ S/ F. `( F* D% `
84.             } catch (e) {
    8 ~$ k* D, D6 U& Z+ k! O5 N
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    / R  Z: {3 H' }2 d& Z3 b
87.         }
      \/ I' X4 B) x4 c% P+ O
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    : z4 p6 [1 U0 h+ ^8 C
92. }
    4 z: Q8 R! C& a4 ]( H
93. 
    
94. function render(ctx, state, entity) {
    " U0 i& c% i9 V+ [
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    $ Z; ^9 U8 w8 u8 t3 s$ B
99.     print("Dispose");
    
100.     state.running = false;
     ; S6 M3 q" K1 E0 H& H& w4 L
101.     state.f.close();
     $ V: M, J* k' Z/ _. ~3 ^! w2 L
102. }
     ; n1 ?& I% {5 o, n# J
103. 
     
104. function setComp(g, value) {
     % d" L( e8 h, m3 ?9 w
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
2 `+ D* M  Z4 T

Hobbytimeblank 发表于 2024-11-16 20:38
! N" V( C2 c: e6 s# G' X全场最瞩目：晴纱是男娘[狗头保命]

; r2 E1 g5 k0 j0 d& Q" `甚至双引号里面的自动加粗