JS LCD 切换示例分享

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

1. importPackage (java.lang);
   : Y2 _. `; [6 u; ^" U
2. importPackage (java.awt);
   
3. 
   3 v3 ^; L+ h% }  s- b" \
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   - C  b) p: t0 M6 u# @
5. 
   & f9 S  l$ S8 M6 p
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   7 T( B/ X" q' r9 f# n2 x% B
9.     let frc = Resources.getFontRenderContext();
   $ ~8 R6 [* E. E' u
10.     bounds = font.getStringBounds(str, frc);
    4 ]5 f4 X/ G$ ^! V" c
11.     return Math.ceil(bounds.getWidth());
    # |8 t3 ^/ e' v( |8 F* A
12. }
    9 R# Q0 l9 x! ~. Z
13. 
    ; @# z) T( m  `0 Z" b7 D+ I
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    : l2 r4 j* @1 J2 ?+ q' A! X+ S
19. db = (g) => {//上层绘制
    8 t7 d# r% c6 S) F5 j! R
20.     g.setColor(Color.WHITE);
    / |+ e9 z- D1 h1 F& P
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    , K% g' P/ W0 y% a# l: d
23.     g.setFont(font0);
    0 _% y1 a2 z( m1 R, p
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    3 j: L6 _9 H( o0 n; g
26.     let w = getW(str, font0);
    & r! h$ b1 E( e$ j4 O4 S7 c
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    ! |9 g* D! b: s, _+ Z/ Y2 d8 q3 v$ Q
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    ( \5 H  V( ]. [( O% `" a2 }) L
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    " ~8 O: j& C" E& u0 L. H5 N! t
35.         ctx: ctx,
    & Y/ @9 b2 d7 V1 t! \0 T
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
      k) J! y& d  k
39.         model: {
    & Y6 t/ I/ x4 M# W3 m" G
40.             renderType: "light",
      ^+ M9 d1 s& E
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    0 N" I5 l. a9 k3 x2 M
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    : ^, ]2 g# C+ s9 i. n/ r4 K
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    " y% x+ j. `2 g- @
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    ( o: J( w4 j, S9 M2 W+ }1 \
58.         if (v > k) return k;
    + {; k5 x1 X2 s# M
59.         if (k < 0) return 0;
    ; o6 R9 S! J5 o9 Q4 J0 n  j9 ?$ M
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    ) q+ p9 ~; I! f5 z$ f
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    7 J+ _1 |2 w: E% N- X7 ^6 j
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    1 R+ d$ Z! ?, W( f. J: k! Y
66.             try {
    : c/ a+ B- I: ?( s& y$ B6 b8 F
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ) R( e9 k! l. p& d3 c
68.                 ti = Date.now();
    " @0 y/ j4 \! z' A& S( t, Z
69.                 if (k > 1.5) {
      `5 P  \$ q4 b6 ]6 a+ A
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    7 L. S$ M( g9 F) K- e
73.                 da(g);
    & S& J3 a" ?  m! Y0 z! w# v6 `
74.                 let kk = smooth(1, k);//平滑切换透明度
    0 V7 X3 r0 m" |" Q5 Q8 B
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    ) n) {) M; Z% R1 P
81.                 rt = Date.now() - ti;
    + s$ C) c# @9 j9 Q
82.                 Thread.sleep(ck(rt - 1000 / fps));
    ' G/ j8 T2 {% g- S. T
83.                 ctx.setDebugInfo("error", 0)
    + }/ A2 n& ]) u
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    % S7 L* h# |! R9 w/ G
86.             }
    # p; S$ k3 R5 {) I& K, x. g
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    - E+ m: u- w  p" x. l0 g
91.     th.start();
    ) \9 n% H: L* X9 t! J5 u! `! y
92. }
    
93. 
    / f0 ^2 k$ o" s, r; `1 [
94. function render(ctx, state, entity) {
    6 N1 I: A1 ?& T2 ]1 b0 l" G
95.     state.f.tick();
    
96. }
    
97. 
    " I& i$ X# @; `7 M. B
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    ' w9 G  u/ k% Y
100.     state.running = false;
     
101.     state.f.close();
     2 E: o, ^! \7 ^, A  Q/ c" n7 V3 s
102. }
     % `5 E# ~2 t' r" C* Z
103. 
     3 }* Q/ Q+ |1 }
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

9 o: h) }; J" l  R# ?写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
6 f' j& d7 u+ Z/ o
/ D) a7 M$ l3 n! V, K0 [  |& J$ }
$ `, g9 c; e8 o" B6 N顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

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