JS LCD 切换示例分享

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

1. importPackage (java.lang);
   $ C' \! a% S& B' E7 I" D0 T% i
2. importPackage (java.awt);
   ( [" R! |6 W6 h; C
3. 
   , N2 j. C/ c1 X- V0 P4 U) C
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   9 W" Q* g* Y8 _4 x& m
7. 
   
8. function getW(str, font) {
   ; I8 P! L. ^8 y6 P
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    . Y( S4 Q  I+ J5 K' J0 `% r
12. }
    4 b' q: W& W; `8 I+ Z7 \
13. 
    1 _" b0 p- A3 z9 w7 v( B
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    + l4 A4 F! R- v( b! z: Z
16.     g.fillRect(0, 0, 400, 400);
    . j  ]: ]& L) m) W
17. }
    7 h. h# S* b4 C, A  s
18. 
    5 r% w3 Y1 d1 x+ v# g
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    ( M( E. @& _! ]6 N8 ]2 G7 X
22.     g.setColor(Color.RED);
    : N& o, [. d/ u, D; e8 y
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    5 m4 z" c8 N  l
26.     let w = getW(str, font0);
    0 z/ `8 d9 V6 E  O
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    : [! E. ^7 ~% Q
30. const mat = new Matrices();
      W+ Y* \# X/ e6 n
31. mat.translate(0, 0.5, 0);
    
32. 
    ) K8 [5 z+ W9 |. k4 B
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    3 b8 s- \, j  f
36.         isTrain: false,
    6 e5 o6 {+ V: c( ]) J/ z
37.         matrices: [mat],
    2 P; j9 e0 z' o& S" V7 K* ]
38.         texture: [400, 400],
    & t+ V+ c+ }7 V. I5 o/ H
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    $ c  [$ s1 g* K; p+ X7 A
42.             uvSize: [1, 1]
    
43.         }
    ' r8 f+ G2 Z5 O( Z" j$ n* o
44.     }
    " p# ^" t; x5 _  s, U' v+ ~8 d# f
45.     let f = new Face(info);
    ; V' L: S2 u) H) e6 y, k% d* |- c, [
46.     state.f = f;
    % n: H2 O+ f' F1 X/ _  V
47. 
    " f6 l" ^# ~& s1 ?+ B; F: N; d! I
48.     let t = f.texture;
    5 w! j: F5 @3 ]5 e, [
49.     let g = t.graphics;
    
50.     state.running = true;
    " W& A* B5 h. D$ b
51.     let fps = 24;
    
52.     da(g);//绘制底图
    5 @! }. {, ~( z: \- E4 c
53.     t.upload();
    
54.     let k = 0;
    ! W7 f: c- H+ J
55.     let ti = Date.now();
    & s! V3 r( }: H6 L6 d
56.     let rt = 0;
    3 u4 F) V2 H2 I; L+ S, {
57.     smooth = (k, v) => {// 平滑变化
    8 c& Q9 i+ n( p, d8 Z( y- I; i
58.         if (v > k) return k;
    4 W3 n+ w% y9 U/ t9 `6 H6 v
59.         if (k < 0) return 0;
    1 I$ M5 |( j! s
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    % {* I7 ?) h- a9 N3 g
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    5 z3 x1 p) |4 \8 h: Q; q8 v
71.                 }
    
72.                 setComp(g, 1);
    ! {2 Y. p& F+ Z9 V5 y" m
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    $ O/ e5 y* M& d" b+ i! z; G
75.                 setComp(g, kk);
    0 L, y+ U2 z5 F) u8 i8 ^3 b) a1 }) F+ N& w
76.                 db(g);
    
77.                 t.upload();
    . D# z- o# J, T4 O  G
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    6 w4 q* @: }7 q7 i$ r
80.                 ctx.setDebugInfo("sm", kk);
    # B8 L& p, e$ p/ D) r3 U% h% Y5 `& W
81.                 rt = Date.now() - ti;
    0 E6 b8 X5 z9 Q+ A' r% o+ P6 j( \
82.                 Thread.sleep(ck(rt - 1000 / fps));
    * ]3 T8 ?8 M% d8 h" y& k. g8 V
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    3 e0 y7 O1 _" T+ r
85.                 ctx.setDebugInfo("error", e);
    2 w! p3 ~+ r4 j0 f
86.             }
      G. `8 F4 O  X& s, w/ q' b: m4 v/ P6 A! B
87.         }
    + ]# c; j. f/ A3 v( W) ~  Q7 ^
88.         print("Thread end:" + id);
    , Y, z2 w; p, \! U! m1 _
89.     }
    / z9 q; _4 ?  v: q. H9 {% t6 q8 q) C
90.     let th = new Thread(run, "qiehuan");
    7 i+ m. u. k% D$ {" _9 Z4 i
91.     th.start();
    
92. }
    * X  u+ Z. ^  ]2 @/ d" w1 J) F
93. 
    ; f! e$ l# f0 }  g
94. function render(ctx, state, entity) {
      ~2 Z" F! v/ M* z
95.     state.f.tick();
    
96. }
    * R( W( L% |) S3 j& X$ V
97. 
    * n" r2 [3 _3 D* I$ i
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    4 Q( T! @( J6 W: F3 L
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     + y, t3 c: }7 v8 T
103. 
     9 ?2 i! e0 C8 U. D" a
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
% n1 k. s- N3 p

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
4 `+ M4 C' k0 i$ K9 |全场最瞩目：晴纱是男娘[狗头保命]

/ F, v  D- ~) u' e) q甚至双引号里面的自动加粗