JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
" l4 k. A$ B; C# A7 W

1. importPackage (java.lang);
   . c1 J! P+ d; {
2. importPackage (java.awt);
   * V. D; I3 P; `8 }+ ]
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   . h. Y& G) D  R4 Z) u
8. function getW(str, font) {
   ( q% Z& c. L' p# j5 M
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    # |( r. L" B2 k7 z; Q! ]
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    : ?  d0 A) p& b8 A
19. db = (g) => {//上层绘制
    / |* Z5 H( t) u! \$ i3 C# y
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    1 t8 L: d6 _% A0 u" K1 V
22.     g.setColor(Color.RED);
    + f8 V/ s5 J' @2 U( l; Q: L
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    + b) F0 u! L# ~$ z
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    3 B' I6 }2 R9 U1 V2 T
29. 
    5 {* L+ Z" `% [; e2 ~: y
30. const mat = new Matrices();
    7 w. ~6 u) ]$ ?+ k
31. mat.translate(0, 0.5, 0);
    
32. 
    * I& w7 U7 q# A( T; U
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    , _+ M/ N, O+ R( k$ S& ?
37.         matrices: [mat],
    - M  P* h/ x- [
38.         texture: [400, 400],
    
39.         model: {
    7 ?# r# R9 }6 J2 f
40.             renderType: "light",
    
41.             size: [1, 1],
    7 S: ^( L& J7 t8 [
42.             uvSize: [1, 1]
    ( G7 T# _3 W4 v5 h5 G
43.         }
    
44.     }
    1 K$ F4 }+ n' L& x# M
45.     let f = new Face(info);
    0 S4 w$ ^5 X: A# U; K9 ?3 d$ Y% K
46.     state.f = f;
    # L; s$ U/ {4 B) t6 l: r. i, T4 ~
47. 
    ( E4 ?. V3 J) P2 y  A% V% Q3 q% ^
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    9 l9 S( \+ D' R% b- n4 ^
51.     let fps = 24;
    
52.     da(g);//绘制底图
    3 X* ?( v- ^( [# |& d6 R0 x
53.     t.upload();
    2 o0 _1 t) M) h+ U: j( N, x
54.     let k = 0;
    " p1 B7 a/ F) }  v( _9 B) s
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    ( i1 d4 V( K4 `9 |: q( X) b
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    0 y, H5 t0 w: g: e5 o8 J- h
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    $ {8 y/ T5 X$ u) q
62.     run = () => {// 新线程
    $ ]- D+ a* S& I5 U
63.         let id = Thread.currentThread().getId();
    7 Z" [" y: @8 P1 f5 r- s' I
64.         print("Thread start:" + id);
    2 Y! z  |7 m; o
65.         while (state.running) {
    0 _# j5 h' `; A) P& B
66.             try {
    " @, S: q- d' o0 A( }: g) ~( H
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    5 l4 k. Q2 q1 {$ J$ B9 X
71.                 }
    
72.                 setComp(g, 1);
    " V9 W* r4 [- ?+ j
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    + r& z4 S# D* l* L& {* D
75.                 setComp(g, kk);
    ) Z9 S' i& ?6 ^- {7 h' l
76.                 db(g);
    - F5 \( t; T- [1 f) I, F( Y+ @
77.                 t.upload();
    3 q* f: F) `8 x# h+ Q: y
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    1 F) X) D7 B9 A
79.                 ctx.setDebugInfo("k", k);
    , V: I# D* S+ ~" Y% X  m, q$ q3 n4 ?. p
80.                 ctx.setDebugInfo("sm", kk);
    . P$ F( A) \( j- R/ r- L
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    4 A6 }- R! K. x& U
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    / x1 {0 w% {8 q
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    # d9 x4 ^' N; P. o3 G4 H& e
93. 
    , \" J  E, ?4 q" ~+ V7 f3 q6 I$ _# V
94. function render(ctx, state, entity) {
    8 o! D# c) U% ]# n3 ?! \0 a7 m3 d
95.     state.f.tick();
    
96. }
    ! x' ?; F, [* _
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    5 Q/ z4 G, r9 a, r- [( a8 j  [, X
100.     state.running = false;
     ( j0 V" I, M8 e$ F, b
101.     state.f.close();
     7 W, j) S7 `( v# ?2 Z# b* I; U' A2 Y
102. }
     
103. 
     
104. function setComp(g, value) {
     . q( x! M" h9 c8 \$ t
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

3 y0 C7 g' l* B/ _' z9 Q
# |" i& \% d7 _' S: S) q顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
9 k! l( y; }. E; K4 M1 D( c9 ?

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
( i/ a7 l; F/ w0 m0 s6 l6 |( M全场最瞩目：晴纱是男娘[狗头保命]

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