JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   # P" Q) G' t1 _$ |8 g/ O* ?
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   ; `( n  I- e" M. }3 m6 I5 x& q+ S
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   4 J5 {" M3 h" V$ o
7. 
   
8. function getW(str, font) {
   8 s1 e0 c6 }2 P3 J( Y- A, e. S3 z/ o3 N
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    7 ?* `- ?1 A$ n2 H9 d- s# a4 H
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    3 d0 q" _+ B/ T; j
18. 
    # Z8 A4 L/ [& ^3 b% M- S
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    5 v. ]( v/ S5 E, W' [+ V
21.     g.fillRect(0, 0, 400, 400);
      s+ Z+ O3 ~( {2 F
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    4 ^0 x, ]2 C6 m+ L! [0 M
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    . F/ z/ V% ^& z# m0 F* o/ e
29. 
    
30. const mat = new Matrices();
    4 o% w: x- F, d# f2 {
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    0 K2 k1 |! a3 r
34.     let info = {
    8 a; u% N5 |; n4 x' g; H6 f
35.         ctx: ctx,
    # S5 U  Z) Y( N, A+ v
36.         isTrain: false,
    8 I+ r  t7 M' d! v! V
37.         matrices: [mat],
    
38.         texture: [400, 400],
    0 [* N: A: K" S. a
39.         model: {
    8 p8 r- T! I0 \6 B% R2 E
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    ( a6 _  h, t- U) k% \# q
44.     }
    
45.     let f = new Face(info);
    : E" r  W$ I* E2 z3 d1 ~) Q0 T
46.     state.f = f;
    
47. 
    ( y1 H# \5 V; ?9 p  {2 ^6 W
48.     let t = f.texture;
    * v( k6 G" u; A, E' u, D# u+ j$ F
49.     let g = t.graphics;
    % g: k/ o# V: Z4 u- }4 j0 |  a
50.     state.running = true;
    + b/ W* z  B/ k1 o0 E
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    8 w2 [' a$ m) _( g
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    & L/ Y: ]0 z) x
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    9 q0 h. ?  V- n
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    + v( G4 j2 ^; x- t: n' o9 V2 A$ ]
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ! y4 N0 Y, t; {' m7 }6 a
68.                 ti = Date.now();
    5 X0 b5 n) `* P, c; i6 M0 ?
69.                 if (k > 1.5) {
    + Y6 o* G" T4 V# ]
70.                     k = 0;
    
71.                 }
    6 j! h8 A! N4 y6 c; x$ O- ~
72.                 setComp(g, 1);
    
73.                 da(g);
    3 o8 U1 f8 U$ q8 ]7 G- g! G- }; F
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    4 E7 x% V9 V# Y0 ^4 g* q
76.                 db(g);
    - A+ s5 A. n: a$ A4 F& S
77.                 t.upload();
    6 M) J7 }, q! M- ]' v
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    + J6 e$ e7 B7 ?' |3 A% c3 e" u9 Y1 o- G
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    - d; b3 a5 x4 N& ^& u
81.                 rt = Date.now() - ti;
    9 x: _, H  E0 r7 s; G" Z4 n9 O5 M
82.                 Thread.sleep(ck(rt - 1000 / fps));
    1 |. _+ Q" l1 [$ `: V, \
83.                 ctx.setDebugInfo("error", 0)
    : f1 Z9 t+ o0 j  [5 M& s
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    - m  x2 q+ ?/ Z
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    ( l+ n# x* e4 K8 }; v
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    . R9 l7 W8 o( a6 r
95.     state.f.tick();
    ' w4 O7 s/ j; q. E& ?- z
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    : w) H. G9 I  r# ~% b" h+ u' G! W& }7 D5 P
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     ! Z5 m1 m6 R4 B  m" ?: ]9 U/ _( n1 l+ `
102. }
     
103. 
     ! |. M; l/ Z( N4 u( m
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

" {0 R8 d4 P# H2 p* `写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。


5 L2 |3 Q! ~/ R5 {8 s, p9 B顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
0 n$ Z+ a9 m! c6 {% a1 f0 B! @+ Y  x

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
' `% b- v5 p5 M1 r" k, {" K全场最瞩目：晴纱是男娘[狗头保命]

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