JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   ! x- ]- j0 r. o* x, v6 l* S. _
3. 
   / F  v( |6 W5 `+ `2 m' s: p" y7 w
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   & S7 |; n7 h$ Y
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   3 d+ \' E! Y! G7 h6 Q: g% x
7. 
   
8. function getW(str, font) {
   2 s4 n. A* `9 ]# @+ b: Z
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    6 w- }0 l7 a9 `2 K$ s8 ]+ E
13. 
    9 s2 @5 }0 L6 ^; i* y6 J
14. da = (g) => {//底图绘制
    2 \2 u1 k2 P* M
15.     g.setColor(Color.BLACK);
    7 g8 T( e! e1 K( Q# K9 M2 \
16.     g.fillRect(0, 0, 400, 400);
    : p8 K$ G& X' I: k+ ~
17. }
    + V6 m4 D  ]9 Q/ f1 J; h% v- C
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    9 E6 |" p7 n0 o. p4 N; v1 c. u  w
22.     g.setColor(Color.RED);
    2 m  Z5 R! j( ?/ T: y& r* B! M* x
23.     g.setFont(font0);
    , I1 [( ]$ @2 C0 Y0 R* S
24.     let str = "晴纱是男娘";
    & l. m$ s: I: s  z, r
25.     let ww = 400;
    ) n/ x  [+ Y6 `( U2 ?! R
26.     let w = getW(str, font0);
    : e8 f! d6 D- c& n# z4 c
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    9 \+ @7 Y9 i% y: c, j6 ~
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    " C5 P! M0 o- E; E( m% g
33. function create(ctx, state, entity) {
    
34.     let info = {
    " A* d! }2 Y% t/ B% ?' |; _: ~
35.         ctx: ctx,
    / N2 B6 o: d  U) P" }
36.         isTrain: false,
    / I: T% r0 m% n; C
37.         matrices: [mat],
    
38.         texture: [400, 400],
    / b* U2 a  V( ~" |! I* d' m% h/ s
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    + z( s; w2 b+ x: M
42.             uvSize: [1, 1]
    
43.         }
    % d: g% ^8 d; o) I
44.     }
    
45.     let f = new Face(info);
    ( v$ c6 w: J* L
46.     state.f = f;
    
47. 
    ; w' Z2 q" K$ ]/ }5 d1 V9 ^( A
48.     let t = f.texture;
    
49.     let g = t.graphics;
    , E. g' A# Y, W/ Z7 Z
50.     state.running = true;
    ! Y' W2 j; r4 c  c
51.     let fps = 24;
    
52.     da(g);//绘制底图
    4 ]! M$ m6 x  N" ^. t/ C
53.     t.upload();
    
54.     let k = 0;
    7 E  q+ k& j1 g' I1 M
55.     let ti = Date.now();
    , a# r/ D2 ^: G2 }
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    * E+ \. V# }4 K. W& y
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    1 K  A& Z# S- y; K
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    8 Z0 ~3 p8 S2 S1 T
61.     }
    3 V; X+ S! w# m% A1 |
62.     run = () => {// 新线程
    
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;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    ' Z* F# U& A' ]: W* W& O& p
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    . ]; M! v( s2 z4 q
75.                 setComp(g, kk);
    
76.                 db(g);
    ) e4 o* \; U+ E) }" {
77.                 t.upload();
    , U! V+ b# Y- `: K% _
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    . J- A3 _6 k( W+ F
79.                 ctx.setDebugInfo("k", k);
    / T! P4 a: W: g
80.                 ctx.setDebugInfo("sm", kk);
    # l' m* A* u; p; Q, f7 h
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    / R$ @, l/ j& Y; N
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    ) H% H9 ^, x+ O
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
      |1 |( b( j" d
96. }
    2 p, M. K7 j, ?2 I
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) {
     0 I3 }4 a  O* B/ P; M
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     0 o* J7 B5 G4 ]; {7 d: k* u
106. }

复制代码

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

& y1 X! C- ~% F3 O" o0 Z: [- {5 z# {
1 J8 v: `% R9 r& C顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
8 k' J" G3 b. J

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
  A9 {1 m9 T2 X) T) @. b

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

# n# Y0 n( j; G% B" G" v甚至双引号里面的自动加粗