JS LCD 切换示例分享

7 R2 [6 }, r, }. ~这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   $ j" M) S5 n6 }
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   - k% N+ d2 Q7 [. y
8. function getW(str, font) {
   0 a% D, I5 h0 h' ~% a3 G
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    5 A. E' ~$ Q& A6 T& |. ^
11.     return Math.ceil(bounds.getWidth());
    $ w, h$ B5 o+ e' `0 t
12. }
    " P* U+ k4 r5 E; T  D- x
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    - [* M. s5 Z; X% F
18. 
    0 L$ ?+ j6 U: L4 r2 b# M. f
19. db = (g) => {//上层绘制
    1 F# e! s9 @6 l* a6 }1 ?& f; W
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    . X. }' B+ y, a$ g& A, C
23.     g.setFont(font0);
    ; B$ ^5 Y: x1 p
24.     let str = "晴纱是男娘";
    / z% S8 n  L$ r8 l0 j- s
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    1 |- ]8 E$ T1 `" ]
27.     g.drawString(str, ww / 2 - w / 2, 200);
    % @+ J% |4 v$ [6 ^7 ?! G
28. }
    ) h3 M; p# R8 k* ^
29. 
    * m+ v5 X- i1 q5 j
30. const mat = new Matrices();
    4 D. C8 Y' N9 G% S% W9 g
31. mat.translate(0, 0.5, 0);
    
32. 
    ; ^( b" {3 ?* ]" {! H6 D
33. function create(ctx, state, entity) {
    ( N& G8 Y: a. \4 D
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    & b0 O4 i4 N+ f( v  k8 P
41.             size: [1, 1],
    ' b8 b/ V! L8 {, `2 ~
42.             uvSize: [1, 1]
    
43.         }
    # E  ^6 V. P7 }9 f* _# r: n
44.     }
    7 W7 H( y. H8 L: z1 X5 S8 x# R9 _
45.     let f = new Face(info);
    ! s; o1 c! K- x! {7 _
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    ! A7 x% \9 s' }5 D& e0 h4 [
49.     let g = t.graphics;
    ; Y% r; w; X" m4 b2 x8 L/ K
50.     state.running = true;
    
51.     let fps = 24;
    7 F  A. j/ x: ^" q* u! e& M# e2 N
52.     da(g);//绘制底图
    
53.     t.upload();
    , K. e1 N* I. E0 a' [
54.     let k = 0;
    / Y% F2 F+ R- ~8 d
55.     let ti = Date.now();
    8 ]- P& K: a: O2 N! n
56.     let rt = 0;
    3 _1 g! i6 T* c: _% h2 Y9 S; z; i
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
      A! x3 W" V2 N% w+ g/ d( p! I
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    2 U. `6 k: a+ X
62.     run = () => {// 新线程
    4 A0 @0 b1 n) x0 V% ]
63.         let id = Thread.currentThread().getId();
    * {+ k4 E, J' j8 \
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    5 i/ O' V3 D7 Z8 @
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    & F/ k# t$ O* L: J! l% M+ t, Y
69.                 if (k > 1.5) {
    0 f! R* x2 d; J0 ]  |  O4 P
70.                     k = 0;
    , V% E& u$ [0 m* c: Z- P
71.                 }
    
72.                 setComp(g, 1);
    8 A0 G) m* g$ r( e9 B
73.                 da(g);
    , ~, ~4 L) {& Y; a
74.                 let kk = smooth(1, k);//平滑切换透明度
    + V; ^2 G4 ~& t( N0 v; J
75.                 setComp(g, kk);
    9 Q" s, Z  d% T0 N9 {( S9 Q% l. N
76.                 db(g);
    8 G9 a3 B% ?: Q" p' ?7 a3 |
77.                 t.upload();
    ( ^8 a0 q2 `2 @* Z& N3 I% ~
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    6 ?# |5 c$ X0 x$ J3 E3 J* f
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    + y! m, N+ d- x  B& p6 J
83.                 ctx.setDebugInfo("error", 0)
    , ?- ^. H5 m' m; o
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    # m! Z. u+ p5 S* R
86.             }
    7 w0 U) M- o; z$ }! F
87.         }
    : u9 S! @7 }, W& u
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    4 `" P% D$ }3 K6 d! W- I2 F
91.     th.start();
    , r) s6 l( ~7 I$ L3 e* [
92. }
    " X8 x& U: P2 D% M8 f: Q% R
93. 
    . N/ {1 D3 f( t3 G. ?( m
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    ; N& c1 _0 O3 C: M4 S
97. 
    + X/ T2 I" F4 o( s  Q0 E1 r
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     7 p1 D+ c( f% F- F. o9 R
101.     state.f.close();
     
102. }
     ' ]. S/ {# Y9 F4 q7 V+ ~. Q- |
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     5 z& L' n# R9 K% l
106. }

复制代码

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

& M1 I7 N+ |# j$ k* |9 L1 s
# B) R  D) A. c0 n  C: I顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
6 ~) `" n  d- v% r( K: M4 |5 O

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

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