JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
3 i& S2 n& _& ?  {  J

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   2 Y- J: f. m7 Z, M. j/ _  |& O
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   . @* B; e! u. y$ U' n
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   6 Y' o: B! [: K5 {, z7 x
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    " r# ?, ?$ @; G. w' B2 c- D
12. }
    
13. 
    * B/ W9 a* S, H: b" y; a5 {. H
14. da = (g) => {//底图绘制
    / B" `% X" Y. O' n" G
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    4 x% _+ r7 \8 \6 o1 Z7 b) f
18. 
    " B& ~# L; b$ v6 P- x' O
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    " }) P5 [( |, _7 `7 t: i) M
23.     g.setFont(font0);
    2 x, Q3 v6 @. ?0 }# t% k: l3 W$ D
24.     let str = "晴纱是男娘";
    : e" J/ I" T9 I% H# ]7 j7 o
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    2 v% K0 X3 F7 O* M$ {7 T4 ^
28. }
    ( o$ w' H" A5 K! U! J6 ?% Q
29. 
    
30. const mat = new Matrices();
    9 K$ i2 [8 R5 _$ B. M# j
31. mat.translate(0, 0.5, 0);
    " w# t! c/ a5 [0 T0 A5 H0 V% U
32. 
    + _' T$ \2 _( S5 w
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    $ ]) F+ q* c. ?% M% w: |' p
42.             uvSize: [1, 1]
    
43.         }
    $ \" |/ W! b3 T5 o
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    $ D. ]% }' I3 `* X6 n) f0 ^
48.     let t = f.texture;
    & F0 u. s9 I( F! q, ]
49.     let g = t.graphics;
    # Q( `1 G& K+ A! K! h
50.     state.running = true;
    * E# l& _) H5 I& ]+ f
51.     let fps = 24;
    # C* s: b% ~: s
52.     da(g);//绘制底图
    ' c( u8 r3 X3 L9 H+ Q
53.     t.upload();
    
54.     let k = 0;
    & {1 K( ]# x3 Y8 t$ z% R
55.     let ti = Date.now();
    . D1 ?! _" d% y
56.     let rt = 0;
    1 F1 s& u7 o3 q6 _& j) G4 u
57.     smooth = (k, v) => {// 平滑变化
    7 B2 I) p6 g5 w, \6 h" q
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    6 W  e& s6 x( \9 j0 ^
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    % a* _% q* m0 w: k  v% b9 T2 Y
61.     }
    5 ]! U! s* u1 {3 \/ o
62.     run = () => {// 新线程
    $ s9 a# q: e' W" M# e
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    # f+ f/ y$ `1 B( t. f. z
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    0 B3 {6 [6 O) f& R" Y1 c7 C
72.                 setComp(g, 1);
    
73.                 da(g);
    ! j" D8 ]% ?1 o+ G
74.                 let kk = smooth(1, k);//平滑切换透明度
    9 m. T! @1 t, x6 B
75.                 setComp(g, kk);
    + n& P3 x* m6 u0 [0 T
76.                 db(g);
    ' ?3 L( M$ _- d+ X9 L7 `
77.                 t.upload();
    & A/ s$ Q5 \* ]
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    5 G, `. {1 x: e5 ~  @7 `
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    7 f; N& U8 W* ^, E1 i2 _
82.                 Thread.sleep(ck(rt - 1000 / fps));
    " }1 }9 V  y7 \9 v( R* }, T9 V3 X
83.                 ctx.setDebugInfo("error", 0)
    ' |" Z6 G6 A; }' X5 i5 z
84.             } catch (e) {
    & ?9 z' {6 L$ m8 d0 U; V  o2 `
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    . x# D/ s& k) S+ y3 l6 r' J' l5 z
88.         print("Thread end:" + id);
    : i, z6 u3 \) w
89.     }
    5 l) o  s' o2 k8 j, |* I/ H1 J
90.     let th = new Thread(run, "qiehuan");
    - s* A1 J& y4 W1 |. g
91.     th.start();
    
92. }
    ) p1 E* ^: Y, |; k
93. 
    ( z, r+ V" R, f; s3 L( ~$ u( J
94. function render(ctx, state, entity) {
    4 s! g& F( Z( G! j6 @( n/ J
95.     state.f.tick();
    
96. }
    - v+ w1 r+ e( T8 e  _2 o
97. 
    5 M7 l5 |6 X( Q& K5 P
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     6 M6 n. Y% @  {3 t# \9 @' M: X
101.     state.f.close();
     % ]# `& Y! Y  e. V! w# Q
102. }
     
103. 
     
104. function setComp(g, value) {
     & Z7 _, b# e. h8 e' E
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

* J- v7 J5 M# N* u0 y8 L写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
& e: B. r* j; W; T% H6 D8 b
+ U3 |  _6 o* {- i9 L0 S0 a. s
9 a! L1 r4 L8 u# T顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
* K6 x8 p  v  f0 S" \

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
' _7 O4 q9 i0 F4 E9 O8 p$ e/ b& L

Hobbytimeblank 发表于 2024-11-16 20:38
$ Z" s  u* Y. c" F; N全场最瞩目：晴纱是男娘[狗头保命]

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