JS LCD 切换示例分享

" T2 q- x' _& A: p2 E这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   0 i7 c1 u8 M* I+ b% i4 k
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   * E" w+ U4 w2 r, p! n
5. 
   1 y. b% S) u" U, E
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   " C7 V1 M. x) y1 e/ j1 ?
7. 
   - t' f' n* H! c! w6 a+ z* y
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   - f% q. m6 O. c. w
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    3 {% d/ @- S- F
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    8 L# V) E' X" w
15.     g.setColor(Color.BLACK);
    & K, S' P# s; r8 p: h
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    * z% g- k! Z9 ~/ H% B$ R7 U
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    1 J, \( t8 `- z
23.     g.setFont(font0);
    # ~/ x  i9 `3 P* [) w
24.     let str = "晴纱是男娘";
    ' \' C6 j/ r7 l8 B8 W( j; G
25.     let ww = 400;
    0 `0 w  u- k. @( u- d
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    4 P3 ?' @! m) [+ u$ t
28. }
    
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    8 D9 J1 L# H$ a- J& L2 f
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    7 z: h2 ^) S8 m, Z( E! i  e
36.         isTrain: false,
    
37.         matrices: [mat],
    3 L+ C, Q4 X/ J0 O. Q+ J: {
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    8 l3 I) B/ L5 w: M& s. u
42.             uvSize: [1, 1]
    + P7 U8 M  M# n5 ]) M
43.         }
    
44.     }
    / y( k8 M" P' Z0 o" b
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    # U' y  z9 @6 X# W0 T+ m
49.     let g = t.graphics;
    , U2 Z8 j/ r) |# W& `6 l: N
50.     state.running = true;
    
51.     let fps = 24;
    / o$ P0 f# F! s' a7 a
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    4 Z$ ^3 r! K* r4 S8 I/ K) n, c
55.     let ti = Date.now();
    0 Y/ P6 _  @" j8 j% [. V
56.     let rt = 0;
    6 c* t! ?) y: g9 ~
57.     smooth = (k, v) => {// 平滑变化
    2 @% I4 F- U9 T5 A5 \& E9 V
58.         if (v > k) return k;
    6 d+ A$ l/ Q) p
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    ! @" B, z* F* |" F5 _- a5 P: O) O
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    0 N! r8 P7 }* K  x" w6 I2 F
65.         while (state.running) {
    + O/ k3 m3 u7 s7 {' K
66.             try {
    0 w2 ]/ p# q( M/ Z7 w, ]
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    ( ^1 z, b9 u- `0 l1 t
69.                 if (k > 1.5) {
    ' M5 Z7 Q+ o( _; B
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    , X; K. T6 z1 n7 P# g) x
75.                 setComp(g, kk);
    2 I( z) I1 {2 e) l) H3 L
76.                 db(g);
    ( F5 n) D+ X* D8 M$ R& e1 B! i! v3 d
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    0 N6 y1 B6 [( D( i9 L7 ^' G- ~% l0 J( x
79.                 ctx.setDebugInfo("k", k);
    ) C4 d/ o/ b6 i
80.                 ctx.setDebugInfo("sm", kk);
    % M) [6 D5 [) `' H7 N! l
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    % m* R4 E1 ], F1 s' z
84.             } catch (e) {
    ; g/ J! {" a; k9 X7 j8 W6 ^7 ]$ C
85.                 ctx.setDebugInfo("error", e);
    0 D7 P9 K3 z8 Z
86.             }
    
87.         }
    0 W% O1 D- a" n+ j8 }( D
88.         print("Thread end:" + id);
    : j* C$ k& a6 b
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    + r( \% e; T/ ?9 U4 I
91.     th.start();
    6 N+ D( R4 f2 I/ |1 R
92. }
    . l0 e5 D) v' e& ]( P" M( [
93. 
    4 c6 b- a; p0 |$ K" R7 t
94. function render(ctx, state, entity) {
    ' p) e4 l, M6 ]
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    ; @9 C& N' E6 j
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     
103. 
     5 F1 }+ q1 D1 {' C: a& S
104. function setComp(g, value) {
     0 s% x" m2 S1 {
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     * i. `* ]7 r* G0 Z
106. }

复制代码

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

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
( A. G9 A! G+ C" c9 ?6 c. a

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
& K- e: _" ]# @0 Y3 o% _" R- h

Hobbytimeblank 发表于 2024-11-16 20:38
5 H, o8 y) l8 Y) f/ Q4 l$ K全场最瞩目：晴纱是男娘[狗头保命]

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