JS LCD 切换示例分享

" V, W3 f' X6 H  g4 [9 [0 [. m- D5 R这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
2 Y: w5 _7 p8 ~+ z, y8 q

1. importPackage (java.lang);
   1 L- D- m/ J- M& Q
2. importPackage (java.awt);
   
3. 
   * |5 S# b  }( M" Q
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ! L& E" }4 p' O0 S& s6 D
7. 
   2 Z/ v" V) O8 |
8. function getW(str, font) {
   9 n' `8 ]$ S# y9 M* ?* ?+ ]
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    6 I! t  H7 ~# p" Z8 R5 ]: A% X1 R0 V
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    & V: V4 S. H1 R+ W  Y1 w9 r
16.     g.fillRect(0, 0, 400, 400);
    # s/ G/ h" v; A, G9 Z7 }7 [0 \5 v/ }
17. }
    
18. 
    ! i; X' Q" c" y: i1 C% J
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    4 v* n/ o$ k7 \, }
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    ; C8 l, Y" k. g" w. ]7 t
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    2 H+ `: k' \/ c
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    / G9 V  \5 r6 N& O' I/ I+ C
29. 
    
30. const mat = new Matrices();
    5 x" q$ z& U4 i+ z
31. mat.translate(0, 0.5, 0);
    
32. 
    . G% \) b+ i/ N- ^% L4 R% W9 i
33. function create(ctx, state, entity) {
    9 f1 a/ w* K2 g; g5 j
34.     let info = {
    
35.         ctx: ctx,
    ; Q- A' x0 w4 O  R9 N  V7 e
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    ! K# r: o2 C9 P8 ~
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    7 c7 u. |* p' O; z
45.     let f = new Face(info);
    
46.     state.f = f;
    6 w: N6 t$ e. ]* B' D
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    , ?& D9 G/ O* E1 A( W
53.     t.upload();
    ; F8 W. o5 K% K2 [5 s& f/ `
54.     let k = 0;
    & b1 S5 g0 i. `' s  z) W- }
55.     let ti = Date.now();
    , O1 e4 k7 J: z$ K8 E
56.     let rt = 0;
      D% W/ E6 Q, F- E! `8 m' J
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    2 K( ^- D4 F9 k- l
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    - e/ Y2 T/ ~4 J4 c/ X" Y3 g" g0 `
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    ! x6 `$ {/ |3 E) A  z
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    9 b# f. [7 o% b0 @
68.                 ti = Date.now();
    8 n4 w7 L8 G/ [% ^3 r
69.                 if (k > 1.5) {
    * a! r, ~# O& w
70.                     k = 0;
    
71.                 }
    7 m" t& p7 ^& c& S& W+ }
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    4 m  f, }- W/ N2 ]
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    % a; ]' X+ Y  \! e! M5 e: p
81.                 rt = Date.now() - ti;
    / S, u8 Q0 C  S: j8 v4 \* T
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    * w6 v2 f  V/ B+ ]) H  H1 m; E; Z8 _
84.             } catch (e) {
      N: s( E9 v, |. h3 Y& W- B
85.                 ctx.setDebugInfo("error", e);
    9 M" j1 G! k6 H7 E9 x/ V9 c
86.             }
    
87.         }
    # F1 ?  r3 P8 ]# P
88.         print("Thread end:" + id);
    . v: ^" r( f/ }+ j
89.     }
    ' C% u: |# ?& S
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
      S7 v- C: o: |4 l: j
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    # q) L6 Z% y! {1 J& d3 C- \
99.     print("Dispose");
    
100.     state.running = false;
     1 }4 N, {$ w* P: I% k( I
101.     state.f.close();
     
102. }
     8 F3 |. ^+ h- E* S+ J
103. 
     1 e$ _. q5 ]6 A0 q4 v7 I1 Q
104. function setComp(g, value) {
     3 P- n5 u* G, b1 F9 ~# i9 D/ f
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     ! @4 r. k  P, b. r
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
$ K% J7 P% f, R- c6 c1 I
2 K5 H; D: ?6 _. t6 `5 M5 M! _
( i& f" _; O3 T4 L( s% H  z: H. _顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
+ j4 u) i  M) [  ~% x( w  S: A

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
' y) P# e; e; Q, p6 D

Hobbytimeblank 发表于 2024-11-16 20:38
1 Z0 j4 j, r0 m$ T: a全场最瞩目：晴纱是男娘[狗头保命]

0 S, P1 F0 o7 E. P: Q甚至双引号里面的自动加粗