JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   / _* @- u8 m; [  k
5. 
   ( L9 {3 h4 X5 X; [& s$ x
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    - e, F- w( \4 `, W& |  _( x5 q# H$ S
12. }
    % _/ L! k/ Z- I4 A
13. 
    9 w" t+ _$ J6 z; V- q
14. da = (g) => {//底图绘制
    : G  p  C: e$ ?- D( \
15.     g.setColor(Color.BLACK);
    5 r3 d6 r1 N0 i
16.     g.fillRect(0, 0, 400, 400);
    6 Z8 E4 E7 a+ \* w0 Y8 |
17. }
    
18. 
      G5 t, r" m3 ?5 d6 [3 p2 |
19. db = (g) => {//上层绘制
    ! d- z8 n+ u8 o/ h4 ?$ u# G
20.     g.setColor(Color.WHITE);
    8 J2 Z/ P, K- V: _
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    " P2 o+ {! t3 G$ y
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    ; Z& M: i2 F, e
28. }
    
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
      a6 r4 J1 N" C( P1 B
33. function create(ctx, state, entity) {
    
34.     let info = {
    . X4 x" u5 {  @# f4 `
35.         ctx: ctx,
    ) R- d$ A% u  }- v: I; c
36.         isTrain: false,
    1 `3 d& C7 c, n$ l% @. K+ E
37.         matrices: [mat],
    1 e+ C0 A- I. }0 `
38.         texture: [400, 400],
    / q+ \2 D& [; ^% \* `
39.         model: {
    
40.             renderType: "light",
    , X4 s/ M9 i: y, r
41.             size: [1, 1],
    4 ^& x. W, v; S
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    7 |/ B3 S. |  m5 O% @2 {1 Z0 ~) V
45.     let f = new Face(info);
    
46.     state.f = f;
    / f4 p" k' f+ d
47. 
    3 e% u3 M  E, t* V$ p$ R. N
48.     let t = f.texture;
    * c+ ?) E4 e9 t+ S- ]/ W
49.     let g = t.graphics;
    
50.     state.running = true;
    $ O1 N& ^- Q- Y% c% {% Y
51.     let fps = 24;
      i/ [, R. G2 n0 C: w
52.     da(g);//绘制底图
    % ]$ B! {0 w1 Y7 O. [0 v6 D
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    * c6 K- N" n! b- t. X
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    7 W# C$ m, Z3 i' j2 h% n
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    - p$ A" P: h, o8 Q. N4 b
62.     run = () => {// 新线程
      ]- d! w9 `, W6 `/ }$ Y4 \
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    ; j* D" T0 x1 z/ v/ x9 _
69.                 if (k > 1.5) {
    . C' V4 H* y$ p4 c( K) D7 }
70.                     k = 0;
    ' ]; G. n* v/ ~+ h
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
      f) N3 i4 M! [: z8 r/ s2 m2 m
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    4 k5 i- ^% ?/ y) [: K) b
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    ( \& `/ l) W5 H: X; j% z0 n3 V
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    2 Z. F  X" O3 u
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    0 X. S4 e+ i& g- Y* w& U9 q
93. 
    
94. function render(ctx, state, entity) {
    - [& O& T$ M. D  c& z+ i
95.     state.f.tick();
    
96. }
    
97. 
    5 s+ \, {7 o/ K0 _; B( d
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     / Z0 j9 b# p+ {8 C1 T  ]! B4 l9 @/ a
101.     state.f.close();
     , e9 a2 T, M$ d  {* C+ s( `
102. }
     - y1 Y2 A4 h( F2 }
103. 
     4 P* w& h7 ~6 y
104. function setComp(g, value) {
     - a- T; d! \0 y/ `
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
       t6 ]8 w: T5 \0 i
106. }

复制代码

* t0 t$ U5 v3 U7 L1 _7 M/ C写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
6 o3 C4 Q/ Q% j4 V0 ?+ J, V

9 Y! u+ j8 j% L9 n$ H顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
9 {$ d* {# f1 A6 J" F3 M$ Q. U, y6 v

Hobbytimeblank 发表于 2024-11-16 20:38
" B+ q% |  A+ K: t全场最瞩目：晴纱是男娘[狗头保命]

. P+ a/ B9 U: z+ l: i甚至双引号里面的自动加粗