JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   / s" U  U. u* g1 U, E* [' X
3. 
   ' T# }! Q& o5 Z6 T- E% G
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   " U4 \0 w/ S) m, |8 u: `+ L- O
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    5 Z* W6 Q2 b1 [, N7 Z; v
11.     return Math.ceil(bounds.getWidth());
    
12. }
    / `8 \) d2 P& {/ w0 q6 K" q
13. 
    & u0 K+ @4 j7 f( b( O% z/ W
14. da = (g) => {//底图绘制
      J2 G; t8 L  S& D1 ]0 X
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    & x1 x! j# o. }2 ?3 C" [; @" }: T. i, G
17. }
    
18. 
    ; t4 K  R4 A  I3 p2 F3 t3 F, t. M
19. db = (g) => {//上层绘制
    1 {1 M$ R1 F9 M; F3 {
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    + T. t. X) F: L0 ^& m. v
22.     g.setColor(Color.RED);
      y8 f1 J% c0 ^$ s+ o' }( G3 K" U) M0 e
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    " {2 U( n3 n' X( T+ N1 m: \9 M( d
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    : F! j+ E! G) `+ B  A, d0 o3 c
28. }
    
29. 
    
30. const mat = new Matrices();
    7 d( y/ F# T; d+ N, D! \. x* D
31. mat.translate(0, 0.5, 0);
    
32. 
    3 B( [* n" s$ [/ i; b
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    ' g- L4 U# C+ Z6 }9 f  [
36.         isTrain: false,
    
37.         matrices: [mat],
    7 ~/ U' a! o8 v4 t2 d. t3 ~' \0 u
38.         texture: [400, 400],
    
39.         model: {
      O0 \+ f8 T) b# N, B
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    8 N0 ^( q7 B) D  n
43.         }
    " A) b6 S6 a6 z* s
44.     }
    
45.     let f = new Face(info);
    $ D1 t  O% W4 e+ k, g1 b
46.     state.f = f;
    " r4 q7 n& i7 `
47. 
    # F, i& ]$ t/ e; z3 m" _) i' ^
48.     let t = f.texture;
    
49.     let g = t.graphics;
    3 ^, c2 E) X8 R* j( U# V; J
50.     state.running = true;
    * M, _2 U- u$ C( `8 ^
51.     let fps = 24;
    
52.     da(g);//绘制底图
    & v2 [3 @4 r! [
53.     t.upload();
    " n+ {+ t7 S- X' c3 ]/ I
54.     let k = 0;
    
55.     let ti = Date.now();
    5 x& W0 P+ w" {7 B7 `% H
56.     let rt = 0;
    8 ~% W) ?* X7 n
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    $ a/ ~/ w) r. n
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    9 c+ l! Z+ U  w0 M& d" q
61.     }
    
62.     run = () => {// 新线程
    - l# P- s9 i& t+ D7 f  [
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    + W  R6 s4 N! L- y$ q1 f
65.         while (state.running) {
      l( e5 z' ?- S6 g
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ' y1 {+ w6 O' u2 l% w
68.                 ti = Date.now();
    2 Q$ q& Z1 n% A! s6 ~1 w3 a
69.                 if (k > 1.5) {
    , ?  h+ ~. p7 V/ P9 s
70.                     k = 0;
    8 a0 {# j4 _9 O! u
71.                 }
    7 W1 {# ]0 N! U: h! C
72.                 setComp(g, 1);
    1 p2 g6 H' }6 u! c& Z2 k( a
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    4 p8 h" X1 F4 U, ~: L4 _
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    4 t1 W6 _- E1 r9 _& l6 C
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    - `9 l' \% Q( x$ p* i% Z0 N
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    7 K; U' X# K/ [$ c6 E( _% k  a
85.                 ctx.setDebugInfo("error", e);
    , u: q* E+ a' `- X: z+ G" J
86.             }
    
87.         }
    . D( A4 \" S" {1 [5 ~7 u
88.         print("Thread end:" + id);
    ' |: J6 u( X3 e" m. T* y
89.     }
    # T  O# S& ?0 F6 u
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    2 e! J* U8 ^: G. d: W  a- m
92. }
    $ ^# e& Y0 v$ t( _5 Q) }5 b# ?
93. 
    
94. function render(ctx, state, entity) {
    ) H# I) ?: h8 M( E$ o+ [0 P0 q
95.     state.f.tick();
    # w' W+ A. V: \# a' K
96. }
    4 h' r' D* J3 X1 A1 p+ o  n" w
97. 
    
98. function dispose(ctx, state, entity) {
    * F; y. ~5 |6 x& s; F# D# t
99.     print("Dispose");
    
100.     state.running = false;
     6 X- H: l7 k$ z& U3 @+ Q. s& |
101.     state.f.close();
     
102. }
     # x, S+ g% B* c' j
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     0 F/ \8 T& O% x2 V: q4 |
106. }

复制代码

/ C8 x# n1 M: y; f. t写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
% L/ t1 m9 s& ^" {: a- ?/ P
8 S2 ]- |2 e) J& p  r+ o$ O& r
! d4 E9 v$ c$ F+ }顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
/ E8 g$ C  S9 d& m

Hobbytimeblank 发表于 2024-11-16 20:38
. e2 J( t0 o; }6 [全场最瞩目：晴纱是男娘[狗头保命]

- I' R$ A* X0 f$ e甚至双引号里面的自动加粗