JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
" k0 E4 k  u  D' b2 K

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   : c+ u0 [& {* Y+ R1 @- V: u0 h
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   , Q9 @/ ~2 \; Z9 K! d9 @
8. function getW(str, font) {
   7 S- f# [. L8 N0 O8 ]1 k
9.     let frc = Resources.getFontRenderContext();
   3 q: H: w1 _/ I+ Q) ~/ T2 m6 ^# q
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    : |% y- Q+ @( u+ l2 D
17. }
    & Q, N' L$ K6 j; E8 p- j
18. 
    , T+ A! M% Y! S/ O
19. db = (g) => {//上层绘制
    8 F8 C- Q0 `  k+ H- _7 x' d( A
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    $ j2 a4 `* t  ?; Y* c# h
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    * R; Z/ }$ G. s4 G
25.     let ww = 400;
    & Q, @, x7 F% W5 a, c  r5 c
26.     let w = getW(str, font0);
    8 Q& h8 h* L( u+ ]7 {! o$ @
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    % W5 }& w3 s5 i$ l, Z; x. {7 a
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    : u" Q0 L$ F) y& \
33. function create(ctx, state, entity) {
    & m) u4 f2 a3 X3 B
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    ( d  Q2 Q% k8 X% p( L
37.         matrices: [mat],
    : `% U: L0 N6 u- ?
38.         texture: [400, 400],
    
39.         model: {
    ) S' U4 S7 L, A, b: b, B
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
      d- Q; ?1 B# ~& D1 p
43.         }
    4 E9 W( }7 ~" o6 [$ e
44.     }
    % F; q( O# Q& W. c6 G
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    . v7 T6 G9 v  O- k- F# G
48.     let t = f.texture;
    : F( {3 K- G5 H+ C" @: B
49.     let g = t.graphics;
    0 @  W) m3 D+ f: |" `, H5 {
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    0 V( Y6 m, D2 f" p
54.     let k = 0;
    1 C/ Y7 h( i! S
55.     let ti = Date.now();
    
56.     let rt = 0;
    ! t/ d9 Q& Q( j
57.     smooth = (k, v) => {// 平滑变化
    ) D+ q' E$ |# r  g2 x) O7 `+ Y
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    2 S! z0 O( [( x
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    4 T0 J; F4 k3 L$ q: e( D! Q+ M
62.     run = () => {// 新线程
    8 w3 w( j# `( J7 S0 I
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    3 ~3 z- f# M/ u9 c4 k5 v
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    0 h* a6 ]7 ?; R1 T$ s  j, _
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    " i2 k. k. z) B2 x0 B1 {
71.                 }
    
72.                 setComp(g, 1);
    * P& @: A: B" h+ v  a. j0 S% i
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    9 u$ P" x! g" e/ v, F4 H
75.                 setComp(g, kk);
    
76.                 db(g);
    3 D: V4 C; |1 O, ?/ U
77.                 t.upload();
    8 V) Q9 p$ @0 i$ Y# V1 R
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    / V4 I7 e- n$ i4 g
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    ' M  j8 r- g9 x# ~: x
84.             } catch (e) {
    3 m! K: c4 U$ C; @
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    " L/ K1 Y3 J/ p. X5 I
88.         print("Thread end:" + id);
    8 F* f- I7 \3 ]# x. v
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    & H) I  K+ b2 L8 b
91.     th.start();
    ( }6 v/ j, b5 h5 z
92. }
    ; k1 J: |6 N7 s2 L
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    9 I7 a4 W  a, e8 L
96. }
    7 V% X6 J- O+ @, q% t& p
97. 
    9 Z9 ]9 D3 U$ M5 n/ s% G
98. function dispose(ctx, state, entity) {
    9 [8 F- z1 q# X3 m1 \( f9 O
99.     print("Dispose");
    : q. g5 D% d: j! F  c
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     - o& m2 e& M6 }( x: n  H
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     9 ]! h& j: a0 x9 Z' [/ T/ _% d
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
% D3 e( R2 X! Y0 D9 b

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
1 Q9 U, L3 H/ O) k! c4 E1 @$ a

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
% M4 N. k, a- U2 Z1 ^  i

Hobbytimeblank 发表于 2024-11-16 20:38
" E) H) X$ Z! G4 ~, L6 O( a全场最瞩目：晴纱是男娘[狗头保命]

- w0 R, Y$ U& j& M* g- A) i+ l甚至双引号里面的自动加粗