JS LCD 切换示例分享

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

1. importPackage (java.lang);
   / h, S8 o' H6 }# d1 R
2. importPackage (java.awt);
   ) j2 R2 Y3 n) ]2 `' g) V+ Y8 Z
3. 
   ! s1 T/ I: w( D% B
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   : R- ~% i! c2 @& C, j, W* B8 W# Y
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   . P) ?2 a. u- {% b0 C  e5 y& l
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    3 E6 T. A' O3 s0 o; A: k( A* c
11.     return Math.ceil(bounds.getWidth());
    , M# w: }( e( H# s: N
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    3 _5 v& }% f4 @4 X$ s/ p
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    , ~) g+ v8 x7 C, ~# s( r
18. 
    ) ?9 N  J) }/ \$ B) ~% l
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    + B0 ^  [! ~1 `& B9 E) A& m
22.     g.setColor(Color.RED);
    8 d* Y) U! y0 ^8 x
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    * s( c5 X& J. m/ D
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    " W' [' E% r  O, I! b$ p& ^- Q
28. }
    , z5 G! l5 |8 G; e
29. 
    
30. const mat = new Matrices();
    / @! ~/ }9 k( D7 F
31. mat.translate(0, 0.5, 0);
    
32. 
    . h2 @8 W7 t  X+ l7 M7 ]9 O0 e* ?
33. function create(ctx, state, entity) {
    # {- z2 F/ W4 X8 f. \* j
34.     let info = {
    6 a4 b9 U- M' S) e/ ~
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    $ U2 n7 B, K* e% a0 V
38.         texture: [400, 400],
    % a0 E1 {5 @& L2 S  m+ Y3 h1 g0 l% k
39.         model: {
    . R- D6 ^0 l5 W2 M) w. y5 l
40.             renderType: "light",
    1 X3 F" G1 V6 y& q3 Z
41.             size: [1, 1],
    ; t/ M5 j. n! `& M7 ]  S/ J, ]  x
42.             uvSize: [1, 1]
    ' S8 Q) E3 ^+ l. m& P2 {
43.         }
    
44.     }
    1 ~2 G5 R" E" k3 ^9 U/ \' ?3 ]: h1 y
45.     let f = new Face(info);
    - r: Z+ m" `/ Y7 e# z! p
46.     state.f = f;
    
47. 
    1 W# a8 o! C* S! K0 K
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    ; ?- ~( P( I4 l- L+ J
53.     t.upload();
    
54.     let k = 0;
    2 `8 l6 ^: h* Z: R0 ]2 X
55.     let ti = Date.now();
    
56.     let rt = 0;
    2 V9 t7 V0 q0 V, ~( K
57.     smooth = (k, v) => {// 平滑变化
    $ _' a6 M, G! }, W
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    : ^$ f6 @, D7 m/ u; H6 D2 u9 g4 N
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    1 e! V5 }; f& L" J' E0 N( f/ M
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    : a- l+ L* E% C" ^: K- J8 t
65.         while (state.running) {
    
66.             try {
    0 Q/ \0 o  x7 j# e8 C( K* N
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    # I( ]1 X6 i+ @8 m8 O& ^/ g6 ^
72.                 setComp(g, 1);
    
73.                 da(g);
    1 g( e" {$ Q6 ]7 k
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    : o% R% z7 ]0 Z7 A' C* K
76.                 db(g);
    2 C# D) U) m% N4 `0 Q
77.                 t.upload();
    9 _! @! s1 u+ Z$ j
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    - A3 e  c7 h7 s0 I$ {& q6 k  }
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    . K% Y, L. d8 j9 g) l& F
83.                 ctx.setDebugInfo("error", 0)
    % B% x- }, _; E$ K$ O; g6 W
84.             } catch (e) {
    & I( Z$ d: b( X& F3 g) L
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    ( {% t# w* w; p  g# g# u
87.         }
    
88.         print("Thread end:" + id);
    : {3 r1 v: x. _- ~+ i
89.     }
    2 M) d$ S' P5 Q( P' i
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    7 S/ {: N1 q, r& J0 h* z) ]
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    : [! i! h; x1 r7 v( t: }, U
96. }
    . u1 K/ M" P4 @" {' J) i# m
97. 
    0 E+ \! |: K- r2 `7 g( `# q1 G
98. function dispose(ctx, state, entity) {
    3 M6 j9 u( ~5 S+ W5 f6 r
99.     print("Dispose");
    + R3 y' K  ?: ]$ w! ]( V
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     9 W- d! J' j6 Q( i+ r0 N% F
103. 
     
104. function setComp(g, value) {
     8 H4 A/ h' F* _0 f. J% G
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     2 s* u- X/ {- R% p, ?
106. }

复制代码

! o2 V* c/ u. j# o' b  f5 y* z6 n$ n写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
7 g, W  T$ _( ^! ~/ B4 S
' R& p- h! v, N9 d/ j+ ^6 E
0 \- U+ X5 c( p, [: I  r顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
2 L' B! a) S; @: M$ h

看不懂，但我大受震撼

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

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

. [  o) N' @7 c甚至双引号里面的自动加粗