JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   " I( t) w# P7 B6 N
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   " @" }5 p! j% E* N, y% \0 x
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   9 o) p- V7 ?" B  ^. ?6 ~
8. function getW(str, font) {
   3 K: J6 |+ W( m% w8 d  v  M
9.     let frc = Resources.getFontRenderContext();
   / o* a$ v0 b$ d( p: Y
10.     bounds = font.getStringBounds(str, frc);
    5 e" a0 r2 V$ r3 I0 N
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    9 x& d+ g# p  B( u. H  r
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    ) r3 e& o4 D$ V" f$ s( w
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    2 ?' o; T# F9 {* f
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    - s) e4 H1 M4 {2 D* W) ^1 }2 I. p
26.     let w = getW(str, font0);
    / t9 J: n5 G" o% R- H; y& }
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    
30. const mat = new Matrices();
    1 s; O8 N) o. W6 ^3 ]( R1 b! k8 e7 |
31. mat.translate(0, 0.5, 0);
    
32. 
    ( K; `1 O, s) @( q
33. function create(ctx, state, entity) {
    % _, ?' |' K6 V+ I* X/ s2 ?
34.     let info = {
      C8 S) a& r+ Z) z9 m- F( e
35.         ctx: ctx,
    
36.         isTrain: false,
    - Z  @+ i" w9 K! i8 Y6 Y/ A$ w
37.         matrices: [mat],
    
38.         texture: [400, 400],
    . L" w, R. e% B
39.         model: {
    
40.             renderType: "light",
    1 e" J2 K: H  a3 L" u; W
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    9 e' E  `; ?$ p1 S5 K- ^
44.     }
    
45.     let f = new Face(info);
    . e$ F  F+ W* x. o, g
46.     state.f = f;
    ' U7 f4 S+ K6 @5 I' G$ h' G
47. 
    % W8 A' X6 X0 a6 d
48.     let t = f.texture;
    
49.     let g = t.graphics;
    : o9 e8 ~: U3 H6 N3 }1 }( W: X
50.     state.running = true;
    
51.     let fps = 24;
    / y( t$ n2 }$ u) \9 ]! r
52.     da(g);//绘制底图
    ; u& n+ w6 m# p- ]& m5 |0 F
53.     t.upload();
    
54.     let k = 0;
    - d) A) D( i& Q: d/ B. w+ s+ B
55.     let ti = Date.now();
    7 z; I! U( G7 B- G: p* b
56.     let rt = 0;
    : H5 O& I: }, |: U7 ]
57.     smooth = (k, v) => {// 平滑变化
    2 I% h, h1 V6 G2 [8 t$ b
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.     }
      ?$ p: m- f3 M. C! y
62.     run = () => {// 新线程
    
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;
    / x8 A& G  O3 Y
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    5 X6 X. T; u2 K/ C( V
70.                     k = 0;
    
71.                 }
    ; H2 ~- @* `6 d$ [! }
72.                 setComp(g, 1);
    % T+ H; t# A( |, ^4 \
73.                 da(g);
    5 C" j8 e) s0 D
74.                 let kk = smooth(1, k);//平滑切换透明度
    6 b% x9 a5 e; T  O8 D
75.                 setComp(g, kk);
    " w% }7 e0 g2 v
76.                 db(g);
    / S5 f# ?+ \4 n  U, Y5 J7 J
77.                 t.upload();
    " J& t5 d. C; |7 C
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    0 V, U3 I4 s3 c! K
80.                 ctx.setDebugInfo("sm", kk);
    ; I8 j3 o" L/ H2 l* s( o
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    7 d' _1 c1 ], S8 a3 w) A# R
85.                 ctx.setDebugInfo("error", e);
    * _; m2 Z0 r" b
86.             }
    9 C& r: g6 e3 Y; [' n
87.         }
    
88.         print("Thread end:" + id);
    3 ^# I; o) ?  n; N, x# v/ ~
89.     }
    , D1 m0 Y- p. _, u& J  {/ f5 ~
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    6 U5 ~+ J: B" w7 Q7 i
92. }
    
93. 
    6 H  s) U( s+ N; s2 h* n# j% k
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    ; e; I# F% Q3 A) j  l- S$ H8 r. U
96. }
    : F$ s; h  [" q, P5 j0 V
97. 
    
98. function dispose(ctx, state, entity) {
    7 c% G2 {$ b6 m' ^3 [
99.     print("Dispose");
    
100.     state.running = false;
     ! q. T( e0 G8 @4 i7 X) }
101.     state.f.close();
     
102. }
     - b; c6 s) l. \+ b# j
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     : j5 ]9 O/ A  y# r- Z, k
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
3 @) d: I4 v+ e8 ?6 e9 O. D* m
1 A. g+ ?+ U6 e/ _
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
6 x  j+ U" M: u

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
/ F8 O: X9 b" d6 {' {8 j% ~  w全场最瞩目：晴纱是男娘[狗头保命]

, \4 M7 Q8 {8 b0 \' a+ t甚至双引号里面的自动加粗