JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
7 @" w# u; @/ Z, A+ S- I

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   ) P& ^$ H6 S7 e* P# I* U( z
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   ) h6 v4 a& I* u; U5 L
5. 
   + I0 t% P$ x3 E' n
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   % s, l. `% e& ?( D: V8 B; Q6 C! O
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   & o4 \- `* f, x8 i5 R7 Z
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    # }) o) H$ W, d' G9 a
12. }
    
13. 
    ; v, H% Q2 K. Y7 _9 c3 V
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    / \+ @- @0 u1 R1 z: u! ~% _* G! _) z0 S
17. }
    " q, }& B) S& O) J. @# i2 s  M
18. 
    ! O4 `- A0 b! \( u
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    ) D6 S; d: Y( C; I2 G" N# m
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
      f; }8 c1 a, H
27.     g.drawString(str, ww / 2 - w / 2, 200);
    , z; y) n+ s2 W3 t8 a) L1 x$ @
28. }
    , j1 Q) o* K# m, g; i! |
29. 
    . M. J) u- X+ P+ \; ~! W
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    : t2 Y# J' M8 W2 d) S4 y  k
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
      r/ q& n- r4 A
38.         texture: [400, 400],
    
39.         model: {
    $ M/ I$ P' _2 Z! y) f5 M1 z
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    - K5 a; G$ D9 p
45.     let f = new Face(info);
    - m) `9 a. n, g8 n3 C* }- d& U9 z1 r. N. n
46.     state.f = f;
    / p+ H& D: z/ p! Q9 j$ }5 t
47. 
    4 v! ]$ h" T8 @8 `6 A
48.     let t = f.texture;
    7 r* H( v( U7 ?9 w1 r& S2 _9 c! m
49.     let g = t.graphics;
    4 X) [6 x7 p* C6 t+ \4 k! j) v
50.     state.running = true;
    $ j; j' R$ K& L' a
51.     let fps = 24;
    # O! P3 t/ w( _+ E, y- R% n
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    ( o5 {* P6 W. {
55.     let ti = Date.now();
    
56.     let rt = 0;
    9 x+ a1 _, s/ K) R
57.     smooth = (k, v) => {// 平滑变化
    , C- U- F5 O- c& ~1 N% b* l/ x, s
58.         if (v > k) return k;
    . m* T: G7 Y' j, v! H& @" U" e
59.         if (k < 0) return 0;
    ! [) r  ?, M4 c# ?* n, {+ ^$ N
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    + J5 F$ P# t- ^7 B2 H
61.     }
    8 O6 o% n/ }* y0 \) k
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    1 U! g' J3 V' y: m  G$ o. J
66.             try {
    * J$ Y% F/ \' d6 I( ?) R2 A
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    # P, b/ I' h  w6 V# t
71.                 }
    
72.                 setComp(g, 1);
    * M9 t  ?! p  i5 `
73.                 da(g);
    6 ~8 r1 e6 [- N3 Q& {+ y1 |
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    ) L% N+ y; O, d: W4 o
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    ' C9 o3 G& G5 G& ]7 J' E8 K" U
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    ) P3 W$ _% J* j! J. x2 B( }
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    7 E4 z# c' h2 e" t. M8 f
84.             } catch (e) {
    / l! ]- k. j, a) ?: M5 o9 n- y1 Z( W
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    - ~8 x% a* H* x  a' r8 w
87.         }
    
88.         print("Thread end:" + id);
    " h9 C, B5 |0 y# P9 t
89.     }
    1 _+ P& L: i1 I. P$ R
90.     let th = new Thread(run, "qiehuan");
    & @3 @3 i! Y. M2 ^. Q
91.     th.start();
    
92. }
    4 L7 s7 ~0 O$ T4 f  d2 P
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    # y$ b; B: n2 p
96. }
    
97. 
    + i+ b4 v; v1 a# u
98. function dispose(ctx, state, entity) {
    . K8 j0 Q. A9 T* _- _
99.     print("Dispose");
      M" ~5 p" L: J% X* `
100.     state.running = false;
     
101.     state.f.close();
     ( j2 o" K% h( A. z$ J" f7 k$ \
102. }
       l8 Y! V% L& `7 }
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     5 i0 i6 O- ~5 `) b- ~) J: ^
106. }

复制代码

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


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

看不懂，但我大受震撼

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

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

' L% n- B. O' @$ P. F4 `甚至双引号里面的自动加粗