JS LCD 切换示例分享

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

1. importPackage (java.lang);
   % G) K9 g" q4 k! |' w* T# J
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. 
   2 \+ n' \" c; T  g1 B+ T
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   9 [$ ^; Y& I; Z6 b9 z% H( k/ u
10.     bounds = font.getStringBounds(str, frc);
    2 K, p8 X" F! H
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    4 @$ p7 f+ I) ?
17. }
    , P$ E$ O2 R4 q; _
18. 
    # ?  B  }6 z; c$ X" Z/ A" f- m* S
19. db = (g) => {//上层绘制
    $ m$ I+ w0 k0 c& \' }
20.     g.setColor(Color.WHITE);
    + Z+ w- ~  O7 O. [+ K: C) I1 O: Z
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    " i0 m* i1 Q; g& ]1 ~) A5 t  ^
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    : u- |/ S* c& t+ g
28. }
    ' n/ ]0 ^: M/ b9 Q; C
29. 
    / H+ f  r" j  c
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    6 G8 x$ l6 t' b4 T6 y4 ~
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    ( R, L4 _1 y$ o
37.         matrices: [mat],
    2 a8 V* K+ z* N. O! ?
38.         texture: [400, 400],
    ! Q# X. Q. U" h' m% o5 n
39.         model: {
    + Y4 o- a7 a# x. s5 n( e! [1 s7 m3 @
40.             renderType: "light",
    5 P- G0 [% v- |2 I, Y9 o
41.             size: [1, 1],
    / l4 o! w9 a/ ^$ `5 X
42.             uvSize: [1, 1]
    ; k# X5 s5 ]  ?6 {5 [5 ^
43.         }
    9 a" _$ q0 T0 o8 q& Q; k6 Y$ u1 L6 ?
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    & A2 M' S# H1 \) X% ?
49.     let g = t.graphics;
    7 ]; @. Y- f& m; N" y. {4 D4 Z
50.     state.running = true;
    ) s/ P7 P  R  v4 c% ]
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    $ l: ~7 x% `( E5 h/ y
54.     let k = 0;
    : M% m0 Z8 D+ O
55.     let ti = Date.now();
    3 y. m% ^5 U* c& y' S
56.     let rt = 0;
    - P' v. Q( b" j; N" V9 t. ]: X$ w0 e
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    8 I. f0 g; ~8 I! ]7 e
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    " d; O% |9 ~* G3 g
63.         let id = Thread.currentThread().getId();
    0 _+ W# Q$ v; j  F! {4 p
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    % n# K% O; w; j- W' v3 {2 Z
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    : B- }/ x: Z# N" T3 j% l8 G
70.                     k = 0;
      p7 x& I( ?) Y5 v4 Q7 j3 A: ~
71.                 }
    * x* {; y7 V# j! U
72.                 setComp(g, 1);
    # V( z( d7 j  B; r6 a1 H! E
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    2 P7 D1 n( _1 s/ `
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    ! E8 J/ b2 x7 B7 ]$ u7 i" M  X
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    " B& R, P; R4 u/ D1 q
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    4 r9 `6 x# @! N1 [! e# J
88.         print("Thread end:" + id);
    
89.     }
    2 V$ @2 _1 Q8 ~5 K
90.     let th = new Thread(run, "qiehuan");
    ) C9 f, _5 H6 p0 A, S+ p0 H
91.     th.start();
    
92. }
    2 `, U$ Q7 M2 Y" K1 D
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    % ~6 W0 E5 Q( q' Z  n: ^9 X3 [
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     / U2 \7 F3 S& _4 e* ]' z1 Q
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
+ \5 }6 R, g/ q7 K( d
! G5 ^$ L4 X! r" N; p, L
, i& A3 }5 t7 M  i: ?0 b顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
( ^8 [4 B/ S, s6 u/ z! e: k

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
' a. X4 ~) z9 `, l) Z- f; x/ ^

Hobbytimeblank 发表于 2024-11-16 20:38
- I8 Q" X$ j! l7 q" k' g3 \  [6 ^全场最瞩目：晴纱是男娘[狗头保命]

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