JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   ! J+ O, x4 ?9 p2 Z" s& m/ \. \5 F
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   : E- \& G7 i" o4 g! E/ E, T( Q
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   7 F1 G- @! B& L# ~9 \
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    , V3 j8 z: O% `& q% s: E
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    5 L6 C$ s" F3 g# G
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    - A' w; `) E, P7 c. T; y# F& b
18. 
    , P+ T1 V* V; @4 s
19. db = (g) => {//上层绘制
    * s& r7 g8 I5 {, L6 S& Z
20.     g.setColor(Color.WHITE);
    / K$ {* V2 d& m1 K2 Z3 c4 }- P
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    5 T- k* S( {, |, Z
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    , V$ A6 ^8 n2 F0 [. h4 _/ X3 |/ h
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    + u. H1 e3 P" c) [
34.     let info = {
    4 n' v+ i7 Y  U2 m& g
35.         ctx: ctx,
    & A2 u0 O0 f# b
36.         isTrain: false,
    ; N' i9 N- D' f7 F; w
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    3 S* O1 p2 [. c0 h7 k( A
41.             size: [1, 1],
      ?# U0 o# e6 X' T7 j! V# y
42.             uvSize: [1, 1]
    + R' a; E* z) `" m5 r+ N4 l
43.         }
    0 o1 E1 t( {9 }: @) f2 U
44.     }
    . e/ D8 N: V, J, p- y" `! w
45.     let f = new Face(info);
    4 x1 H/ x& L5 [4 Y/ _/ P1 Q
46.     state.f = f;
    + D0 o0 N4 @7 \1 P6 z
47. 
    1 [6 g) g8 f- k# P5 S  h
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    9 a/ K2 g7 Q2 t" |3 }# a8 {! Y
51.     let fps = 24;
    7 R/ U/ [% a4 w3 w
52.     da(g);//绘制底图
    
53.     t.upload();
    ( j5 g8 a) K- v+ \( R" \
54.     let k = 0;
    
55.     let ti = Date.now();
    + b& Y) K4 s& F! h: X: u5 b
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    / ~' G1 @; g+ G& }% R, T$ x: y
58.         if (v > k) return k;
    " o1 l) F; B. C8 K
59.         if (k < 0) return 0;
    ; e; ^! k0 `4 \$ p& A
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    6 H) @+ |! S% T8 K. f; z  ?
62.     run = () => {// 新线程
    ! q' {8 l4 A% |" j' \! }) H# o
63.         let id = Thread.currentThread().getId();
    ' w: k, C9 @2 D2 X8 B$ G
64.         print("Thread start:" + id);
    ' w- Q" M6 z- k- ~! t! q* s
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    : }4 L' J- S( C& m- i. c% \! u' Y: P
69.                 if (k > 1.5) {
    2 E6 l; F: }- _+ x$ R7 |; K- y# _; s
70.                     k = 0;
    % c4 v. e; ^- ]# B7 s  o. d
71.                 }
    9 M" k! ~; H, N& O" J) s5 U, I! W
72.                 setComp(g, 1);
    3 \+ `7 n6 j% g2 U
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    ! n4 L" `! N. R
75.                 setComp(g, kk);
    . [- c( Q+ E+ V4 {5 e* o
76.                 db(g);
    
77.                 t.upload();
    / E$ l* N' D2 A7 Q3 h8 h
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    $ D) o8 z1 h/ e& c8 k- ?
79.                 ctx.setDebugInfo("k", k);
    ; i$ L6 C0 X! }2 Q- u6 b/ U+ p
80.                 ctx.setDebugInfo("sm", kk);
    ( f  B: Q' {3 Y; @
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    4 q8 ~; G& A; c* B
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    ; P8 G1 e5 ?* I7 }5 ?
85.                 ctx.setDebugInfo("error", e);
    * [* K, J9 ]& g2 S3 y6 N
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    1 {" W, d, j2 a% @- B0 u
90.     let th = new Thread(run, "qiehuan");
    7 v" s7 B) Z: B
91.     th.start();
    ' E" R, f4 X( l$ K5 R0 t; X0 N) B
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    3 I& a  m  X4 \& K* o7 F
96. }
    
97. 
    : D- e5 ?% ?9 V. m7 r
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    % m% P/ R6 I- z6 N0 B  i: q7 c
100.     state.running = false;
     
101.     state.f.close();
     ( L5 e) D% y' M' J. k! [
102. }
     + i. u; ]& g, a  B* ?
103. 
     . i+ `  ]( x+ T1 g3 J
104. function setComp(g, value) {
     ! G4 `) X) P+ i) E  K7 W
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     . E# w; W' z- F
106. }

复制代码

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

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
, }, a' _8 [- ~. u

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
  b, Y7 e) J/ P. o$ F# {

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

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