JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
: M' Z8 E( r" V, l

1. importPackage (java.lang);
   ! X) d1 n& H& D- x3 X; ~5 \, B# h7 l
2. importPackage (java.awt);
   
3. 
   ( ~  i$ ^. Y4 `6 t6 [
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   . [2 K  `) Q# g1 J3 [4 R# u
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   ! k& K: N0 n; w8 q$ e$ D3 w6 n
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    8 B% u0 _0 j( h' o8 z+ J( N
11.     return Math.ceil(bounds.getWidth());
    4 T- X5 }- w  U& s
12. }
    
13. 
      C) F5 I; |. _1 x* i! w
14. da = (g) => {//底图绘制
    ' ?; B: @1 h  B7 O$ u' ~
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    * m$ l, s, b" n, ~7 r
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    1 U/ N, _0 z4 t! J1 }# x
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    , k; Q# V5 h: p/ F' c& o" O
26.     let w = getW(str, font0);
    0 c. K- [: v4 t! K
27.     g.drawString(str, ww / 2 - w / 2, 200);
    - ^; J/ G7 S1 s1 j7 }8 P6 E( }
28. }
    9 T- F' A9 f+ f. C: a) ^
29. 
    % s( K; s0 `5 t/ [, d. i; ~1 X
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    , R) O% V3 p3 ?: h1 e
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    , i& y( h4 W' G# T
35.         ctx: ctx,
    
36.         isTrain: false,
    5 Q& c: @7 x6 U: V" M
37.         matrices: [mat],
    # m  p: F9 _& Z7 P+ j, K
38.         texture: [400, 400],
    & U# E2 E# q/ u  E5 ^' b6 }1 t7 b  \/ c
39.         model: {
    8 j8 W" S- h! X6 X
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    . G9 u5 o* X5 U0 l: K7 P/ b, M
44.     }
    
45.     let f = new Face(info);
    / E' f* E3 j, K7 j% C* C! q# Z; i
46.     state.f = f;
    : W% ]' z+ D4 Q$ N( N6 @
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    ) c4 G7 w; q: ?. b
50.     state.running = true;
    
51.     let fps = 24;
    ! h( [3 R6 s: [2 A
52.     da(g);//绘制底图
    ; e6 @" g7 ^  s* L- f. R5 {1 a
53.     t.upload();
    ' N' M4 k$ O  ~  [# \
54.     let k = 0;
    
55.     let ti = Date.now();
    + g" `1 b/ D" `: l0 m7 R
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
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) {
    3 y) M5 [3 ^- c* n* L3 A4 `
66.             try {
    , l! w0 H% I0 z: \' U. p. O! v
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    " L/ C' a- s1 g) `
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    0 a: k' K8 J* Z$ g* v
72.                 setComp(g, 1);
    : b; s' C7 D- m. L( K  }" C2 x
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    ! L1 D7 r% l8 E$ u  A. G& J
77.                 t.upload();
    % I2 K) ?& D/ c* p1 n( ?3 ~
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    + W' s+ T: @. r6 _( h! Q0 R$ i
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
      o9 ?8 P& y( o9 t, Q+ r- F* a2 M, ^
84.             } catch (e) {
    ' d; t% d- \8 |$ U, V- ]+ V
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    ! ]2 S6 C2 k" Y, K8 z% _$ `
88.         print("Thread end:" + id);
    / e1 |4 _: f1 s1 `+ F: @1 \" F
89.     }
    4 d% L8 x5 }! [- H1 _
90.     let th = new Thread(run, "qiehuan");
    : [4 @& ], x; J. Q
91.     th.start();
    
92. }
    , b* L% Y+ q& m% i
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    % Q# D& ?) ^+ l) k# E# I8 E4 s
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
      S+ ~! k3 O0 ]( @6 p' U
100.     state.running = false;
     & m6 c; L8 o4 ~7 ]5 K
101.     state.f.close();
     8 d5 s& m6 X7 _( b% n& Y- o- a% @
102. }
     
103. 
     $ k& I& z( u  {8 R* T3 b7 P0 H
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     1 X! w4 c3 T/ f- S- c
106. }

复制代码

# ^6 G% Y$ ~+ r写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
) |1 J# z3 `% \* Y  j# h

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
3 q8 {5 x" J% z& V

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
) G& G  O7 e4 ^* n$ B; f3 Y

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

" U7 D" n7 m$ w  v$ ?甚至双引号里面的自动加粗