JS LCD 切换示例分享

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

1. importPackage (java.lang);
   7 N& G3 _* `. s) Y3 c
2. importPackage (java.awt);
   
3. 
   . ]- n# J+ ?0 |0 v
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   # K, J& x( V# A- e9 C( M0 w( r' g! {4 P
9.     let frc = Resources.getFontRenderContext();
   6 T3 I) G) ~9 F/ Z3 d
10.     bounds = font.getStringBounds(str, frc);
    2 X+ \1 @( @( V9 }* K  }1 ~. @8 ]
11.     return Math.ceil(bounds.getWidth());
    
12. }
    / m3 Q: a; O2 J& D5 q+ S) D0 ?
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    1 o, S# D! Z2 A# S% S$ e; V8 Y3 G; f
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    2 x- b1 b: g0 `6 j  E% O6 J
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    ) W+ C' ^% o- M0 g# `
24.     let str = "晴纱是男娘";
    ' G1 \6 w: y9 J/ B
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    ! e4 x2 w6 |. P5 U; c" i/ A
27.     g.drawString(str, ww / 2 - w / 2, 200);
    2 d' s! C! e8 m  ?6 ^) x
28. }
    
29. 
    
30. const mat = new Matrices();
    $ D  b, J5 i0 D% o( e" o) \& ?
31. mat.translate(0, 0.5, 0);
    
32. 
    / X- r# A; w0 @: e
33. function create(ctx, state, entity) {
      V. B" D  N, h' W' C
34.     let info = {
    ( s$ H3 E2 C+ T$ m4 `  t
35.         ctx: ctx,
    ' Z3 A8 ?- z# D1 @) d
36.         isTrain: false,
    , E. f( N' s& Y8 Z0 E, y
37.         matrices: [mat],
    
38.         texture: [400, 400],
    * ~: v! C6 o6 T
39.         model: {
    5 B$ A6 ^2 Q0 V& {1 Q3 O2 W$ m
40.             renderType: "light",
    # n( N; ]6 h8 ?3 e
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    $ v# d  q$ q; K% K# q5 t( U8 J
44.     }
    . g8 X8 Q) D$ }+ k1 m) I' q
45.     let f = new Face(info);
    
46.     state.f = f;
    0 G( l/ e4 v# w: }. a
47. 
      b7 R+ d% v, ]' Z$ D
48.     let t = f.texture;
    
49.     let g = t.graphics;
    * l7 w. \5 m& @2 ~
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    & O0 [4 j5 }5 M. c8 n# ^
54.     let k = 0;
    
55.     let ti = Date.now();
    " O2 a8 G3 @- m9 V
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    ! v1 R% W+ w% W8 n
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    ; `, N6 C2 j5 ]- G( y8 p/ A) s
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    + m4 x* `. G3 K- W
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    " ^3 e9 T1 C+ m! Q* @; j
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    : l4 |/ m; a1 I/ Y8 o4 W
75.                 setComp(g, kk);
    9 ]7 p. T) g& g" N8 r! q; W0 m
76.                 db(g);
      d% F9 j/ D9 x* Q7 I- H
77.                 t.upload();
    / j7 t7 u+ r% P9 {; [) `
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    8 @! p" h! M0 m; i
79.                 ctx.setDebugInfo("k", k);
    ; ~# L' O; l4 d9 V$ d- j0 X
80.                 ctx.setDebugInfo("sm", kk);
    9 U  |9 J5 K3 u' Q) X5 r
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    ! x4 r. G6 L  N/ F& C$ O
83.                 ctx.setDebugInfo("error", 0)
    6 A5 n, u6 {+ w! M& ]. a
84.             } catch (e) {
    ! k/ i/ W0 l  Q, l5 g  Y
85.                 ctx.setDebugInfo("error", e);
    * N+ R" Q+ b6 g+ H* S+ X
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    & k$ O9 D/ \9 D7 S% W" B
89.     }
    ( i7 p2 a$ c; ~) h+ J+ {
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    . u7 I: l. H0 U6 e* k
92. }
    5 B! d9 |1 r2 y0 d* g( i+ q. H' G, v
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    9 W/ y  ~) o5 v
97. 
    ) L! p8 S0 c% Z$ `6 [6 k- J
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    / j( M9 B1 U  ~7 m( D5 K+ W
100.     state.running = false;
     # C0 R( @( t; A' D
101.     state.f.close();
       C7 E" e6 }  f
102. }
     + w. r0 ?/ N2 O7 Q! a
103. 
     
104. function setComp(g, value) {
     9 y1 d$ J0 G4 F1 z5 Z2 u
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     ; [; j7 e) R2 i3 V2 H
106. }

复制代码

8 {2 |4 \, K1 P3 ~6 \- [/ c写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
" _5 `* g- O; B1 t

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

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
5 S5 j7 F- c, o" e: ~; F2 W

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

" K! Y, b! D* E8 R) U甚至双引号里面的自动加粗