JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   ) o( m- E! u0 Z" }
3. 
   : h& s5 \0 ?1 A8 y2 D& t
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   8 W6 W; o: J  x: c8 X" `1 L
5. 
   ) z  r( E& F0 N( h
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   " V; y: D  ?  c& \. u8 `
10.     bounds = font.getStringBounds(str, frc);
    ! z! m1 G2 G. A/ @! N+ w
11.     return Math.ceil(bounds.getWidth());
    1 m1 k$ c- ^) x% S6 C
12. }
    . Z9 O  B% ?) `4 a" h* `9 C
13. 
    0 a& O- F. M! b3 E* \4 n
14. da = (g) => {//底图绘制
    7 b9 S9 }* `" T3 K
15.     g.setColor(Color.BLACK);
    9 f* h! p1 Q3 ^+ m1 k: b  n5 k: n
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    7 K4 C/ P. f/ j* O! r
18. 
    6 `+ s% N, H+ F3 ?; @8 |4 Y
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    & t) e0 Z7 ^! Q6 s$ z1 g
22.     g.setColor(Color.RED);
    # k$ q; s1 o2 R& L
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    % w, [( @$ x; Y* l7 R$ k# p
25.     let ww = 400;
    - ?$ V+ }0 N6 i" c! T
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    . O( V/ ^% L  O% F* J
28. }
    5 S( o$ z2 N* B1 T4 z  D3 x7 O
29. 
      F+ `' s7 P7 h" K
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    6 M" @  Z0 ~5 m8 L1 h9 U% F* L9 D
32. 
    - S4 {" M1 S$ @6 q
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    . E9 B! _- T' Z/ G7 F- N
36.         isTrain: false,
    0 Y3 \$ [6 q* }% \8 R
37.         matrices: [mat],
    $ }  S+ V/ ~4 k" m
38.         texture: [400, 400],
    % v+ N% i0 K$ b' `5 [5 s
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    4 C4 G0 y1 p: x' Q, h% T
42.             uvSize: [1, 1]
    
43.         }
    / n' x0 W! ]  y, h# L  c. T
44.     }
    
45.     let f = new Face(info);
    . D6 v* C) M& y" @
46.     state.f = f;
    
47. 
    1 y( e$ I6 A+ L, P8 h
48.     let t = f.texture;
    
49.     let g = t.graphics;
    3 o1 N  ~+ F; q* z5 A
50.     state.running = true;
    
51.     let fps = 24;
    / y5 S, L" S7 X4 B. T4 Z
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    2 F8 i2 `  |2 Q+ |
55.     let ti = Date.now();
    . W, I  a0 Z0 ^3 s, d5 p2 R$ e
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    ( k9 F1 p; ^' f9 U4 N0 Y
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    2 Q8 `% W: {% x
61.     }
    4 Q% G( I# @, ?- e
62.     run = () => {// 新线程
    + w7 \8 @/ f6 _) ~
63.         let id = Thread.currentThread().getId();
      L8 T$ b& D& k# l7 F
64.         print("Thread start:" + id);
    0 p: B# d. w+ ]% n/ S; y
65.         while (state.running) {
    
66.             try {
    8 |5 X. `" {" \5 s& g9 n+ P$ _% k
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ( c5 [2 U' R4 r# @/ \1 Q* b0 l! U
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    ( p3 Y( Z) P! ]1 f: u
70.                     k = 0;
    & ?0 ^8 s! K. ^0 y" N3 n. p
71.                 }
    ) T! E/ E' f5 Z% d: l; K
72.                 setComp(g, 1);
    0 e4 _8 U/ x. H- w6 X7 n* `/ ?
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    2 q1 @) A% h* Q4 v  p4 c
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    $ L! L5 o4 Y4 B2 N3 N
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    9 X: G! Q3 l7 Y7 N
83.                 ctx.setDebugInfo("error", 0)
    , q4 |1 V& g# c* \5 u: H. d
84.             } catch (e) {
    * g, S7 K6 U' V9 d2 g
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    0 u) c1 L0 Z) p+ Y( S
88.         print("Thread end:" + id);
    / O. M1 I. Q. A$ Z/ v
89.     }
    4 b! o+ s) k' n" d* ?
90.     let th = new Thread(run, "qiehuan");
    * b5 P" L  Q' d' t4 H2 u
91.     th.start();
    * F* ?: J4 e1 [& |; B  l) n; Z$ z
92. }
    3 b9 v' \7 {0 {% E* y% L+ Y  P
93. 
    , y5 P8 q' w3 j5 N8 r6 Z
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    2 [, B# i# e6 E# R! x$ f
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     : |7 T- A" A1 h# e$ H1 h6 _
101.     state.f.close();
     3 P1 \1 [- l8 b
102. }
     $ p3 O0 ?4 g3 V  L. x
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     1 d5 b8 j2 Z7 t# D# Q( P2 [8 y
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
5 \, \+ d$ x) b6 @5 r
2 K" M. c: m9 G9 F8 I8 R- {0 h5 n: k" [
/ V6 C, K8 _/ y- B$ o; x顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
) j2 h1 n8 L5 M7 v4 }, R6 [; p

Hobbytimeblank 发表于 2024-11-16 20:38
/ v  {# d' _' m8 H" f: Y: p全场最瞩目：晴纱是男娘[狗头保命]

9 g3 `# ^. b/ e! [) X甚至双引号里面的自动加粗