JS LCD 切换示例分享

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

1. importPackage (java.lang);
   5 ~/ w; f- p6 ~0 U
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   6 W: e. s) w( a1 L, f! x* o/ E
5. 
   2 k; {1 C. {4 p
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   2 J& J& n' m- w4 S* w
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   ) {1 M5 I  ]5 d  [1 `; L
10.     bounds = font.getStringBounds(str, frc);
    9 p2 ~9 T* l$ t$ L+ s
11.     return Math.ceil(bounds.getWidth());
    
12. }
    ; o: W: I7 Q* A
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    ) o- L' V; J  p) n" B% w; C" B! c
17. }
    " p3 T% y1 `. E, Q) _
18. 
    
19. db = (g) => {//上层绘制
      O3 @. M7 N0 O5 S6 p: M7 }
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    ' r) E; X8 m& Y; v  Q7 m
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    : g7 v- d7 ], e3 Z% V
24.     let str = "晴纱是男娘";
    % o( w7 d- y  e
25.     let ww = 400;
    0 m* D( W8 T3 ^  \$ V1 [
26.     let w = getW(str, font0);
    9 V0 o( t  @6 Y, _: e- S
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    ! J* I" x8 r9 I# R& B, m# {7 c
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    6 j/ C9 {# @0 h1 Y6 F7 S
32. 
    2 [6 h" c. i! L. t8 |
33. function create(ctx, state, entity) {
    ' ?& E- |. I9 y
34.     let info = {
    5 @" ?( Y3 f8 }9 t! W' p4 V3 E
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    2 ]5 }2 z; B! K: `: ?# N
38.         texture: [400, 400],
    
39.         model: {
    6 ?& J9 B  p/ s2 N  @! W$ o- v
40.             renderType: "light",
    $ D# N. u; d0 }$ K( Q' H/ m5 n4 t
41.             size: [1, 1],
    / `3 u8 d1 }1 ?
42.             uvSize: [1, 1]
    : O9 \# J- L6 i+ i
43.         }
    & M/ F4 {( e; D
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    + s, [* d' n: N3 b7 r, ~
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    . B! ]+ _4 b% b2 A2 E+ k% {
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    0 L: i; _6 S9 k+ c
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    , G0 s" g/ S% a4 Z9 _
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    * u* K2 |0 m3 M" v4 y8 D
62.     run = () => {// 新线程
    ' S( S! `3 A' |% H- M2 K
63.         let id = Thread.currentThread().getId();
    ! ^6 \" a8 B7 e
64.         print("Thread start:" + id);
    0 s5 u$ S' |' Q( {2 Z2 a
65.         while (state.running) {
    ) T0 K4 s/ h6 ?% F
66.             try {
    ' l- \3 E2 q9 C# g0 x
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    5 f& f# l" z5 N* H! G
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    , O/ n, b* h9 t; j7 a! T* B
70.                     k = 0;
    6 u' a- @7 D3 X
71.                 }
    # \7 h7 }, [) O$ _: l! ?& }
72.                 setComp(g, 1);
    " O5 {1 ?: W& G7 |" x
73.                 da(g);
    ( ^6 X: w# B2 c. P; J- x: N
74.                 let kk = smooth(1, k);//平滑切换透明度
    & X. j- R0 Y  x; h1 d
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    # X/ x$ [) I/ e5 J$ ]$ I8 N
84.             } catch (e) {
    ) |8 o! ]$ J5 G1 K4 M
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    0 m& w- I, _: l! B5 `' T7 g* d1 J$ c
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    % Q6 S  u5 J/ s
93. 
    , Q: v$ ^, y0 [0 w) a9 H% Y* w: e
94. function render(ctx, state, entity) {
    4 v5 C, r: S1 O9 ~0 t: F# S
95.     state.f.tick();
    , B& q$ \/ q+ ~8 |( o
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    0 O# ^1 I- Z0 B! e& V
99.     print("Dispose");
    " j. h; ?( f/ `: [; q1 n% x
100.     state.running = false;
     2 P! ]8 b, z* g& D; r8 z  H
101.     state.f.close();
     ' N: T: J8 }1 X1 ]: ]
102. }
     0 @/ N) Z0 l" @7 S, A
103. 
     
104. function setComp(g, value) {
     . [' ~: u+ W' o% l8 z- J
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

: f1 i8 v. ?# e& u! K写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
5 V* a+ \! {$ e5 q& e
! s! a# [" \4 [  j) @
" \! o/ ?/ h3 Y& p- p$ Y顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

0 B0 e; {$ [( N1 w9 a甚至双引号里面的自动加粗