JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
2 i7 Z4 |$ X3 a  D; D/ X

1. importPackage (java.lang);
   6 w$ L9 z5 P/ F+ G# r: m' N
2. importPackage (java.awt);
   : ]7 i) W, P2 {& V
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   & M; d: n. [( e2 c+ T+ {
7. 
   
8. function getW(str, font) {
   8 g9 i$ z1 g9 }! Y( I
9.     let frc = Resources.getFontRenderContext();
   ' b: p$ g, V3 G4 G# v& {
10.     bounds = font.getStringBounds(str, frc);
    . _5 J9 v9 y8 T
11.     return Math.ceil(bounds.getWidth());
    
12. }
    1 i' Z1 Z5 Y. `9 p/ k1 L
13. 
    6 u6 n2 w  p% s# r2 V8 w
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    8 }) b. l( ^- j! u( K9 V8 _; Y0 }$ p
16.     g.fillRect(0, 0, 400, 400);
    " @) ~1 F7 R% L. Y/ D' `4 y9 n
17. }
    6 {) p1 t! a7 x
18. 
    
19. db = (g) => {//上层绘制
    , y, [+ k" F9 d: u1 l8 I1 O
20.     g.setColor(Color.WHITE);
    ) m# U* k5 d  h( N) e8 b+ U2 ]4 i
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    : b4 F# p# ^. ^5 K* m/ X* b. |
23.     g.setFont(font0);
    # j0 k; c/ J; \; k7 U
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
      u4 ?" J/ l; ~9 f
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    , W& n, n( v, S1 }) l2 ~3 y4 `/ |
28. }
    
29. 
    3 c. I: `1 A4 [* Y% m6 ]
30. const mat = new Matrices();
    , T( G5 R" z3 e, _9 ^6 d
31. mat.translate(0, 0.5, 0);
    ! A. e0 [4 r1 I& F: O# i1 X
32. 
    
33. function create(ctx, state, entity) {
    # T* b* D% e7 B5 G; a9 T
34.     let info = {
    
35.         ctx: ctx,
    6 A0 \9 n  ]! d. R6 v; H1 G8 H
36.         isTrain: false,
    7 \) t# e9 t* j+ [' B+ G" r
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    6 W6 I( V; O. V) f& A
40.             renderType: "light",
    3 `$ h7 `$ G5 ^; ~
41.             size: [1, 1],
    # R; V0 g0 |8 R. O* e: Y
42.             uvSize: [1, 1]
    
43.         }
    % Q5 b$ R. d. }3 m/ \$ V! J; k
44.     }
    & o5 L, ^* |5 G
45.     let f = new Face(info);
    
46.     state.f = f;
    5 f3 J" z3 \4 E6 A4 a
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    $ {* F; l, X2 d/ o: H
51.     let fps = 24;
    
52.     da(g);//绘制底图
    % l9 h- f( y! f; C! L: ?
53.     t.upload();
    3 u- U' @) g. b7 \5 d; Z
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    ! G7 k, f# L3 Z/ Y1 ~5 ?2 v, K
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.     }
    0 i8 c4 F; ~' K
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
      k% G0 x3 H5 d
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    4 `+ n5 H" e( f% h9 H) R
66.             try {
    / l. V. K. G7 E4 y% \  e9 ?
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    % w' @+ {8 n  X
69.                 if (k > 1.5) {
    # K6 x: E% b2 [0 j' C  p3 W- t
70.                     k = 0;
    
71.                 }
    . o; V! p/ h, |$ o% ~& ^
72.                 setComp(g, 1);
    $ Z2 r( ?0 ]6 `9 w
73.                 da(g);
    ; D' s# l$ a  W& [5 T% i
74.                 let kk = smooth(1, k);//平滑切换透明度
    # u0 P( |5 \8 o9 E. d  f7 L' H
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    2 H# P' A  p: N( G
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    2 ]% A2 \0 \6 j) w
80.                 ctx.setDebugInfo("sm", kk);
    - w4 q, t/ }2 I) H' N. S5 h$ o
81.                 rt = Date.now() - ti;
    0 D% z) @! l! x
82.                 Thread.sleep(ck(rt - 1000 / fps));
    ! x8 a1 @) q1 x( O. R
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    ) Z) f% G3 I; ?5 ~& Q
85.                 ctx.setDebugInfo("error", e);
    , {& @9 D5 i6 r
86.             }
    
87.         }
    6 w2 D8 q& D0 z3 S: ]7 P
88.         print("Thread end:" + id);
    
89.     }
    0 `5 w  F& @0 D+ o3 b
90.     let th = new Thread(run, "qiehuan");
    : C: W" A* J* R: _& v
91.     th.start();
    
92. }
    8 A, L2 J% P+ {1 k! N/ I4 J  c
93. 
    * p3 Z( Q3 `; a* ~, `7 b$ x
94. function render(ctx, state, entity) {
    0 Y0 m% _+ i- T* u/ w/ p0 s3 Q
95.     state.f.tick();
    
96. }
    
97. 
    ; l. k$ [. ~5 J: o5 j8 |, x0 y% g% T
98. function dispose(ctx, state, entity) {
    " I) [; X" x7 a# a9 w% @- ]
99.     print("Dispose");
    ' Q/ `' j0 C7 P
100.     state.running = false;
     
101.     state.f.close();
     0 x) Q2 ?& }( T+ f% i( K  P
102. }
     5 V# k' a2 [7 S- ^, Z( g0 E8 B1 M
103. 
     
104. function setComp(g, value) {
     2 a( \7 [8 a1 z" u# P1 ^, y- M( a
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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


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

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
& P& W5 o) k# a1 V, ?- V0 m

Hobbytimeblank 发表于 2024-11-16 20:38
) y" p0 f5 v# A. k! F- s全场最瞩目：晴纱是男娘[狗头保命]

: J- z( h3 y( s' y3 k) `# U6 r甚至双引号里面的自动加粗