JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
/ v9 V! |" s  b4 @$ i

1. importPackage (java.lang);
   8 ~, U0 B+ v9 e( d3 K, ^
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);
   ( M- M4 c7 H8 U
7. 
   
8. function getW(str, font) {
   3 W! i+ h* f# a# F; C3 H
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    , c- S8 \  j' Z
12. }
      m, ~) u  R; n8 ]3 `) U
13. 
    
14. da = (g) => {//底图绘制
      F$ t* q$ a! k$ Q1 n' y9 r
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    
19. db = (g) => {//上层绘制
      V8 C( i6 p9 m. m9 d: H& P7 E
20.     g.setColor(Color.WHITE);
    ! ?+ U# g; `( Z9 u2 h2 z
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    ! t( h8 I4 z6 k# J! b
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    4 B8 C0 N: T& G/ V
29. 
    
30. const mat = new Matrices();
    2 o: J$ k: @7 {3 R( x
31. mat.translate(0, 0.5, 0);
    
32. 
    ) H  ?6 Q$ a) v
33. function create(ctx, state, entity) {
    " `' h  |% r5 X/ A# R9 n
34.     let info = {
    7 ]& T% `" B% F& H# D: ?
35.         ctx: ctx,
      Y( j( j1 A: t' A5 k# v
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    3 e1 }& q* A/ \) T
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    & s3 |; [; I  m& y, h
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    / E; K  G/ C% r9 Y* d6 ~
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    ( p8 N6 m* q+ z* e
48.     let t = f.texture;
    ; N' k& L: n9 T2 ^. |+ m
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    ! K' o$ h+ k4 u  s/ j
52.     da(g);//绘制底图
    ) M) p" L2 x. b; V7 d1 V, ^
53.     t.upload();
    7 G8 @) v) w5 I7 C; c" t
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    , s' ]7 j- n) {5 h4 J4 U
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    3 q4 T: n% {, u5 C  e
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    - p; r/ `3 b9 T/ n( f; l
61.     }
    
62.     run = () => {// 新线程
    4 [/ e0 Z4 e7 J1 [' {7 k3 Y# K
63.         let id = Thread.currentThread().getId();
    : j. L( d* I$ x3 d' M6 D' i
64.         print("Thread start:" + id);
    
65.         while (state.running) {
      R: c4 M) H8 Q$ A9 b) M" X
66.             try {
    , Y3 l# D* U3 H2 V5 }' i0 Z/ O2 l
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ! [' W  ?' ^5 `& @* t: J
68.                 ti = Date.now();
    , N9 Q& u, B* R
69.                 if (k > 1.5) {
    
70.                     k = 0;
    1 [- g1 N. }3 }2 U
71.                 }
    
72.                 setComp(g, 1);
    1 M. D3 A4 Q1 }1 J7 d6 O; C2 d
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    9 @  N0 r  _& K, s0 f, r, F  k
76.                 db(g);
    : W; ?4 P2 W4 m% i7 q- p
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;
    & b/ w. U: F: k) U6 O4 d) `
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    5 k7 T# i5 Z# d4 V
85.                 ctx.setDebugInfo("error", e);
    # A  w- f2 T8 @) }! c% M. {% S
86.             }
    
87.         }
    ( l+ ^1 j9 {' g1 E3 {, w2 [
88.         print("Thread end:" + id);
    
89.     }
    : S, l* E% u% m0 V
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    # l; f- e9 [2 Q" F: J
93. 
    ( G: D: r$ k( ?
94. function render(ctx, state, entity) {
    ( a7 _/ G/ I: }  H: f
95.     state.f.tick();
      F  [7 n  d9 S/ o) \4 g
96. }
    * ~6 U" w- W% `5 A' T
97. 
    - w2 E7 f0 a# n6 Y& \
98. function dispose(ctx, state, entity) {
    3 W; T" e! e3 p5 ~" ?2 Y
99.     print("Dispose");
    $ }+ X$ z. u1 Z4 F" C
100.     state.running = false;
     
101.     state.f.close();
     / o% c# P; y& g
102. }
     2 d6 A2 \5 D9 ~6 [
103. 
     5 D+ n$ E9 {* H% G, {
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     * S3 E. i2 x: x$ y
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
* \3 i% F; R0 n
  c( E' ?9 {# z! L
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
4 m5 y0 e. E4 i5 N6 M7 u

Hobbytimeblank 发表于 2024-11-16 20:38
8 ?1 \1 P: b. H9 x. ^1 t5 w全场最瞩目：晴纱是男娘[狗头保命]

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