JS LCD 切换示例分享

  u( s& ^! W% p3 c$ t- R" W这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   / J$ h' g; K, X: `6 i5 F$ u' K
2. importPackage (java.awt);
   ' Z" @0 l( @. C% u0 M
3. 
   # t& |- v1 m5 \' w! s
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   ) ]# n( S6 J% _1 B
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   / t. S# ~% X$ t
7. 
   
8. function getW(str, font) {
   0 g1 K" ]1 U. Y3 c1 t
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    / D! w6 l) Z: d. w) J  u* N/ j
11.     return Math.ceil(bounds.getWidth());
      h8 G) ]5 K& r* C* I: q
12. }
    6 `! z& V! U& O0 o. U' _
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    " h! _0 z3 r3 ]: G  r% s+ {
17. }
    
18. 
    . m; u/ x/ e( O5 x. r
19. db = (g) => {//上层绘制
    4 B, O4 g6 J0 A" Z0 b$ ^
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    8 u! n9 H6 z; t- t! b1 Q
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    % g8 f2 d2 f# D. v
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    % t( _' X3 @# F. {0 O
28. }
    4 V3 C8 Q7 N  R# I
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    ' S& l+ x$ N/ L3 V7 {* X4 r  b0 v
34.     let info = {
    $ X6 h1 z' D4 r1 V& M2 x
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    " Z  {0 o) W* c
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    / q- q, q* V; U2 d* x
43.         }
    
44.     }
    7 u1 k) \- N/ Y  o& a+ d% P% \
45.     let f = new Face(info);
    6 a1 u7 a* ^& H% S3 ^' ?
46.     state.f = f;
    2 k0 u+ p7 O+ p- n; c( w
47. 
    $ Q1 o2 ~9 _8 y) s/ Z1 [
48.     let t = f.texture;
    * q  o/ v( l* |
49.     let g = t.graphics;
    / D$ S. |" |3 Q: F; s
50.     state.running = true;
    $ _3 n; T4 j+ y: h4 o4 O$ Z. [
51.     let fps = 24;
    % j: A+ o. O) \
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    : g& X: i: w, ~4 T; a9 x
55.     let ti = Date.now();
    : |* P! K; M! _9 Y) s6 P
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    4 `6 S( T- F3 ?' X* L+ H
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;
    3 K" D- G/ G9 s6 X- I
61.     }
    
62.     run = () => {// 新线程
    5 ?$ c% s2 B. T5 r: X
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    8 U4 u* i' i3 V9 r: z) d3 z
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    - A+ U; P' R( a; e9 N
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    " [' l8 {+ T4 A  ?& |* ^0 T" r
70.                     k = 0;
    
71.                 }
    2 ]9 ^) w1 B" R6 h: m. i7 K
72.                 setComp(g, 1);
    # j% A" `" |3 B- }/ [
73.                 da(g);
    : z0 s5 F! z! X4 m
74.                 let kk = smooth(1, k);//平滑切换透明度
    4 \% \/ u4 F! U$ e* e- _& C
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    % |5 G7 h* p1 \0 B- v
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    " I' m$ E; X) I
83.                 ctx.setDebugInfo("error", 0)
    5 r  t: A* ~8 k; S: G3 ]. y8 K
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    + e, k2 I$ C3 {  j- I8 G
86.             }
    
87.         }
    / I1 {2 [* F: n; X& Q
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    5 Z4 B5 n* N! k2 h# _
92. }
    # p4 X2 @3 d  A7 ^) r. F
93. 
    ; i2 o9 m% N# w6 O4 R
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    4 `1 E2 M. L* f7 C* _* E3 X
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    0 Y, l6 l( Z& P8 V7 f
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     % }7 g5 t* h, T/ C2 M- {# ^
103. 
     6 w% P& k) M9 f: n
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     : e' r) p! u: T: b& A
106. }

复制代码

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


8 T$ K0 c0 V6 [' w) S) k顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
2 g( m, j( G7 b& B

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
; U" k& f) x! u  U% ~: f% t

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

) Y1 A; Z$ o* E, r/ @% H甚至双引号里面的自动加粗