JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
$ S8 T% @# s8 Y5 V" z- c; M

1. importPackage (java.lang);
   ) b( `6 M* H* V# E
2. importPackage (java.awt);
   
3. 
   0 `/ R" N- Z: l8 J
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   6 @% X5 g/ O' P3 T; a2 D
7. 
   6 n' j5 A8 P, X- q6 a' U2 i4 ?2 B  x
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   3 F% e0 H; V- t( C' t# L: r, W0 @  J
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    0 p) i6 G0 ]% ~6 b' L
13. 
    
14. da = (g) => {//底图绘制
    / i& F# |1 S! y) e4 O6 |- B
15.     g.setColor(Color.BLACK);
    " y+ Z6 Y4 M7 I; d. ^4 e
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    ( S" A* u+ Y( L& o) ~: _( q; o
18. 
    ' s) g9 I, \  z8 x
19. db = (g) => {//上层绘制
    . g) H5 g8 m$ q; S; ^2 r4 L; s+ |
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    * Z4 L) l2 o5 L7 e2 c
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    7 J. ?0 x, B& H' I5 y0 {
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    2 B' Z: W) [3 [5 b
27.     g.drawString(str, ww / 2 - w / 2, 200);
    ' w% a! }( R% v2 w) P; @
28. }
    5 b5 T3 J: `# U- ~! h4 z
29. 
    
30. const mat = new Matrices();
    5 B! ~6 c- Z& J
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    4 v/ W, l, S- x- v
34.     let info = {
    
35.         ctx: ctx,
      r& N0 K7 J# [4 a8 P6 x, D
36.         isTrain: false,
    
37.         matrices: [mat],
    , {1 P) z( P: r, i( t7 [1 w8 h
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    : ^, ?6 u  K0 L- J! U
41.             size: [1, 1],
    ; j* K+ \* M* A% C1 [" n9 r: P7 Y
42.             uvSize: [1, 1]
    ! ]& T+ Y$ q' Y! o. N4 M
43.         }
    8 J; t" I/ _( ]2 w! w5 a  P4 E
44.     }
    & q: D- x& a1 g  r$ h
45.     let f = new Face(info);
    ( Z) Q* j$ M1 V/ r5 E( b4 |" z
46.     state.f = f;
    / d0 K; v% y: ?. t  w
47. 
    
48.     let t = f.texture;
    5 u) x) G* ~# }% ]+ G! j6 K
49.     let g = t.graphics;
    / A5 h3 x$ v: s# o6 g% N( `
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    ! |0 a, Z+ @& v  a
53.     t.upload();
    1 P0 F- Y6 Z' D( Q3 {1 z. q/ X
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    + a5 H# y- T" j# w
57.     smooth = (k, v) => {// 平滑变化
    # n( _2 H8 {  F
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;
    
61.     }
    $ y" B4 l# a/ g0 k
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    ( m# ~# @; U- E; W# g, O' ?
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    - C, z6 e3 ~8 W7 K
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    * e" v* x, L4 |2 c3 P9 L
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    4 R0 C5 W% B, M1 i# M" z: A0 e
72.                 setComp(g, 1);
    2 f4 @4 n3 W3 J; V
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    0 S! h+ o3 \. D( f: g
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    * _* t8 R6 l% W+ B# H
79.                 ctx.setDebugInfo("k", k);
    8 i3 k2 F/ t6 e5 X. u0 H
80.                 ctx.setDebugInfo("sm", kk);
    , j" x) _1 k( S( x
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    ' U% S1 P5 V: M3 R" y2 m
84.             } catch (e) {
    , e$ x+ I- R4 |+ Q
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    ' x+ b/ U) `0 I: |" a! h) c7 P7 o
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    + a/ K7 m5 A$ R9 f
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    * j& s6 @2 D9 H1 p% E: y
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     # C. Q+ Y) l9 L6 e* a( d: O6 B
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     8 R, x2 n! W' i+ c# \
106. }

复制代码

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

) ^; R- J8 j' H$ s) B% e
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
& Z0 a* f2 r3 I  _) R全场最瞩目：晴纱是男娘[狗头保命]

. _, F0 p8 ]! s7 ]8 O甚至双引号里面的自动加粗