JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   ) m! h- x! E8 R$ `' M) R" a6 P, M
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   5 o+ s$ G4 L. u" o
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ( B( a+ L' Q( C  E5 S8 t; N5 L
7. 
   
8. function getW(str, font) {
   - z8 d1 T$ m4 ?: e
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    / L! n6 e4 b- P% F- U+ @
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    ( `' v, t0 H+ Q$ [3 z7 U
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    " ~  u; S: _2 H; Z) {. f. q
18. 
    
19. db = (g) => {//上层绘制
    + D1 O) ]: i; P" K% y
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    0 L% _4 B& `; _
22.     g.setColor(Color.RED);
    . H/ F1 z: n5 m; x- L% m1 Z/ p. d
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    0 N% ]! K' G) l* r. {
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    / Q% b* D* u4 d5 L* N4 G
28. }
    
29. 
    ' e2 I. X+ t# B4 _
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    ( T6 R8 f0 i: K+ ]$ V. C! N& m
32. 
    8 O- p; y6 q% ^. B" W# C
33. function create(ctx, state, entity) {
    6 j" h! T6 {: M2 g0 J' m/ L
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    : T& P+ P- {1 t# H  b
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    ; y3 z, P3 h; g; L  q9 |1 W
41.             size: [1, 1],
    0 ?; N4 [3 Q  R! o% S; i$ {
42.             uvSize: [1, 1]
    
43.         }
    ; s" J# s. X4 D, H5 Q; Y6 D3 K
44.     }
    
45.     let f = new Face(info);
    & ?2 ]: U, I8 {7 C" `; f. w% S+ @" {
46.     state.f = f;
    $ {0 {' ~- j0 y* i8 o
47. 
    + B, S4 ~" {0 y0 P: A
48.     let t = f.texture;
      u6 [/ T" \/ G; D2 K" M; s; D
49.     let g = t.graphics;
    
50.     state.running = true;
    ' D$ ?) ~% l1 v* J! u
51.     let fps = 24;
    : W: V) f  _/ N( P' l6 b& F
52.     da(g);//绘制底图
    1 N- H/ R$ s  v1 A1 K# B! g
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    " A, T+ k1 j) S$ o' r% Q5 I$ Q( y% C4 A
58.         if (v > k) return k;
    $ M5 p2 c( l. ?8 B5 g0 y$ y
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    " n8 S; I6 n" ~) `4 k; `
61.     }
    * ]3 x7 i9 }' T# t" R- a1 S
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    - W3 f/ b3 L7 p) C0 `
66.             try {
    ) b" t  z6 M; A2 I
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    / y8 E: u7 p( o* j4 x. m6 b- H
68.                 ti = Date.now();
    ; \! I$ _5 l) q" N" s2 X  a1 j
69.                 if (k > 1.5) {
    
70.                     k = 0;
    8 q5 ]( F  f6 @
71.                 }
    " m4 h  @% p; }; v6 E
72.                 setComp(g, 1);
    ! E' I1 E2 ?6 w0 D5 ~8 T
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    ( g$ r( G- s4 A  \% P) w5 v9 b
75.                 setComp(g, kk);
    
76.                 db(g);
    * I' D0 s2 n# ]4 }* p
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    - \" z" @: y( _
81.                 rt = Date.now() - ti;
    * {9 U3 R( z. r. Y
82.                 Thread.sleep(ck(rt - 1000 / fps));
    " W& |' M5 c( R. t$ @
83.                 ctx.setDebugInfo("error", 0)
    : Q' b$ |+ f! l! A( Q0 s
84.             } catch (e) {
    : `* ]) C" r  c8 ?0 W
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    . S" X* `3 {4 V$ C: w& o/ ~# O
88.         print("Thread end:" + id);
    ; r- }8 K2 |1 B. S
89.     }
    ' A" F# `2 S3 ?) z( }9 a+ H' c
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    ' h9 `! O: y1 S* x/ A& C: o' S
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    % W/ v$ C" H' D' g
96. }
    
97. 
    $ q& ^$ n- S* ?$ a- z
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    0 B. a! X  H. F0 ]$ ^" y
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

" k. Q6 Q- [4 n# s  {
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
% ^; v# C7 Y. }1 S- Y2 W! H7 ?全场最瞩目：晴纱是男娘[狗头保命]

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