JS LCD 切换示例分享

8 U- p# x" |, _1 M这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   / m1 m# D* u. d$ m2 C: \( F$ O
2. importPackage (java.awt);
   5 u3 k% n( k0 b3 k
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   ! |& ]  k. Y* Q3 T# R( f( _8 p* h
5. 
   $ b& y! Q1 [9 V
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    - v& m7 @3 u' `& X* V7 i1 X
11.     return Math.ceil(bounds.getWidth());
    5 \: k" R6 a! A, ]* c$ T
12. }
    & ^8 c, S$ U9 J8 W9 I4 ]
13. 
    5 `/ T7 N, w8 ]2 [& N
14. da = (g) => {//底图绘制
    ! u% g; W" I' G- N! ]9 q" C
15.     g.setColor(Color.BLACK);
    2 Z# Z. D6 D; _! f, s5 Q# a6 U- N
16.     g.fillRect(0, 0, 400, 400);
    & \6 Q* I8 W9 H. e. Z
17. }
    
18. 
    ) R0 ?6 m3 f; C) i% S4 U" d
19. db = (g) => {//上层绘制
    / v7 v: `( _5 U& s- c
20.     g.setColor(Color.WHITE);
    1 W0 f8 c4 L% d; K7 ?: J4 C+ }* a9 y
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    , l+ I) L' i/ i4 ]/ u
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    : [+ }$ m+ N4 g/ v7 D
25.     let ww = 400;
    5 \' R& D9 R/ |$ E4 _
26.     let w = getW(str, font0);
    2 W5 n# Q( T" e2 |. B) ]: d, ~
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    & {4 g3 u6 c1 X+ Y1 S. L* a1 B0 s
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    6 s5 b+ z3 W: `: a1 l! K' k
33. function create(ctx, state, entity) {
    
34.     let info = {
    1 S' M( t8 G' l. b
35.         ctx: ctx,
    - j6 P  o  D) s, ?6 [1 D
36.         isTrain: false,
    # v4 j& q/ C# Y* y& m
37.         matrices: [mat],
    * H5 l  m, Z. G/ D) ?; F- {
38.         texture: [400, 400],
    ; F6 |9 s. p4 C6 ]
39.         model: {
    
40.             renderType: "light",
    6 V3 W5 P7 X" O8 I3 s# Y8 @
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    + H' D3 O, P( m! T& [5 f
43.         }
    : d- v. v& S4 c! u, r
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    8 _  k! F( t' l
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    9 f( h4 V8 Y/ e1 e
56.     let rt = 0;
    : d7 _% _6 Y) C/ M
57.     smooth = (k, v) => {// 平滑变化
    ' j) ?# N6 {! {, z. B
58.         if (v > k) return k;
    ' q- I/ Y5 L) {. F+ g
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    # f7 v1 n' R& V" o5 H, U8 Q0 \
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    0 u! }! `% H5 k2 t
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
      f7 J2 z% |* O
68.                 ti = Date.now();
    6 G3 Z; m+ [9 o, |
69.                 if (k > 1.5) {
    2 P) |/ K1 v0 _, R
70.                     k = 0;
    ; D3 R  i0 J( z  [2 x. A7 _$ e
71.                 }
    
72.                 setComp(g, 1);
    / O: \1 |1 y  E2 @, M( ^
73.                 da(g);
    & C; N0 j* x  H7 o- [
74.                 let kk = smooth(1, k);//平滑切换透明度
    ( Y/ w; F: ~6 b; V- q1 J) N
75.                 setComp(g, kk);
    , U; e# m5 J1 [
76.                 db(g);
    ! x/ ^3 f% L$ V7 K1 r- u: L
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    ( O* Y9 ~% g1 ~
80.                 ctx.setDebugInfo("sm", kk);
    & S( ]" m5 M0 _5 o8 C4 t2 f
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    8 F5 F* S! s$ L; K$ g
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    - w3 S; c4 o% @4 H, v8 L. c: k6 w0 ?
89.     }
    4 S9 _: K* ~+ O0 f. m, z
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    ' R3 X0 i9 z2 F0 e
96. }
    6 e+ h0 b5 [; H) u# T' R# q
97. 
    . H+ L* E% V& F
98. function dispose(ctx, state, entity) {
    3 S% _# B& `( a' H/ }3 m
99.     print("Dispose");
    , e: |3 g: n9 ~# D2 B
100.     state.running = false;
     # q7 Q. n6 N2 R! C% o  v
101.     state.f.close();
     9 T% i8 q8 K- Z
102. }
       G  x" F& E! }
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

0 T1 Q% ]: F  y( u+ G# _. N& O- C
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
全场最瞩目：晴纱是男娘[狗头保命]

; x' q. E' P. K$ c7 M/ i3 Y甚至双引号里面的自动加粗