JS LCD 切换示例分享

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

1. importPackage (java.lang);
   5 l$ z) }  K5 q, }& _8 {
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   ; B& E+ w$ e; l  j! \# W
5. 
   . y( h( S3 [: j/ e' j" H9 z
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   * |* x) _- S' a2 D
8. function getW(str, font) {
   & q4 q3 x7 m6 B, m
9.     let frc = Resources.getFontRenderContext();
     ~( r6 B- Z/ [! g" w
10.     bounds = font.getStringBounds(str, frc);
    - r5 ^4 A/ a# C, I' k( j# t
11.     return Math.ceil(bounds.getWidth());
    
12. }
    - D. `& D6 n! v1 P5 X/ Q1 W1 ]- i
13. 
    5 [6 m- d* s3 H0 t4 F
14. da = (g) => {//底图绘制
    ' V0 T! M& i2 ?. P+ C+ i
15.     g.setColor(Color.BLACK);
    1 `9 m9 c+ D5 o' J6 R
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    0 S# y. O' B9 b2 w$ U3 N: {4 Z& |9 ~! h
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    7 \" t4 ]' @3 {: c: Q
22.     g.setColor(Color.RED);
    $ T) k6 }( J9 w9 w& B
23.     g.setFont(font0);
    1 z) s; O. g2 z. i" u
24.     let str = "晴纱是男娘";
    ( x  R; P, y# Z
25.     let ww = 400;
    ' ]2 ~: [6 c3 p/ P/ {* i5 `
26.     let w = getW(str, font0);
    , h( E8 J9 @+ Z# u
27.     g.drawString(str, ww / 2 - w / 2, 200);
    6 T; q" Q, o5 ~
28. }
    7 d/ F' q7 d, z( \/ W* n
29. 
    
30. const mat = new Matrices();
    7 w4 b. j; ~& c' K7 }/ O3 o
31. mat.translate(0, 0.5, 0);
    ' O$ _: ~! a, W5 t& A: q, X
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    2 P& _2 v7 [. z" w- |5 G7 [
35.         ctx: ctx,
    - [4 X  u# G" i# ^
36.         isTrain: false,
    9 ]: X/ p# O" Q, i. P" T
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
      ~$ E/ X% S% T. G( o0 x
41.             size: [1, 1],
    * ^. \1 R( w* b; F
42.             uvSize: [1, 1]
    9 o1 {; j$ B1 Z; {) l
43.         }
    
44.     }
    1 _3 n1 V. y$ G: K
45.     let f = new Face(info);
    # ~: X% B5 \+ X. P) B& x/ @7 p
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    + X3 F  [1 M6 Q2 P/ A+ K% ~
51.     let fps = 24;
    " F. |  G% q" b$ j0 P
52.     da(g);//绘制底图
    + v' U. I9 }6 \0 `; j/ n
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    + b3 W1 [! m& J( A1 E3 N# h
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;
    & C( I7 [$ q! q7 r( c
61.     }
    # a1 o7 |7 Z' I
62.     run = () => {// 新线程
    * s: }* W' e' b8 j% I3 a
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    4 B3 X. U" F8 d0 Z
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
      B$ f1 g2 I1 `. O( ?
68.                 ti = Date.now();
    5 E" t- Q  Y; B; ~$ M$ ~- `
69.                 if (k > 1.5) {
    3 V/ G, @5 S+ D6 A2 a+ Y
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    " f- \5 y/ \3 f# r8 l( z: ]% C
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    ) d$ m9 d. }1 Y( E: J
76.                 db(g);
    9 h0 Z! E' ~1 V& |# b
77.                 t.upload();
    . u: ~3 n' P% [  x; F% N" H% Y
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    ' R. S$ h, T! V+ C0 G2 B
79.                 ctx.setDebugInfo("k", k);
    % N3 i7 H( x/ R& A
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    * `' x3 b- \% ^  N( {  h
84.             } catch (e) {
    / n9 `( Z3 l) T: X1 `
85.                 ctx.setDebugInfo("error", e);
    8 b$ J  @: k. N' s" [# M
86.             }
    
87.         }
    3 v$ h6 G2 C% D" Q8 N  r
88.         print("Thread end:" + id);
    + l$ O  P3 ~- \) K; F, s
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    ; f$ Y4 D) Z) b+ S
91.     th.start();
    
92. }
    1 T1 Z' g% z# y- C! E
93. 
    " q7 j8 J$ C: m: l: d
94. function render(ctx, state, entity) {
    " C! |* _6 \/ o
95.     state.f.tick();
    + g3 b% S8 `* {, }* A2 |8 p/ c
96. }
    7 J7 r5 R% b& j/ `+ i  O9 m
97. 
    
98. function dispose(ctx, state, entity) {
    $ h. U+ O) A" q2 |% h- ]
99.     print("Dispose");
    % t( ~7 A8 C. N
100.     state.running = false;
     3 c, Z- A; a- E- ~6 O: i
101.     state.f.close();
     ; v. h: Q! V/ e1 M! ?) W! z9 r
102. }
     $ G0 S, P8 E* H7 x0 v
103. 
     + N0 k$ T# u& a/ ~9 _4 p
104. function setComp(g, value) {
     9 L+ G1 |& Q) N
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     9 Y* c  m' Y  m) l5 z- B! {5 h3 A
106. }

复制代码

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

3 v7 }% b7 k. B9 z6 F
: M' w8 R  b2 V2 {* ^2 ^顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
3 k. F0 I- h, l& r& c/ K

看不懂，但我大受震撼

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

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

( |$ D) k1 Z2 o+ X甚至双引号里面的自动加粗