JS LCD 切换示例分享

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

1. importPackage (java.lang);
   ) G& [; |* W# K6 p
2. importPackage (java.awt);
   - {5 A- `- v" H8 Z, r" l# v$ P5 y: o
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   : Z; h, v# ?. N' y+ o  W
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   & o5 h7 [. r/ |- _0 n
7. 
   , V4 R8 U6 n% t
8. function getW(str, font) {
   * F' Y, I$ J: K$ h
9.     let frc = Resources.getFontRenderContext();
   * B6 q: f( C& t' ?- R6 g2 n0 |3 p
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    ) P5 p# O/ j8 X; c( O( E1 R
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    0 }$ r3 J- v# C. `3 g5 C- _, |
15.     g.setColor(Color.BLACK);
    3 @' a* v. k' C) ~8 @7 `: c
16.     g.fillRect(0, 0, 400, 400);
    2 L2 i7 p$ N' L7 {, F9 r
17. }
    
18. 
      k  }8 u9 d" ?: Z
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    # G  S0 j  }5 i8 C- S
22.     g.setColor(Color.RED);
    % |( l3 v+ d' B9 [  p( `  u
23.     g.setFont(font0);
      @' R. o8 X: M# w2 A* s
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    " D8 s' M9 d1 `! X# i, W- c
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    4 V2 N3 a# `' k3 p7 r) P' C
29. 
    0 g0 }1 z7 m" y" _7 q; V3 S' U2 i
30. const mat = new Matrices();
    + ^  ~' G( f8 S' M, I2 T
31. mat.translate(0, 0.5, 0);
    3 w0 J+ G2 N8 @0 d7 U4 {
32. 
    0 g$ y0 ~! G' T  s
33. function create(ctx, state, entity) {
    
34.     let info = {
    / I  [- A  `- J$ r' }
35.         ctx: ctx,
    
36.         isTrain: false,
    ) o" C4 c& \5 q2 G
37.         matrices: [mat],
    
38.         texture: [400, 400],
    & S% x) T. v' \5 D# G7 H
39.         model: {
    
40.             renderType: "light",
    / O% ~' r" {1 i& U& w# }3 A+ @! Q
41.             size: [1, 1],
    " z6 u9 s+ ~% t' l; V8 X2 i; }
42.             uvSize: [1, 1]
    % G) K- O: g5 f0 i
43.         }
    
44.     }
    0 j$ r% H0 j% u
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    4 t- D* ?5 ^) k* G. l3 ]
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    % r" A7 j( ^4 p1 ?% e# M1 x
56.     let rt = 0;
    8 H. Z. n/ S. ?3 h" y( Y
57.     smooth = (k, v) => {// 平滑变化
    * ]0 P4 k; L! D, F/ t: B4 c
58.         if (v > k) return k;
    * l: b1 c& [' k: F% D9 R
59.         if (k < 0) return 0;
    / U. L& h% T4 |: W$ B; J
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    & @) d( |) h2 R( r. A" {
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    , G! _3 z% p1 `6 R" F1 ^
64.         print("Thread start:" + id);
    + B; F9 c+ e4 G5 s3 H  y
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;
    & S) M9 t0 R1 W  f- Z
71.                 }
    
72.                 setComp(g, 1);
    8 X  H5 C$ }$ }: W3 T
73.                 da(g);
    " e- r; |$ t, Y: B8 ]& ^
74.                 let kk = smooth(1, k);//平滑切换透明度
      O! Z1 e9 T3 s' p' \
75.                 setComp(g, kk);
    
76.                 db(g);
    2 q6 T- B; @5 @$ b* X1 M$ x
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    - l" l2 [2 k" P( Z9 \
79.                 ctx.setDebugInfo("k", k);
    7 K( r3 L- D* g2 x- d' B
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    8 K. i5 N0 M6 D. w! W
83.                 ctx.setDebugInfo("error", 0)
    $ }9 Z9 w) E  C7 W* Y
84.             } catch (e) {
    : Q2 k8 @) j7 A& M
85.                 ctx.setDebugInfo("error", e);
    ! C1 ~' B, _5 o, U4 _; o% y
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    - U3 N* m7 D+ X/ g
89.     }
    0 s' X/ }+ N* h$ x5 V# C
90.     let th = new Thread(run, "qiehuan");
    ( S& P* y$ ]5 c) r4 t
91.     th.start();
    
92. }
    % B2 j; F5 j0 J" |( a6 M! G1 _
93. 
    ; z4 [, p! f- e; i, d5 x! \  w
94. function render(ctx, state, entity) {
    ! @/ z, ^: M; J# _  u8 ?. z& O# t
95.     state.f.tick();
    0 }5 f+ ^# j8 P9 N
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    9 H% w9 S+ q0 c; m
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
       I' E/ L" W7 \1 ]$ y" _* p4 S
106. }

复制代码

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


; f+ ^+ }# V: ^( X0 l顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
' e+ c: y# O& ?4 I

Hobbytimeblank 发表于 2024-11-16 20:38
, a1 _4 `" m% m* Y& B! v7 E全场最瞩目：晴纱是男娘[狗头保命]

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