JS LCD 切换示例分享

1 \. H7 J" s/ e: R4 b; c这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   $ l4 P7 g( o: e- J* `7 `+ y7 h
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   8 k: M, M' t. ]
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   * S) D1 T! A% I- d  d) Q" ^5 Z3 T
8. function getW(str, font) {
   : ~1 A1 H# \+ Z# _
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    7 z! r3 `- o% M6 a& `
11.     return Math.ceil(bounds.getWidth());
    
12. }
    * N' @$ P/ f; H3 v& W% q. o0 S  L
13. 
    
14. da = (g) => {//底图绘制
    0 }9 v5 m" {5 o( X/ z: p
15.     g.setColor(Color.BLACK);
    * Z- z" o( A5 V
16.     g.fillRect(0, 0, 400, 400);
    - i$ k2 L; S. I! r( c, A: J
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
      g# e! ?1 Q# m# A
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    # t0 q0 d4 T+ W+ Z! |0 t+ }( r' V7 Z! c
26.     let w = getW(str, font0);
    $ n# ]& X6 a8 B9 |$ }% m% y, `: s
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    : R  f0 U& b/ n8 S
29. 
    4 t3 M* k6 N1 h9 M$ ?
30. const mat = new Matrices();
    * u3 J$ B7 f& N" s- L2 U
31. mat.translate(0, 0.5, 0);
    , t, _$ x8 f5 t
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    ' B4 s, n+ n( p6 P5 l/ \0 _
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    ; L& y% l" r: A8 t! m9 `
40.             renderType: "light",
    & Y" Y: e3 h) I! X, X' O$ I
41.             size: [1, 1],
    $ J$ w$ q( L- z) ~5 [1 q. g
42.             uvSize: [1, 1]
    
43.         }
    6 H5 l& G4 g  i" I
44.     }
    % E2 F6 K6 f! x4 l
45.     let f = new Face(info);
    & z- X7 x$ Y) p5 d6 A5 t
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    # [9 d& m% l9 K/ f; k3 I
52.     da(g);//绘制底图
    
53.     t.upload();
    $ m7 D! M. G4 M( r. y1 Q
54.     let k = 0;
    ; b! C3 M2 j1 j4 |5 L; K0 ?7 N
55.     let ti = Date.now();
    * ~0 d$ |  I$ n# s6 J" z' a3 j' j9 D
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    2 H- Z7 P# h# q
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    5 E& }9 ^" P0 ?, |. B, g0 j. H9 }; W
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    3 ~9 Y; ]0 H/ N0 Z
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;
    5 S. @# a! Z* y
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    * @9 n+ {8 F$ u  K( P0 n
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    2 p) s% @9 M# V6 N
75.                 setComp(g, kk);
    7 M: r2 A( f) k9 n" O" C
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    ; A, f6 T- F9 ^
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    ( I3 M% I2 k+ f) B5 V% s
82.                 Thread.sleep(ck(rt - 1000 / fps));
    9 h2 i# Y* M) U" x' `9 r, X
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    : Y. H/ o  n$ W+ X4 F* \& |
85.                 ctx.setDebugInfo("error", e);
    5 U4 _' `8 e1 u; d; O6 v! |1 m+ f
86.             }
    1 j2 Z0 n5 i, N2 n/ b, X: O0 R
87.         }
    / E0 e8 `& o* `  x2 a
88.         print("Thread end:" + id);
    / l+ i3 T: P3 C# D" [
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    8 {) j/ R, h* Y3 x# {0 ~
94. function render(ctx, state, entity) {
    6 h2 O8 ~  ?6 m2 q& s
95.     state.f.tick();
    
96. }
    : R/ \$ T& b* C+ T, ]
97. 
    
98. function dispose(ctx, state, entity) {
    : H0 k( P- r8 l3 ^6 [8 [
99.     print("Dispose");
    / }7 t" z  ^% H  v
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     # e: p- v& i/ d2 w% O; A' W' b
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     6 s7 V6 T1 `; c! s
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
. c( {$ U0 Y  M$ P3 x
7 S" s0 W9 |! N" ^4 i) D
8 t. _" K$ m0 f1 e" y顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]

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

  R( I% E  {0 W* M2 w2 u' X, `甚至双引号里面的自动加粗