JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
- z, q! K! ~- p: B9 v, M9 V  Q. Q

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   % h4 }0 L, X3 r( N+ g
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   ; Z0 U$ {7 z7 }
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   ' ~$ j7 V6 v: M
8. function getW(str, font) {
   ! d, F$ z' ?. Z! D: v* |+ P- f
9.     let frc = Resources.getFontRenderContext();
   " N! R7 I# `7 A2 t- V) ]% m& K2 t
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    " d) I0 x" n+ q+ \3 n
13. 
    
14. da = (g) => {//底图绘制
    : k5 v$ U" Q! l6 Z
15.     g.setColor(Color.BLACK);
    6 `# A" y2 t& @  D
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    4 I6 b% S' n& k3 ^" C- E1 k$ I! U
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    : |3 Y0 t+ A7 c5 h
22.     g.setColor(Color.RED);
    # {8 n& [" T9 S- p8 |& Q
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    ! d* o- P* a( E, h/ }- E9 l
25.     let ww = 400;
    - k: V1 J) y, X5 J) ?/ g
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    ! o% U5 {8 T- x/ G" H! A6 S6 n! W
29. 
    
30. const mat = new Matrices();
    6 R4 ?4 a) k; B; s7 s; K
31. mat.translate(0, 0.5, 0);
    9 L* c% A  n' f$ O# F
32. 
    ) f+ l! @( j$ V2 L1 c. M; b8 k
33. function create(ctx, state, entity) {
    $ r; I: B: ^7 m$ i% H
34.     let info = {
    
35.         ctx: ctx,
    ' w9 V: n7 L0 a5 \* \# G$ [& ~1 s
36.         isTrain: false,
    & H+ N4 B7 h+ V, \) I' j
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    4 u9 y" U% j0 d/ f' g/ `
41.             size: [1, 1],
    # z% b" B1 p) V6 p2 B
42.             uvSize: [1, 1]
    
43.         }
    $ N- ?5 T$ z7 M1 z8 @
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    6 P- g2 C9 c3 }
48.     let t = f.texture;
    2 A2 P8 q. d, H5 _- y& I
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    ) q  P: I! S+ a! u" p1 T
52.     da(g);//绘制底图
    / z5 k% K! S; c1 N: T
53.     t.upload();
    # o# l, |/ X7 O% g2 l" j
54.     let k = 0;
    
55.     let ti = Date.now();
    6 b7 Z. F9 i5 b$ c
56.     let rt = 0;
      w& ^7 y8 A0 y$ a
57.     smooth = (k, v) => {// 平滑变化
    + [3 y! y2 y. C, e$ ~6 d3 b
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;
    , t# V4 l4 ~: z3 ]
61.     }
    
62.     run = () => {// 新线程
    . e$ Z  I+ M5 Q$ ?: |; f& w
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    , C$ a+ h) r6 {3 F3 o
65.         while (state.running) {
    + @" m* P6 C- r( R0 \
66.             try {
    # i& @% V6 y% G/ p4 ?3 r/ s
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ; ^  d# l8 V" H' ?6 s- X
68.                 ti = Date.now();
    5 H! X7 b5 T+ l) {' w( `% \8 y
69.                 if (k > 1.5) {
    ) G% A) r2 w7 z1 p) ]# p
70.                     k = 0;
    * Y' x  h+ k0 ~9 V! X: j0 `
71.                 }
    
72.                 setComp(g, 1);
    8 A" r/ s2 _- d; P. ]( j( j
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    / }: P' E" n: z# d9 v! ~/ A
76.                 db(g);
    % E( S# @( z, F' y3 {5 \. _
77.                 t.upload();
    : E9 U, G4 Y7 I; ?
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    4 F, j$ m$ n) S4 X0 `& a2 j* Q/ a
81.                 rt = Date.now() - ti;
    5 j  \8 t' J: c$ R
82.                 Thread.sleep(ck(rt - 1000 / fps));
    3 N9 o# `- A- G( `+ }! N
83.                 ctx.setDebugInfo("error", 0)
    5 }7 U1 t8 V  n+ \) O9 s
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    6 a" g. B% g& B0 w$ z4 v" y, `8 Y8 l
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    ( i7 c& L% t* C2 k5 U: D2 ?" R
93. 
    6 D, z) s& n! {) }
94. function render(ctx, state, entity) {
    , w7 _+ V3 B) N! p4 H. \( s5 J
95.     state.f.tick();
    - O/ A1 F. F- n0 h
96. }
    2 ~/ v* z; ?3 _) m( N. x
97. 
    5 H  D+ \* Z: _
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     2 A4 O; N( I. Z7 w9 t
101.     state.f.close();
     
102. }
     3 p) X1 m$ T# X0 |! w
103. 
     
104. function setComp(g, value) {
     % @& U$ f# ^& \9 Z. v/ ^; |
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

7 h: q* P7 g3 X' x, X* D写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
0 @0 D& ^. l) C  j

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
2 s3 f$ K* `; \8 |6 o4 z

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
# u; e1 b" r/ n3 }0 g* {全场最瞩目：晴纱是男娘[狗头保命]

6 C/ B- F8 h5 G; D" H甚至双引号里面的自动加粗