JS LCD 切换示例分享

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

1. importPackage (java.lang);
   5 Q6 e0 u- ^% ]8 U
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) {
   2 ?5 k5 r4 q( f2 [  [' D! u
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
      H& b+ u4 o( ~  p0 W6 I1 G
11.     return Math.ceil(bounds.getWidth());
    9 p( Y  T% b; C/ w: B
12. }
    & a) I7 S6 {( [+ H2 e& |* e
13. 
    # b% ?" l# x) _3 H4 u, i3 s8 ~
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    # @  Y! G& e5 [! K5 G6 U
17. }
    8 ~% g" n/ [4 l' i
18. 
    ) h4 ~; Z- I0 D7 _4 p
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    ( E8 J8 I& P7 ]. a# N3 @; B' p4 C
21.     g.fillRect(0, 0, 400, 400);
    0 x4 H2 K; v. }# `
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    ( c( U: U, W$ }* N
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    8 e& g0 ^3 s) T5 F6 w/ m
27.     g.drawString(str, ww / 2 - w / 2, 200);
    9 W9 l- R* U2 N
28. }
    3 }% Z# [' c) U6 [) ^7 N$ E/ V# k
29. 
    ' Q$ \* r6 @/ t  U) f+ d; y0 Y( R
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    : ?' T4 j5 D. f% D
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    & `: u5 d  g% @. k
37.         matrices: [mat],
    
38.         texture: [400, 400],
    & Q# |3 l8 a) g$ E, e) o5 L; D
39.         model: {
    3 b9 y+ Y5 S% t7 _# I* `
40.             renderType: "light",
    $ C1 k4 ^) ]4 s7 D- _5 b* H& D8 I
41.             size: [1, 1],
    , m% ~; ^2 }( v
42.             uvSize: [1, 1]
    ( N4 g6 x4 V" T4 C$ W* i  X
43.         }
    ' a: B, P5 p3 `0 v
44.     }
    ! L5 B! t7 w: y7 d
45.     let f = new Face(info);
    
46.     state.f = f;
    5 n, O0 ]- n9 h7 H3 ^4 L
47. 
    
48.     let t = f.texture;
    6 o( d9 B) n4 K+ W! j
49.     let g = t.graphics;
    
50.     state.running = true;
    , _9 h2 @, G/ J3 c+ |
51.     let fps = 24;
    
52.     da(g);//绘制底图
    * N' _! A1 J% G, b3 R0 E/ G  H" O
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    5 G" l0 h& S/ e) B# P; v
57.     smooth = (k, v) => {// 平滑变化
    4 S8 Y* L+ M' g: ~; d' I  G
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    & h6 i, |- f6 d* l, n
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    $ X( M/ k- f+ m  v) k
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;
    * y- R4 L& w* D: A$ z
68.                 ti = Date.now();
    - j/ H0 U- o9 s+ t% `  i: S% w) Q% n- g
69.                 if (k > 1.5) {
    1 q+ L; ?+ I" a6 g+ p
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    # Z/ |! x) @) F) w9 {$ K9 C& r3 N# p
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    - M; a" o$ s, k  n9 A5 O. ^/ _
76.                 db(g);
    
77.                 t.upload();
    + k) i; d/ {. R0 Z2 {8 F1 G0 b
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    ! K; E8 D# m$ t6 R7 z! C6 O
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    / @( q- ?; L' @; w& E* I5 t
84.             } catch (e) {
    / }- q$ u  y' i8 q; S: M5 e3 q
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    + b8 l# w- ?. B3 C
87.         }
    
88.         print("Thread end:" + id);
    & G" G0 o. K( h
89.     }
    9 c- m1 D" D* V$ g& Z7 B/ S& V
90.     let th = new Thread(run, "qiehuan");
    ' L5 U& x% H% ^) F
91.     th.start();
    $ N7 K& J7 [1 K
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    ) |5 o  e' ?: Q# z
97. 
    
98. function dispose(ctx, state, entity) {
    7 T" K' e: H! U8 {
99.     print("Dispose");
    # C% v3 A, J* q( h! O( I
100.     state.running = false;
     : }/ ~1 ~3 F  o3 t, U
101.     state.f.close();
     
102. }
     - \3 a! N% M! m* U
103. 
     , b+ {* ~9 `5 D( n; Y) [) p" [) @( X
104. function setComp(g, value) {
     , z+ k: i: H1 U7 @2 Q% y
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
2 N" Q; [* z$ M, D1 y

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
& @" D, `1 E- G- @. e  ~# W1 W

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

. p4 A7 s6 P) |) Y' ]7 |9 ~& w7 i甚至双引号里面的自动加粗