JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ( K# v0 M+ ]8 U& \+ d* E5 B
7. 
   
8. function getW(str, font) {
   7 H7 d4 ]* Y0 m% ^
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    5 e" J, u( Z* r( i0 b* a2 z
13. 
    5 y" @' I: L' W1 X( ?& h
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    ) T" T; P  x. k. X  \  E( Z9 ?4 b
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    % e2 E: t8 [0 C# b- W# v  W5 a
18. 
    " Z' |6 C" V; b) A2 \
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    # K2 N2 y$ [5 n, C+ d, e
24.     let str = "晴纱是男娘";
    - F) R+ U3 }5 L4 V* _
25.     let ww = 400;
    6 q; |% U7 U+ m
26.     let w = getW(str, font0);
    - H& g8 {  u( d
27.     g.drawString(str, ww / 2 - w / 2, 200);
    $ n7 ~7 a% @0 s& A7 g- h
28. }
    + Z  z3 h; _5 X# c
29. 
    4 o! A+ S$ h; Y0 C
30. const mat = new Matrices();
    % P$ k: I2 @5 ?* }# P* s; H
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    : T9 R+ n) P1 h# H
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    6 ~. M9 E) g5 _' ^7 }
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    % N! [: s% a1 K: S( a1 P. j6 X) G
40.             renderType: "light",
    ; H* x3 J5 o4 c8 m* x# R
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    6 Q# ]( Y* j9 _! g( B! V& v# ^) L
48.     let t = f.texture;
    * ?' A3 V7 `/ M; X9 U
49.     let g = t.graphics;
    2 h8 m4 i" R, A/ C3 `, B: V
50.     state.running = true;
    
51.     let fps = 24;
    4 B# _; U( e# f
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    0 E% y$ V& s# j2 Q0 V4 c( ^
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    & M  T, v6 m1 r0 a0 ?" Y
61.     }
    + {+ H1 [! U( [8 n9 _
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    - W! C$ C& b5 m* N; e. ~3 I0 p
65.         while (state.running) {
    4 d, x& @% C% d
66.             try {
    8 X. P! G8 |+ T6 L: t9 N5 _
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    % U+ B% _1 n( E% J& n4 Z
68.                 ti = Date.now();
    7 X" r7 ~/ m# v( a+ _" T
69.                 if (k > 1.5) {
    9 A6 F' |: |$ o
70.                     k = 0;
    + G& r6 V* T% B/ G0 \
71.                 }
    2 U2 L2 f' N3 E8 q( Y2 Z
72.                 setComp(g, 1);
    / |1 j. w2 E- l. C
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    : c" f+ D1 n1 M9 h% r
75.                 setComp(g, kk);
    
76.                 db(g);
    " ]% m# \4 y. T( q
77.                 t.upload();
    ' B3 ~" l% i7 Q+ d% k
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    % [, s6 T$ V' P: G
81.                 rt = Date.now() - ti;
    ( H5 d9 b+ Y7 E, B# A
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    5 }( e( U  y5 Q2 |1 t# t0 |7 g
85.                 ctx.setDebugInfo("error", e);
    , T' g" I; l& m3 k0 ?' D
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    ( Z. o5 a% T$ Z( N7 E9 c! F
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    $ p0 F" q* i. A
93. 
    
94. function render(ctx, state, entity) {
    ) h6 U/ t% l. e) e7 o" J% N
95.     state.f.tick();
    
96. }
    ' H  p* ^4 R* ?$ h1 k( @
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    5 I! T, f! r/ S
100.     state.running = false;
     * u: ?4 N% O+ `
101.     state.f.close();
     
102. }
     ) t' G5 C( e$ X6 \7 ]. w: W
103. 
     ! K! p4 D( r+ q- o% a% Z! w
104. function setComp(g, value) {
     1 I- i+ o7 M8 G" F
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

8 }- M+ u  [% |0 Z/ V8 g$ ^写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

; [' a. n, I' y$ q! d甚至双引号里面的自动加粗