JS LCD 切换示例分享

! x- z' C' j4 ^# H5 j: h& y! x这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   8 A8 _- D; U3 e% h( l! b* w
2. importPackage (java.awt);
   
3. 
   1 ^7 h; Q# L2 J
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   ( O2 V! }* W! U" H4 r: ^
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ) @5 H' A/ e% H4 e- P% |
7. 
   2 t5 b5 _  T5 v
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    - j' [+ E: V& }8 Q3 R! b4 W9 l
11.     return Math.ceil(bounds.getWidth());
    : Y, n$ i! f  y/ Q, x$ v! K
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    # \% ]% V! v' x3 H9 H( i, Z6 L
15.     g.setColor(Color.BLACK);
    # `1 {* L+ n2 T3 c8 m5 h4 H
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    5 T' h. X; B! I2 z$ k) J8 ]/ `+ J/ {
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    ; k# X; }/ q% V# n
26.     let w = getW(str, font0);
    - \* x: [/ p# H! y+ e5 N
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    3 |: |, k6 O! t+ ?
29. 
    ! w2 F2 s5 t( J: n, H: I+ L/ s
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    8 U" `3 R: }) Y; g. X
32. 
    
33. function create(ctx, state, entity) {
    9 s8 ~! P  X; ^* |( q2 g
34.     let info = {
    6 Y( R5 ^7 l! B" F
35.         ctx: ctx,
    # b* P, a$ U6 F" f
36.         isTrain: false,
    
37.         matrices: [mat],
    : t) v( l  e3 T8 r% z4 G
38.         texture: [400, 400],
    3 S4 s, \4 m: z
39.         model: {
    
40.             renderType: "light",
    9 v. J, ~8 g- X/ V
41.             size: [1, 1],
    8 t  i' I  \  B8 s  S1 u
42.             uvSize: [1, 1]
    / T6 R8 F# I. b) J6 Y( T
43.         }
    
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    / z7 L$ o' n" _0 o$ m" V
47. 
    
48.     let t = f.texture;
    ! U# N% T; k0 A1 u' f
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    - [/ a: [9 F4 H* W* b0 v4 k. N
52.     da(g);//绘制底图
    ' h5 F+ U/ |: E% @# L% e2 @
53.     t.upload();
    , X6 N9 o8 u% @! A
54.     let k = 0;
    
55.     let ti = Date.now();
    3 U1 H8 N- M" Z4 K' k9 `6 v
56.     let rt = 0;
    ' W* N6 W$ x# m  g; n, ]4 Y1 T8 D2 s
57.     smooth = (k, v) => {// 平滑变化
    6 }& `6 g2 ~  O. G$ Q, _
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    , ^3 n( K( c8 W
62.     run = () => {// 新线程
    5 b# _, P  v7 O$ P
63.         let id = Thread.currentThread().getId();
    / D( a/ }3 T8 R; `# t' ~
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    3 a2 F) a) ^3 C2 b
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    1 q( y9 Z1 N# R1 g8 W4 r1 H. N+ w
69.                 if (k > 1.5) {
    7 Q5 ]( j! U+ T2 g% n% o
70.                     k = 0;
    ! F( }# l5 }$ j7 s* f
71.                 }
      d  S8 }8 F7 L+ y) \, }1 {
72.                 setComp(g, 1);
    7 H, o. P2 Y) w+ M0 J5 b5 \- C
73.                 da(g);
    % L1 e2 r: x0 `2 p4 }  u
74.                 let kk = smooth(1, k);//平滑切换透明度
    ) [$ |; R. Y1 X: Z4 H
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    * Z$ ?9 _) g6 E* Z6 T
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    , U8 `/ }  a1 o, b) A- \
79.                 ctx.setDebugInfo("k", k);
    # C: [* N! r  }- c& X) ?3 ]- V
80.                 ctx.setDebugInfo("sm", kk);
    1 O: x! r! m/ a2 n3 d# ~; B
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    # d" {& v' c7 W3 }, q* c$ x
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    5 a. c; t) r' k5 O5 B: @
87.         }
    ) S. q3 N# H2 ?( i
88.         print("Thread end:" + id);
    # b3 \0 ^2 e+ X7 ?. |+ N3 o
89.     }
    ' t# R7 y  w6 q8 Q& N2 Q
90.     let th = new Thread(run, "qiehuan");
    9 v2 a, Q4 y5 }! R5 e5 a  N$ T
91.     th.start();
    ) a1 l' s0 w8 i
92. }
    0 a, S4 t' M1 y1 ^& @6 b) H, M
93. 
    & A8 W+ I( g9 p4 P4 V0 E; y
94. function render(ctx, state, entity) {
    : W# y0 o8 h7 [2 H
95.     state.f.tick();
    7 ?% K7 `$ t: u8 l  S
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    & @% p- o9 `2 r2 _# H+ T
100.     state.running = false;
     8 `7 ]5 w! V* U, s
101.     state.f.close();
     
102. }
     $ j4 N! ?. X8 e: A
103. 
     ; V! I. g( _5 H* {0 V; F) a
104. function setComp(g, value) {
     % K+ o7 [# n* y& K8 f% c
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

' b8 s6 b/ ~' S
! F: G% @/ [! s' h顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
* M( n! [: |2 v& U! V* D

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
: ~! f9 i+ p" [3 Z

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

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