JS LCD 切换示例分享

" Z/ E! P6 f( ~7 L这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   % r: U% {. Z4 n: B
3. 
   % C# ^7 j% T; c5 a- H; }
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   3 e- F, y+ b8 v% m1 J# S
7. 
   9 @+ ^/ O& K3 {6 S0 Z
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   9 y. T: }$ }1 [( k
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    ' v5 G& `8 v. x% e: d+ j( b
15.     g.setColor(Color.BLACK);
    # V% w" i1 a, \& J
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
      z6 {4 E0 }$ `. c
21.     g.fillRect(0, 0, 400, 400);
    . ^4 P' a* {& N
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    ( t. S2 A! i6 c1 z
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    ! c+ o2 S" t$ M3 ]. R( D
28. }
    0 V6 C) Z7 T% p7 r) z7 `
29. 
    ! V7 o1 f4 |& {" Q, S9 n
30. const mat = new Matrices();
    9 O  P" T7 s: |) [" r
31. mat.translate(0, 0.5, 0);
    3 f" {. V& V- f; k. z% o
32. 
    3 P& Z7 `: O8 s9 r* R2 K
33. function create(ctx, state, entity) {
    2 S/ [) f3 r, Y
34.     let info = {
    & P/ V* K0 A$ w6 X, f. J
35.         ctx: ctx,
    ; f( ]  C& [, L6 R: k
36.         isTrain: false,
    
37.         matrices: [mat],
    6 `6 e1 m, L8 H0 w7 H$ R
38.         texture: [400, 400],
    
39.         model: {
    * \# K& a5 d: Z$ y9 J
40.             renderType: "light",
    + z. C- p9 H5 C9 ~4 s6 i
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    * @( J" a- b" q5 u
44.     }
    ! S8 \5 [5 n4 w, \: d
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    4 u% |5 `2 I4 ]* U
48.     let t = f.texture;
    
49.     let g = t.graphics;
    ! L6 l% ?: i' i( e! p
50.     state.running = true;
    - ?; O/ \+ p& [( s6 W3 D
51.     let fps = 24;
    . M/ a1 _. z6 K3 M; V
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    3 G9 O5 b5 m1 [9 s0 R1 n  f! a! H
59.         if (k < 0) return 0;
    ' `: v* z! N# N
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    ; h! U& u0 q+ F4 l
63.         let id = Thread.currentThread().getId();
    0 e( l8 `3 d2 q6 A/ a9 e
64.         print("Thread start:" + id);
    ( a# R! {! ~# K8 Z: g* F
65.         while (state.running) {
    
66.             try {
    0 t' W, A* y4 B- Y" H( U( y" l
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    - |. j2 B  x1 H4 J2 m; D
69.                 if (k > 1.5) {
    . N# }- O- Y+ N
70.                     k = 0;
    
71.                 }
      N" l' W9 o0 K+ R
72.                 setComp(g, 1);
    . |2 @# H6 p5 i3 u
73.                 da(g);
    ( }+ P1 w1 h, q# T
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    ( i5 n2 q: }+ u- {4 n
76.                 db(g);
    
77.                 t.upload();
    ( |) z( n9 W1 o7 |
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    9 `. B/ {) i# H- l% o' S! g
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    8 {! t+ F( m6 N- k' ?% n) b; {
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    , q3 }, J0 A# ?
86.             }
    % g% B& i5 v  u9 Y3 X
87.         }
    - C; T. G- e! u9 c: O
88.         print("Thread end:" + id);
    
89.     }
    6 {" W- {) w5 a  T" _1 M9 Z
90.     let th = new Thread(run, "qiehuan");
      D$ B  G, O% V. _  c% w8 x
91.     th.start();
    ! V, v, w9 m: C
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    7 r# G3 T0 b5 |% B8 I7 H/ u: n
100.     state.running = false;
     , t" o2 I) ]8 `1 c% H  r
101.     state.f.close();
     & }8 o/ P" s8 Y
102. }
     
103. 
     4 P/ H/ I8 l& A  M& o. K
104. function setComp(g, value) {
       t5 P6 g6 E2 K
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     ( K  y. |+ J( h3 c
106. }

复制代码

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

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
+ [  m/ h% r5 O& F! h

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
: k( W  @3 V/ @# D2 h! i3 c0 i" l/ [全场最瞩目：晴纱是男娘[狗头保命]

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