JS LCD 切换示例分享

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

1. importPackage (java.lang);
   ' ?& G( p& P6 w/ z1 ^$ g
2. importPackage (java.awt);
   
3. 
   ) p: Y( b: f9 R) `' c7 c- _! m& W
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   0 u' K& r* o5 W+ |, c3 [* p
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   # t9 W) |8 F( Q% G+ d6 X
8. function getW(str, font) {
   & Y/ g# F: w# i7 C: t: r: ?3 n
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    + @: [5 e6 |/ `6 ?0 k
12. }
    , |# |% Q- @; A, F
13. 
    , Y9 x9 \, W4 h: |, Y
14. da = (g) => {//底图绘制
      H5 h! q+ _0 x- b% U2 {
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    1 S! i5 M& d- z4 Z8 s
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    - N* y. F* |8 ~3 e
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    : [; i( G3 q) S1 x- x' w
25.     let ww = 400;
    9 ]- ~$ [) Y) a* t
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    $ [/ @% |% m( S! H. f3 O
28. }
    0 X% K9 s3 A7 t5 S
29. 
    
30. const mat = new Matrices();
    1 N3 R; A, b$ F( e
31. mat.translate(0, 0.5, 0);
    
32. 
    3 U: D  @8 x0 v) a" M2 S
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    , T5 I2 l% m3 }! ]- d0 D
38.         texture: [400, 400],
    8 W! ~" L) S% i8 @
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    4 x* W% \& ~4 ?( _, Z( J+ n
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    " |! n$ E0 n+ v6 Z" k  r. Y
47. 
    + x* K) z  a! b: a6 b
48.     let t = f.texture;
    ! t: @5 Y( r' h
49.     let g = t.graphics;
    % W5 V7 a3 N  W+ Q  l, U
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    ; A8 Q7 n2 Y; I! _7 A! |8 X" b/ P
53.     t.upload();
    
54.     let k = 0;
    1 a9 k* l0 h; b" a  r5 y
55.     let ti = Date.now();
    # H  E0 X; S, u2 ]9 K
56.     let rt = 0;
    " f7 }( s2 Q' Q$ E6 V
57.     smooth = (k, v) => {// 平滑变化
    4 l1 q9 K9 Q4 P
58.         if (v > k) return k;
    " ?; {! o. O, ?1 ~' z, e
59.         if (k < 0) return 0;
    3 u' f) [( m$ K$ v: h
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
      v) R. M9 t6 ?& H
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    8 D9 p( d& g# {8 O" V
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    . K! }1 \% f2 S4 W
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    % I: F  I4 ]/ q7 G8 }$ P- ?: f& ~  N
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    2 ^( w  U2 i* V; |9 B
75.                 setComp(g, kk);
    $ }3 M0 I: Z  ?
76.                 db(g);
    6 w' q( B4 @% N; ?( \
77.                 t.upload();
    ) R3 R! `5 ]9 J0 y) \: T
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    4 d) D% F$ ~- l) G$ |- K) ]0 }
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    / w; m% M3 r! ]6 q' e, f+ H
81.                 rt = Date.now() - ti;
    4 {& O! ^; a, j" U  J/ I. [3 _' Q, ]
82.                 Thread.sleep(ck(rt - 1000 / fps));
    % Q0 b+ W, B3 }' [- N
83.                 ctx.setDebugInfo("error", 0)
    8 h! y( \" B1 c
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    $ D- Y7 Y' Q7 Y5 P
87.         }
    5 H4 h( @. p& H+ }8 u
88.         print("Thread end:" + id);
    2 C) J$ D  M8 {9 V! e# B: T
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    6 U1 J) S% U" e0 `. Y: {* {
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    5 f! b# M% |8 v
99.     print("Dispose");
    
100.     state.running = false;
     5 \; n9 V, i0 \. H3 w& @& a* A
101.     state.f.close();
     
102. }
     
103. 
     ( |/ _: v& h$ V8 }( Q
104. function setComp(g, value) {
     ' I3 A) e5 n  O9 r1 Q7 H8 ^. P
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

* N* ]8 J5 M" T" s9 G3 V( J8 F
/ v; p4 W9 q+ l: t1 {) r顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
0 F$ f* m+ e( c  u3 ?* t

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
+ u2 q, d  `- ~" w( @

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

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