JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   / E9 i8 o3 ^$ S( w8 K  K: l# y
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   1 W- Y' N1 ?: ]/ [7 K# P) V* \
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    ! I6 c# C2 Y) Z0 ~
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    / V! N* G9 \) p3 E: v6 e( K$ H
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    $ H1 X1 [+ h) S
19. db = (g) => {//上层绘制
    . o6 ~1 q- f, @  }
20.     g.setColor(Color.WHITE);
    6 s6 I8 K; _# n! t+ W% m) M9 T
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    9 {' O' S( M8 L5 u- B( X: r& l
24.     let str = "晴纱是男娘";
    3 u7 @( f) b, s1 {/ X  r* {
25.     let ww = 400;
    " s% N+ ^% n  ^! O) c# M' N7 c
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    - a9 U, D/ z/ v1 g+ r" Q  e5 Q* F$ Q. V% T
28. }
    
29. 
    9 k- }- z$ v* [' _
30. const mat = new Matrices();
    9 i/ Y3 ?, H" ]$ u  b
31. mat.translate(0, 0.5, 0);
    + B1 \3 x  w2 i& X
32. 
    * F. W- R7 o% f
33. function create(ctx, state, entity) {
    
34.     let info = {
    6 Q2 v0 O+ s- w  E7 N( U
35.         ctx: ctx,
    % p# ?- K4 R3 `+ U- Y" F# a4 G
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    / q7 X( T) j4 r% ]
39.         model: {
    ! m; N' Z) o+ m, O" c
40.             renderType: "light",
    
41.             size: [1, 1],
    + F5 I$ F, c" }8 P& m+ i5 [
42.             uvSize: [1, 1]
    
43.         }
    . x) p: h7 A! A  |( n5 q; {+ ~! t- p
44.     }
    + B- y. G6 ]7 I* X& q5 c8 w
45.     let f = new Face(info);
    7 L% ?0 c0 Z$ T6 H, o
46.     state.f = f;
    6 F: D) E8 `- O
47. 
    . r/ a: D  F( A" e' V
48.     let t = f.texture;
    
49.     let g = t.graphics;
    4 f* I! @" \  R! h
50.     state.running = true;
    
51.     let fps = 24;
    5 }* m% j5 c4 x% D
52.     da(g);//绘制底图
    4 j" ]$ h# K+ o1 G$ b
53.     t.upload();
    + j, e$ C& R) K
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    1 o3 r* t4 F! f( v3 j
58.         if (v > k) return k;
    * G. d* Y0 V( U5 ~/ T) N
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    ! b* a, i) ^# [" n
61.     }
    
62.     run = () => {// 新线程
    ; g2 C( R$ P; g$ e; K
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
      w* k7 M  I8 J* ?; G
65.         while (state.running) {
    3 E+ i; w8 z3 z: K( k; A3 D
66.             try {
    ' [( {; F/ U0 ]# Z; e* B% B
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    " [2 K8 R& u0 f/ P& w" A+ D" ^1 I
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    9 s5 `2 q: T8 |0 q# u
74.                 let kk = smooth(1, k);//平滑切换透明度
    # M% p# P) b- b8 i
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    8 n) `3 ]. n. m" }1 K0 z
80.                 ctx.setDebugInfo("sm", kk);
    4 h; m; `& t! i7 J$ ?$ ?, L
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    ! @7 u( C" c9 K+ T5 F
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    ; [6 u5 e* U% w; L
87.         }
    " v; U, ^, V5 a
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    0 A% g  h) Y1 X2 y
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    + j1 p, [6 _; C8 r( Q
97. 
    
98. function dispose(ctx, state, entity) {
    - }' f; b% O& e9 i9 h9 m
99.     print("Dispose");
    1 C: s1 b2 l- s; B
100.     state.running = false;
     
101.     state.f.close();
     ) [, ~9 K6 C3 P9 n0 ^; |3 N" F' h
102. }
     2 B* N4 \* s* h$ c. ?8 I: c6 A0 F
103. 
     " W6 u% [" y7 a
104. function setComp(g, value) {
     0 p- Q6 [/ T5 a% K1 B+ B' ^
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     / P8 r# `  k$ P: N- N
106. }

复制代码

2 V1 d  r+ l/ `" e  t% \写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
0 |% I# a8 N1 [5 r- U, [
6 h, V5 W0 O7 v7 y% H7 `
* B6 p& o9 V: r顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
' ]3 `  n( r) q0 r全场最瞩目：晴纱是男娘[狗头保命]

: T! @/ s& J* b2 [4 X5 N6 a甚至双引号里面的自动加粗