JS LCD 切换示例分享

8 K% G# q% P% Z. U/ G3 y这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   1 _6 T- s: n0 Z1 j& g! U
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   6 p0 P( j) e* W. ~. Y# J! B
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   5 C( T7 q% ^1 C) s: {! h) N
7. 
   + R' p. K, W1 l% g; D; f. Z- F' ?& O
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    % [4 F2 b: _# \$ \$ a3 p5 n* D
12. }
    / q+ c; R0 f6 {
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    / V+ p, k% M' E" E9 a  t
17. }
    0 F# u$ f+ q1 e, V
18. 
    ! `; |, i) P# q9 s+ a
19. db = (g) => {//上层绘制
    4 P& ^" ^* l4 m
20.     g.setColor(Color.WHITE);
    * P  L  S: ~. O/ H0 H( o
21.     g.fillRect(0, 0, 400, 400);
    # j5 O1 f* v8 S. t+ e
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    * D4 V% q" _0 k$ n2 [' b
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    . b) A" I2 G2 g1 s
27.     g.drawString(str, ww / 2 - w / 2, 200);
    0 @! |! U$ r5 R
28. }
    
29. 
    
30. const mat = new Matrices();
    9 V5 v, T! I! T6 z$ R9 p
31. mat.translate(0, 0.5, 0);
    ( A% S" Y: O8 X, @) d* x3 q
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    - E& I. E4 q; z  N# S% y
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    4 p5 a9 @. r/ T0 q6 y7 f+ Y; r1 @
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    3 g. `4 B9 S( d
44.     }
    
45.     let f = new Face(info);
    # p1 U2 U0 Z* h+ l* U( i% Q
46.     state.f = f;
    8 `4 C; k3 H8 u1 h& t2 f
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    # _7 }, E$ b, g9 d6 r# M$ |
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    - O4 x! S: f% k7 e* B8 E% K! s
56.     let rt = 0;
    : V% p& H4 S1 |0 Q9 u. ?2 w
57.     smooth = (k, v) => {// 平滑变化
    4 f5 W& L/ h6 o% [7 ?, L! Z$ L
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    " O8 W# G% e* f, L1 g+ ?- {8 F
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    0 D5 T% X9 Q: ~; V
61.     }
    ! P1 k  i  e! C% Q# P  b0 p1 P% r
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    3 a% m  [& C$ k% Z# U+ u$ h3 b
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    , L6 `/ y" J7 [# n
74.                 let kk = smooth(1, k);//平滑切换透明度
    % S( J! T3 ?9 L
75.                 setComp(g, kk);
    ' J/ m0 H0 Y) D5 j& {) b. o
76.                 db(g);
    , q% I- T4 G0 y
77.                 t.upload();
    5 q+ m( n; ^7 l- b. y/ M  X
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    2 z! E7 M- C* `1 d
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    % T7 P4 R- Q& @) U; J
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    + d( b- h  r1 X0 K* Q
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    + Z7 i1 q& d* h3 J7 j. k& H0 t
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    / N9 V1 ]' _: ?" X
90.     let th = new Thread(run, "qiehuan");
    : I  E8 Z8 P, D' O2 G! Z2 F! a
91.     th.start();
    ' N' U9 ^" e: C5 G% H1 I' M
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    0 q  i, ~6 k8 `- @# u' |$ o
96. }
    6 H5 Z7 X* ]' h0 u% x* i" Q
97. 
    ( n3 r3 D) s" Y4 t, ^
98. function dispose(ctx, state, entity) {
    7 _; v+ R1 S3 |7 e
99.     print("Dispose");
    
100.     state.running = false;
     ' A/ k* M# u! h) s
101.     state.f.close();
     0 c1 Y/ ]- P. s1 n+ M, m* X
102. }
     
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
# n9 ]3 b& T/ \; n$ F
; T4 Q0 h! a( `4 J4 a. c3 G& b
" X1 S- G; J/ l$ E9 a顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
) D, ~$ b4 K  \2 i7 A+ X

看不懂，但我大受震撼

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

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

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