JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   9 D/ u. [4 P2 l6 V( [5 L* C
3. 
   ' J" o; x5 H/ p* O' d+ l+ o
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   . S8 A, j8 v+ |. J5 b8 ^% f+ J
7. 
   
8. function getW(str, font) {
   5 ^4 ]4 O0 q0 D9 C$ [
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    1 z1 r0 u1 g) l0 b9 h
12. }
    
13. 
    + K- U  ~3 u$ ?8 a. ?/ I) r
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    9 u, B3 @) J' p0 `
16.     g.fillRect(0, 0, 400, 400);
    5 ^0 ^6 T1 G7 l4 R( g# Y% _
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    $ P5 K" h7 _  |4 z) a
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    - x7 ]3 z; Z. F" r8 i6 u
23.     g.setFont(font0);
      G' D( U6 e9 ^7 r7 |- s" t
24.     let str = "晴纱是男娘";
    ; p( U  r& F4 \
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    3 I$ `( h. [) X9 K5 E* t
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    & j2 ~. {3 ^; a* g! @! J  L
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    - |( c  l  r8 o/ @) V( F7 o; m% b: h% J
34.     let info = {
    - N0 G; O" e$ V2 [7 h
35.         ctx: ctx,
    4 x' ?) t( g! W
36.         isTrain: false,
    
37.         matrices: [mat],
    . l+ t' n. @, R; O
38.         texture: [400, 400],
    & S3 m8 j5 c/ d$ @, A
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    ( q4 k- z: v5 M. ?
42.             uvSize: [1, 1]
    
43.         }
    + g8 I: u6 I9 a0 U4 C
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    1 k' U6 Q* _7 {) k
48.     let t = f.texture;
    
49.     let g = t.graphics;
    # _1 L( A+ Y$ p8 w; J( ?; l
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    2 [" z; S8 {9 g& B5 K$ F0 R) o8 [
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    : V! O: |1 H; [0 A& _7 y9 u
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
      w- r( G) t7 a! ^. @3 m
59.         if (k < 0) return 0;
    , @4 A" S8 F4 r& h' f' i9 C  @
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    & Q+ [( f2 W9 I- y  o5 I" g
61.     }
    ( _# L( u, D, M* s
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    # A5 ~% m& m, E* h: m4 h' K+ D
64.         print("Thread start:" + id);
    ) Q1 Q1 b' z) Z7 k
65.         while (state.running) {
    & S' q  A$ g2 g8 R# c' V4 w3 V% C
66.             try {
    4 B- Q; U( \! C: h! i! S
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    " C  n4 i3 `3 d; O: \, w1 J
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    ( \& b% h" L3 [6 _4 L, _
74.                 let kk = smooth(1, k);//平滑切换透明度
    ! S0 x$ v8 G1 E' O
75.                 setComp(g, kk);
    ! T6 J$ s" V8 I
76.                 db(g);
    
77.                 t.upload();
    ' A8 S: y8 h$ G+ J
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    # b2 A  G. Y" i' ]( {
81.                 rt = Date.now() - ti;
    $ q1 K) r6 X( {( O/ N; ^
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    8 s8 r) [" p2 c: Z+ M5 i2 A- m
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    & L+ W$ t9 H1 U& ~0 X: E% |
86.             }
    0 Q, m# g& S$ i9 h8 j# S: u  r2 N
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    # C6 R6 P4 i- K* R7 H8 \0 ^% Q
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    3 P9 c, y% N% H( p2 p# P5 \$ z6 R: Z
99.     print("Dispose");
    
100.     state.running = false;
     8 m6 |4 c$ H1 T8 M. ]5 z
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     . F, `& V4 O* u6 }! f
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     2 d4 F& G4 v& L9 a/ w9 S; a; ]7 u
106. }

复制代码

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

+ Q3 ^8 R: v8 u1 Y# \7 `" _; U1 H2 m
! L8 m8 \8 }# z  \9 B& w顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
6 R0 P, h# O$ \& S! ]/ ~3 @

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
" p- z; }7 h9 E: h/ Q" Z

Hobbytimeblank 发表于 2024-11-16 20:38
/ w0 m5 r8 h; h: n9 j* u全场最瞩目：晴纱是男娘[狗头保命]

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