JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   . G: C7 h" p9 c* B
3. 
   * w$ g4 Z2 C: Y4 o( t
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   3 Y2 r- F, G+ W& ^: a
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   / ~$ T8 v  r4 e/ }9 l
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   + C, d) K2 l8 U* I8 D
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    2 W% w5 v3 N2 i  @. V
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    6 e7 g6 R/ V  @. W; i
18. 
    9 A7 ]! h" r4 U1 U2 C) l
19. db = (g) => {//上层绘制
    # z5 O/ g- S6 j+ S% q* M
20.     g.setColor(Color.WHITE);
    6 S8 c3 M; F, Q; @5 @
21.     g.fillRect(0, 0, 400, 400);
    2 _7 ~1 h4 k, @3 b
22.     g.setColor(Color.RED);
    / A: l+ \/ w' S) L* |2 }) R
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
      g$ N7 J: S4 p8 r  S
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    ' p8 [2 j* @) q, w0 y& I3 ~+ c+ Y
27.     g.drawString(str, ww / 2 - w / 2, 200);
    8 h5 S) a4 o& M. f: P
28. }
    
29. 
    
30. const mat = new Matrices();
    ! r# B. y; [) B- [! H9 h
31. mat.translate(0, 0.5, 0);
    % k9 }6 H0 `4 S/ `$ l
32. 
    & y- H& B2 Y! P$ I' c
33. function create(ctx, state, entity) {
    3 O# S- N  }' p8 n$ T. c1 I5 G
34.     let info = {
    
35.         ctx: ctx,
    1 R% e4 U: q. @# `$ f
36.         isTrain: false,
    
37.         matrices: [mat],
    3 R" g+ [; f8 m
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    , S) l; o3 p+ S: }$ j
42.             uvSize: [1, 1]
    ; {: c8 V7 g: `5 J
43.         }
    ( m  G% R8 w+ U7 b
44.     }
    
45.     let f = new Face(info);
    , ]8 g, m4 w7 b
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    % \& Q- C) U% k4 K
49.     let g = t.graphics;
    : b. q% P" q9 S8 N; Q9 s1 e  Q
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    5 f$ d% R9 i' I% ^
55.     let ti = Date.now();
    
56.     let rt = 0;
    ) `/ j& h0 F# D' l% W
57.     smooth = (k, v) => {// 平滑变化
    ( z  w4 s* L. A) H% ]+ \; `; ]4 z! F( G
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    : X" z% f- _0 N1 }5 D, P
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    " T6 b7 k& {8 M, i2 ]2 d! g) v% Y
68.                 ti = Date.now();
    ( ?0 H, G2 A1 C6 ~; a1 Y! S; }
69.                 if (k > 1.5) {
    
70.                     k = 0;
    ! S- t$ L4 _8 y( y9 a; N  K
71.                 }
    $ C6 \4 X# H5 }& T) y' o: [4 L
72.                 setComp(g, 1);
      ?9 X8 J* Z/ b" z
73.                 da(g);
    2 u1 C+ J1 E+ M
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    * R. {9 a, f6 \+ H! z! I. }" w& C
76.                 db(g);
    $ ]7 H6 {# U* j, ]
77.                 t.upload();
      _  K# \* `: B; l7 e* Z$ ]
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    - C7 A7 o7 K2 z& }
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    % u: T/ U/ r0 L5 W( m8 u2 ^
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    & x% d! @7 c" F8 P
91.     th.start();
    5 M0 m+ @- {7 h) v  P
92. }
    . R  W" k0 u! m; ]
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    # `' Q5 D9 J/ Q" O
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     5 b+ z/ A% r, @* L5 M5 k
102. }
     
103. 
     2 r/ Q5 |4 b% e3 Y8 G! u9 ]6 T
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     3 v& m! B" |8 j- t5 B6 z' V
106. }

复制代码

! U8 w3 c4 N7 s9 g" X1 c) H写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
- t% _+ p' g  o1 u% W/ W

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
7 q' d8 y8 Y' j! {2 @. A

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
- s! v* I; Q" h( z. G$ x

Hobbytimeblank 发表于 2024-11-16 20:38
3 a7 u4 L8 J2 I7 J" N全场最瞩目：晴纱是男娘[狗头保命]

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