JS LCD 切换示例分享

3 G. x( ~' F0 Q4 V" D* ^) M! D( |( B这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   7 X+ s+ F+ P: ~& Z
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   7 K* h+ K1 A2 |/ Z
7. 
   . [9 t5 x8 A" V4 N& o6 j
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    4 X4 i' v5 }. K% K0 ^) s, b
11.     return Math.ceil(bounds.getWidth());
    7 I0 K' d% U2 K3 r
12. }
    - c6 G- @- {2 }# Z! _! i% o
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    + x4 I+ U, W1 T$ x7 {5 j8 P
17. }
    0 C6 K( m% ?( p% u9 r( i. f3 B6 ~4 T! ^
18. 
    $ s9 ?5 i% D, a0 J) X: _& z
19. db = (g) => {//上层绘制
    : B' @4 _/ ?- S$ Z& N  \
20.     g.setColor(Color.WHITE);
    2 y0 O& ~" ]) R/ @, d3 ?
21.     g.fillRect(0, 0, 400, 400);
    3 O4 G2 O5 C, ~' q4 v, w, A* F. Z
22.     g.setColor(Color.RED);
    . ]6 B2 Y4 n  J4 ?
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    ) e/ H% F9 l5 k* P2 Q& z, n
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
      n2 b1 A, ^7 ]( v) q( j3 b
28. }
    
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    7 N. b, w- J0 Z: u
33. function create(ctx, state, entity) {
    5 Z, o! W% n+ t+ g
34.     let info = {
    " ?& q4 _: A4 L4 K# }1 ?$ \
35.         ctx: ctx,
    5 _# ~6 m7 g9 J4 q/ B- h7 G* G
36.         isTrain: false,
    ) q/ |3 @3 t) }( _( e6 j
37.         matrices: [mat],
    5 @- P) ~& {/ I6 }4 o, e8 u+ `
38.         texture: [400, 400],
    . J* x, d+ s9 x  k- {$ e6 h- r
39.         model: {
    3 e5 U* P, @7 s( m0 b1 ]" W
40.             renderType: "light",
    
41.             size: [1, 1],
      Q2 Z/ g( u6 d3 v1 f
42.             uvSize: [1, 1]
    : u$ ^+ o6 n; j+ J: M- s
43.         }
    & t( ~/ v# i( Y5 N8 m; ?  k
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    ! o, y( k" H7 m) v& ?
47. 
    
48.     let t = f.texture;
    % L- _1 o5 \! n7 x  u( r
49.     let g = t.graphics;
    
50.     state.running = true;
    3 N4 \) o1 c  C  e3 \
51.     let fps = 24;
      M& u, }9 E$ h8 ]) ?
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    $ D9 \# |% _- _) z9 _" @8 {
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    8 J+ j4 B! \2 T4 y
58.         if (v > k) return k;
    ! r+ i" \6 [+ i6 ^% v+ A% @
59.         if (k < 0) return 0;
    ' R! @; }, V' x: m& x( ]
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    1 C4 K* ^/ E: f0 o
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    5 q/ q1 ]. G% i3 b5 U* \. h1 a3 G
64.         print("Thread start:" + id);
    ! U% Y5 l) U( Q6 _  b, \0 W' O) z
65.         while (state.running) {
    " P! P2 m* i4 [' t5 f
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    . M7 v1 @. e: u6 l
70.                     k = 0;
    & }, K1 t4 |, ~1 U/ z
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    3 R; k2 G3 \  {' I: c
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    + X0 d4 b* y+ s6 v! p) M
79.                 ctx.setDebugInfo("k", k);
    " s1 [7 Q$ B& M, d/ ]
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    6 ?' r7 T: ]5 n) e
82.                 Thread.sleep(ck(rt - 1000 / fps));
    0 u6 y: l: R0 z) \9 b: S. ^! f
83.                 ctx.setDebugInfo("error", 0)
    ; O9 |, O2 X7 ]" S6 K1 ]5 P
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    6 j4 {8 A; O7 _/ L7 S8 g
88.         print("Thread end:" + id);
    
89.     }
    $ k4 l! x* c* }6 k' f" Z
90.     let th = new Thread(run, "qiehuan");
    . n" {/ b( ]* c5 u. q& Y3 |
91.     th.start();
    ) u6 }0 C. \+ N0 w
92. }
    & x9 E4 c5 v! z# r& E9 y4 A' x
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    9 g' l- h! g9 K0 b; Y3 H
99.     print("Dispose");
    : u  ^% N' `- a1 U9 P0 Q
100.     state.running = false;
     % J; F4 ], [% Q" }1 {- ]% g8 N8 G
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     5 ?7 U6 z/ Y* r! D
106. }

复制代码

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


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

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
. y3 p- E* ^% O+ O* S0 u

Hobbytimeblank 发表于 2024-11-16 20:38
& e( C# h1 R9 ~! z: U7 ]; l( i全场最瞩目：晴纱是男娘[狗头保命]

9 A$ P( z# H' `4 H  ~$ o0 l甚至双引号里面的自动加粗