JS LCD 切换示例分享

4 q7 A' N4 m8 W3 q8 C& ^# q这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   ; }# m2 ^$ g$ j" i
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   / S7 `; l; b* ]3 K
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   3 J/ P, S- T: |3 o0 Y
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    - K. A9 W) _1 V; ?: r  S& k
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    2 t0 Q1 K- G0 U- p1 @
19. db = (g) => {//上层绘制
    1 B. S& z* v, y6 _
20.     g.setColor(Color.WHITE);
    ) ^8 }$ c! b& D" B! x8 |! n# ?( \
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    . n& \- v( o4 G1 @2 w! n0 R: v' R
23.     g.setFont(font0);
    + x% {: J( ^3 E$ B" i6 s
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    : x1 V3 O$ }- d" S+ `
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    - Y) n/ m. j: y) C% O
28. }
    + Y4 q6 f% m: l9 S: ^& ]7 s
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    7 G# ]8 Z7 \7 w) T8 B  V0 k) P
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    ; [3 g: Y& J  u0 K& d
38.         texture: [400, 400],
    ) S" j' M9 ?/ I4 H7 r
39.         model: {
    
40.             renderType: "light",
    # G# W. @3 E+ J4 H0 f
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    % d7 j# ]* b+ G: Q1 n3 [9 f
43.         }
    9 |( C. t3 A4 }. p# G
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    + U. h/ R; c2 [4 X
50.     state.running = true;
    , E+ y4 O5 }$ {5 u+ {
51.     let fps = 24;
    + A& }7 F: ]* n$ y
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    $ f4 J0 N3 ^- I* d! m+ ^
57.     smooth = (k, v) => {// 平滑变化
    . O* {' S5 C6 @9 P' l* J
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    7 U! E; j. b0 S% M) N; a. C
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    3 F5 G4 x: R% c% Y% E2 F. k4 x! v
64.         print("Thread start:" + id);
    ; d0 d2 t! y' V) t1 u
65.         while (state.running) {
    $ ^3 b  _/ T8 K2 h0 W0 [  i' c
66.             try {
    : q( r3 W" p' f! B; V/ t
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    " k% D# ~/ W# _- |& l3 U$ V
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    9 N) G( J6 L) I  U1 i5 D
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    : `! w, ?, T' [8 K: N: Y
75.                 setComp(g, kk);
    
76.                 db(g);
      n' k/ b' H: E+ K* {
77.                 t.upload();
    , Q% V0 J3 n5 F, N/ y
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    1 o# l) k6 u3 d5 ?: y  u( s
80.                 ctx.setDebugInfo("sm", kk);
    0 V1 A, Y- i1 @8 q; t2 C. ?
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    ! I  ]1 U7 J! k0 A+ ]4 T; C
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    8 H6 q/ P% X' X, J
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    . ~9 d; }3 N* G! t4 f7 x/ @
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    - x9 }& r: s7 ~9 C; t- ]
91.     th.start();
    9 i( }, I7 Q" k: m& b1 d
92. }
    " C3 s: H' |9 K
93. 
    5 _. E& c/ y! v- n
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    2 b8 z3 V+ F# c% N/ s3 D
98. function dispose(ctx, state, entity) {
    ( N4 c* q( |: V: ]0 n, S" l( i
99.     print("Dispose");
    8 b$ J5 J1 G( C4 ^9 ?6 ]1 O
100.     state.running = false;
     $ P& T. D1 z/ C/ H) |9 ~5 g+ E
101.     state.f.close();
     
102. }
     
103. 
     ( {& Q! I5 g5 r5 P
104. function setComp(g, value) {
     ! I: f1 c* Y; y3 j; f  Z
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     4 e) o' w! c1 A
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
& C: m. G! S! F
  Z- X- Q$ I% |. t$ ^
8 z5 x# F1 k1 ^顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

( o' _( c) H& b7 C! x甚至双引号里面的自动加粗