JS LCD 切换示例分享

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

1. importPackage (java.lang);
   $ q6 P0 U! N1 E
2. importPackage (java.awt);
   ' w1 W* n1 U( b2 I
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   ! U/ m! m6 P) h9 `( X
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   * G3 c. X# q, n- R: U7 ]
10.     bounds = font.getStringBounds(str, frc);
    ' K9 B. {* s4 ^
11.     return Math.ceil(bounds.getWidth());
    & I# X  i/ S- y- W4 h7 u6 c6 l9 T
12. }
    4 ~$ A, k5 b: ~1 k
13. 
    
14. da = (g) => {//底图绘制
    8 l: l$ \: J# E0 o
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    + g  x7 P  p, A# X$ A: B
17. }
    & T/ [7 k" n" ]1 G2 f$ F& a
18. 
    0 h5 k$ q0 q- N4 b$ n( \" X! M
19. db = (g) => {//上层绘制
    & x" i0 [3 m+ x  a5 n
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    7 p+ Q4 M, ^' L, n
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    4 k/ c" t' [. n, C" [; y3 w
26.     let w = getW(str, font0);
    5 i# r/ y9 @) D" e% u. x( u0 N
27.     g.drawString(str, ww / 2 - w / 2, 200);
    ; z8 w& e* v& Q9 E9 c& `; `
28. }
    2 I+ t) _' T0 V0 c$ }# T7 H7 a
29. 
    ' o1 u  U- N# z) a8 Z/ H
30. const mat = new Matrices();
    6 @8 m/ N1 T6 V* _) z4 T( N1 W
31. mat.translate(0, 0.5, 0);
    : K  P2 y5 S  h' A
32. 
    
33. function create(ctx, state, entity) {
    ; l, I" Z3 Y$ b3 h: v- q7 Y
34.     let info = {
    3 r/ ]8 b3 ]5 l6 j( {; ^- Q
35.         ctx: ctx,
    
36.         isTrain: false,
      _' y* z$ z' ]! Q
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    ; B8 s) J+ l. z; o
40.             renderType: "light",
    2 V; A6 ~7 r# j1 P
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    4 E! H/ f& p1 Y: l) ]  q. r
43.         }
    
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    / ]8 ~( A6 m9 H, e  a1 ]
47. 
    ; b4 q% z8 q5 [  ?# m
48.     let t = f.texture;
    
49.     let g = t.graphics;
    . S3 b. L' G1 j+ m
50.     state.running = true;
    ! I. D( {0 ^4 y' B- y
51.     let fps = 24;
    0 D5 j4 H% |' A( r9 Q! C
52.     da(g);//绘制底图
    
53.     t.upload();
    ( n% c, p; u& L
54.     let k = 0;
    3 ^" `5 Z& k4 ^
55.     let ti = Date.now();
    
56.     let rt = 0;
    . _' o( x2 V6 H9 S% t
57.     smooth = (k, v) => {// 平滑变化
    ! _2 K5 q( O6 Q' G
58.         if (v > k) return k;
    6 U2 m) v4 _4 m
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    ! r3 J. H0 B- L$ g4 ]
66.             try {
    9 g6 ]2 C( `6 `- g; Z- |
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    ' y7 o1 p/ T: J4 j
69.                 if (k > 1.5) {
    8 p2 z6 ~% b( t3 w# K5 l, \
70.                     k = 0;
    ) c" N) R1 ~* j7 _. F
71.                 }
    9 X% V8 o0 e" }
72.                 setComp(g, 1);
    3 P2 f0 n- ?/ C. j$ S" l1 Y+ Q
73.                 da(g);
    ! I7 r! b; f3 @( [6 A8 j
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    * [, s/ _. v8 i* n
76.                 db(g);
    
77.                 t.upload();
    - T5 J0 k! X7 y; c
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    8 v- b5 L# e/ @
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    " G0 P0 D0 a+ e) ]
81.                 rt = Date.now() - ti;
    ( K; L0 F9 H) t5 V+ s+ c
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    " w/ ?7 C! E8 B
85.                 ctx.setDebugInfo("error", e);
    , O8 X, a  b& Z, S
86.             }
    ( I9 r8 u. s( F
87.         }
    3 _+ j$ [0 c; O. h0 e  G( o% M
88.         print("Thread end:" + id);
    + h) C! I- G( l- b. v* Y; J% l% A
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    : z0 r, u( c3 S4 G7 _5 Z5 w
95.     state.f.tick();
    % l- z- z0 {) q% q9 z
96. }
    " ^3 Q# T, l2 l8 R
97. 
    ) O7 S$ L& I8 a, k3 B% r
98. function dispose(ctx, state, entity) {
    9 F, A8 e& Q. n! d
99.     print("Dispose");
    
100.     state.running = false;
     ( I% b& Q2 b% h
101.     state.f.close();
     6 v2 L* b0 n4 y% d- @. Z: D( e
102. }
     1 B+ g+ _3 U% ?4 e& ~
103. 
     
104. function setComp(g, value) {
     # w9 V8 i- A5 B3 e9 a6 h
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
, D% o$ p- Y+ F; p: J

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
1 a, H6 _; m' I0 G

Hobbytimeblank 发表于 2024-11-16 20:38
9 A# z. n4 w1 s# b全场最瞩目：晴纱是男娘[狗头保命]

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