JS LCD 切换示例分享

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

1. importPackage (java.lang);
   ) }9 L3 t" F$ }( q' S4 j# f
2. importPackage (java.awt);
   
3. 
   2 d8 b" [2 D) d3 d+ l8 K5 |6 V
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   : n( L9 p- [2 }; h
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   & _; r3 I' Q6 X+ w/ D
7. 
   9 b. p' k0 c+ `+ d
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    . ^1 n$ j! c- _$ t# Y/ o1 @6 t* |
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    ! h0 L/ Z$ Z3 d  D1 V+ j7 w6 e- I
17. }
    ! F) t$ z3 L4 ~
18. 
    
19. db = (g) => {//上层绘制
    ) f" w; ~; m) a# l. c5 P3 x+ Z
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    # O! p: b& K' ~5 D
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    / I0 {6 {) b" t' z
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    $ Z' O3 t& Q: r, `
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    6 B' C( k& m) @8 C
29. 
    : A/ K) w; L# k" }& n" b
30. const mat = new Matrices();
    1 d+ ~5 k# e2 g3 w$ K7 i
31. mat.translate(0, 0.5, 0);
    $ O7 p1 q5 I- d+ m+ \% Y( ?
32. 
    
33. function create(ctx, state, entity) {
    + }- v& I: Y6 y& U" g! u( e
34.     let info = {
    / Y5 {& s: o* G) ^( W8 G3 L
35.         ctx: ctx,
    5 B5 W- Y% ]% E  d$ |/ k+ V- G6 E5 ]
36.         isTrain: false,
    
37.         matrices: [mat],
    8 w( v7 A* i: j" @- Q: d
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    6 J; C) u& z9 f# ~7 U
42.             uvSize: [1, 1]
    ) r( X3 P: B% F' `0 a7 t. y! s  x
43.         }
    
44.     }
    4 @. o" Z7 o( z$ E& T
45.     let f = new Face(info);
    6 q3 c9 u2 `* j- x8 R8 N9 D) B
46.     state.f = f;
    ' m3 E: X  w1 I# r
47. 
    
48.     let t = f.texture;
    / c4 F! ?2 L( x' `$ k2 W4 k" H* C5 R( G
49.     let g = t.graphics;
    + l5 K* |: H% r  ~2 I% `  v
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    3 n- M& P0 H! E3 V) G+ f
58.         if (v > k) return k;
    ( |4 Q9 K  [7 S. U: w$ y4 T
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
      H; [8 V- Z/ U* Y4 I/ e
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    - O% x# P+ t1 x1 i* {& J3 J' J3 f$ Z
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    6 Z) o8 s7 O/ ^( F  Q. R4 e: f/ U
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    - f5 w9 m6 r1 o) W. F! b
69.                 if (k > 1.5) {
    
70.                     k = 0;
    ( F, Y' E' L8 j; F4 T
71.                 }
    
72.                 setComp(g, 1);
    7 O) F0 D: [) u5 |& @# Q* _) {+ N
73.                 da(g);
    ( m9 E" x- b! B9 W' Q. r
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    . S2 Q9 e/ \% G5 [
77.                 t.upload();
    + S) s# L+ n* Y6 E  Z
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    4 h3 h! `9 I7 ^( n' U
80.                 ctx.setDebugInfo("sm", kk);
    ; @- O  Y7 X- q. a1 W
81.                 rt = Date.now() - ti;
    4 z8 J6 F& p2 R3 f. l" s
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    / }3 o: E8 p3 g, s, U" N/ A
86.             }
    . ^* I9 w7 n: ^2 T; Y- B0 C; S
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    6 u8 H2 E, s9 S' V4 {
90.     let th = new Thread(run, "qiehuan");
    1 _) J0 Z# u+ K1 N$ e& [
91.     th.start();
    
92. }
    9 Z! Y4 ?4 {; e6 T- v" }3 `
93. 
    ( K. K( `" D5 r9 t9 A9 d' u
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    + z8 H$ ^5 C6 p& e- c6 x* v3 i' b
96. }
    
97. 
    6 ]* h2 U% o( R# Y4 ?
98. function dispose(ctx, state, entity) {
    " ^1 g6 l  l4 A4 U% t5 n( z$ r
99.     print("Dispose");
    " p/ n  Q* q! w) a! l7 c
100.     state.running = false;
     ) C" ^# V- r( e1 y9 _
101.     state.f.close();
     ' t* O6 R( o/ y- b/ y& a8 E6 o
102. }
     
103. 
     2 E+ E. ~7 R# S
104. function setComp(g, value) {
     6 y* y/ M- l7 U; W- V
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     1 Q! ?* h4 l- [- ]) j
106. }

复制代码

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


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
* Z# b/ h& V* _5 @0 c3 U

看不懂，但我大受震撼

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

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

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