JS LCD 切换示例分享

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

1. importPackage (java.lang);
   ! i* }& x/ y8 Z
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. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   , q" H% {* E6 T
10.     bounds = font.getStringBounds(str, frc);
    ) o$ h. J. ?) N& H9 z5 a
11.     return Math.ceil(bounds.getWidth());
    % a/ `- L4 E6 Z, G* C+ p
12. }
    , O" d- c0 B1 g# b9 b
13. 
    2 _- ^/ y! b- T9 u
14. da = (g) => {//底图绘制
    8 b; d# e4 `9 E
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    % Z- @- t" {9 Q  p: r) k( j
17. }
    5 [& a5 K2 _( m% L; I* _; G- _
18. 
    . b2 c" m! D' [
19. db = (g) => {//上层绘制
    / \$ J5 [) f5 ]: `1 y
20.     g.setColor(Color.WHITE);
    ' n. T+ r* w' c# p$ j
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
      y( L3 ?5 b, _" x  |
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    / E3 ~$ u1 c3 t( g: m2 x3 `6 ]0 K( t
30. const mat = new Matrices();
    3 R& _" T" u1 [
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
      T2 z* \) @& s5 c! d
34.     let info = {
    * |* D' d4 j$ Y. s1 k4 {8 y) N1 S
35.         ctx: ctx,
    # H7 k0 p) ~6 m+ C; }& |' E8 p8 I0 x
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
      j6 r% h! M; M0 j0 @
43.         }
    
44.     }
    2 z3 ~- B( P; k$ V& `( [
45.     let f = new Face(info);
    + S8 E6 g  A/ x+ @* f1 U7 E' O8 I
46.     state.f = f;
    0 j- q3 C+ o4 M8 }
47. 
    9 e) e" _" y( e, X
48.     let t = f.texture;
    : ?' d% Q8 Y5 w1 p0 E$ [, Z
49.     let g = t.graphics;
    2 f4 B5 D# W8 A& e1 f
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    ) a7 O$ x* j- q% E( y
54.     let k = 0;
    
55.     let ti = Date.now();
    $ D: `1 n! _+ B' t5 W
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    4 m" b7 m9 L# n# A5 E) b
58.         if (v > k) return k;
    : y! M' |- i1 ^% @! i1 K
59.         if (k < 0) return 0;
      Z) W  [  H- w8 |9 F* N
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);
    ) v, b/ \$ u2 H, g! D* ]
65.         while (state.running) {
    
66.             try {
    ) O( K4 N0 `+ }2 [4 l4 F
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    , j8 A& Z. k& l$ D3 u
69.                 if (k > 1.5) {
    % N' K; Q( n+ ~0 L3 F. Q7 [! s5 |
70.                     k = 0;
    6 g7 ?" ]8 N2 i$ O
71.                 }
    ! L0 ?/ w4 u1 W6 u; D+ I$ f2 v
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    3 U: V3 `) R! g! K6 e5 N& a
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    # x  G, G. {$ U7 k6 _' j
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    9 J( X5 R1 e; i+ C+ M) X& u
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    / O+ r* S3 \) ]0 P  f% l2 K
83.                 ctx.setDebugInfo("error", 0)
      m7 z& ]; V( T+ l" j
84.             } catch (e) {
    % `5 D, ~% r0 i) \
85.                 ctx.setDebugInfo("error", e);
    . F% m( D4 F4 \0 X+ V
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    + B! p: V$ }% M% r/ x( a
89.     }
    
90.     let th = new Thread(run, "qiehuan");
      v# r8 Y2 C, D. Q( S, q9 R9 k' h
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    ; k$ i* ^) h2 N+ s& F% ?9 I
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    " T  ~$ u; K. h7 J: w! a
99.     print("Dispose");
    
100.     state.running = false;
     : h% @$ q7 |- g  C! I. D$ T
101.     state.f.close();
     ( p" W% p. r5 L
102. }
     % j; d2 x& |/ p. y0 w# G
103. 
     
104. function setComp(g, value) {
       I9 ]$ |: k" R6 |' a+ Z& `8 t
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

# u7 N( L) V. v8 u
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
4 B3 J  n/ ?+ k6 c

Hobbytimeblank 发表于 2024-11-16 20:38
. q3 v, Q2 W" [, H) I7 |全场最瞩目：晴纱是男娘[狗头保命]

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