JS LCD 切换示例分享

3 L; R* P+ L' V3 b! e$ o  A  x  {这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   ) b- ^; H# J2 o
8. function getW(str, font) {
     W$ Q+ E7 L3 n- h$ ?- @! A$ p, D
9.     let frc = Resources.getFontRenderContext();
   - t: d. A/ T" S2 a5 w
10.     bounds = font.getStringBounds(str, frc);
    + ^% K( b0 Y- p8 K. `; _
11.     return Math.ceil(bounds.getWidth());
    9 Y  q/ r3 T9 o& Y4 H  Q2 v4 m
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    4 V/ Y) Y/ Y( ~
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    $ n# m& W9 b- g9 u% I
18. 
    ; Q2 o3 `- g% A$ ?" m, G' T
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    ! u# S7 q: j- t3 k/ a
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    2 A  I# B" p7 Y* w' G8 C  D7 a
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
      F% c; c( d$ ?8 q- R' K
26.     let w = getW(str, font0);
    : K$ C) S9 B0 y  v4 P7 L, x$ L4 ~
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    & z7 U, G4 {) @! M& I  k" V
29. 
    
30. const mat = new Matrices();
    * q) ]5 t8 d, V% d" b
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    # N1 I( ?2 w- j4 E( D2 h* S
35.         ctx: ctx,
    & x/ `) E0 {2 e% A* S& T* f
36.         isTrain: false,
    . B* w' ?$ B' [
37.         matrices: [mat],
    
38.         texture: [400, 400],
      Z. O" u# n) n+ L  [$ a# m( B
39.         model: {
    
40.             renderType: "light",
    4 D. {6 p* b5 o2 F. f7 e4 ~5 Q# s
41.             size: [1, 1],
    : N$ j' w3 ~6 K
42.             uvSize: [1, 1]
    ) e) t* X1 b* {% y7 y2 M, {
43.         }
    
44.     }
    
45.     let f = new Face(info);
    3 N4 u5 x. D( P5 T) `' k
46.     state.f = f;
    
47. 
    . Z; {5 w2 A3 c7 g5 Z+ c
48.     let t = f.texture;
    , \  O1 U1 p0 b+ V& z
49.     let g = t.graphics;
    9 q- M8 O* h$ `
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    & W  _4 v# ~4 A. v  {
53.     t.upload();
    
54.     let k = 0;
    0 _* @7 P% [% q4 e+ s
55.     let ti = Date.now();
    3 a3 u6 E* C( `: R$ S2 n/ @
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;
    / O6 U( b6 Z. Y# f: v2 }" g5 b
61.     }
    ! a8 `2 z0 r4 J$ y1 v) \& N
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    ! N3 N# G8 r* p
69.                 if (k > 1.5) {
    
70.                     k = 0;
    , B# F$ c( M0 a* _  y- X
71.                 }
    % x9 v4 H; d8 b; h9 A" L* m
72.                 setComp(g, 1);
    
73.                 da(g);
    % ]; s5 L" U  ~% ^$ k
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    # l  d4 k+ f. Q9 Z/ g3 y
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    # ^$ f4 H( s8 h& k  B
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    8 B# _( y+ b( X6 R4 @9 f3 H
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    4 a7 g2 `7 m4 r! D6 h
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    1 p" v5 k( W1 L( t# V
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    # q* V' h7 N, U* r
89.     }
    5 }1 `1 V! H/ S; `5 f5 r) `
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    3 r: y, |1 Y6 _: f
94. function render(ctx, state, entity) {
    8 m; a& U% c  U5 e) J
95.     state.f.tick();
    & k  }; u2 m+ Z% m! R+ Q7 ]
96. }
    7 n* G! C" X" @3 {
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    2 b* u$ |, m# W. V
100.     state.running = false;
     - K+ {* }! }) |! j
101.     state.f.close();
     6 {1 m" B/ r) }
102. }
     
103. 
     
104. function setComp(g, value) {
     ; y1 g% d& s! [, v
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

& _/ T- [% `; C8 O  W写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
8 y5 b$ |1 e6 w' u

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
  F0 `/ T# p+ V全场最瞩目：晴纱是男娘[狗头保命]

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