JS LCD 切换示例分享

. i% p2 k$ y. q# Q  e0 x/ m  _这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   5 p" g5 w0 y8 A3 @
2. importPackage (java.awt);
   8 t2 Z9 y# z* G6 H
3. 
   2 u4 J9 F/ W4 F: ]
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   % s  p/ ~; I2 s, k1 x+ v* a
5. 
   6 D8 t+ I1 z5 A7 y
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   3 \, h2 w2 v  E/ r
7. 
   - E- F# Q2 S1 X) t: d, m" q
8. function getW(str, font) {
   ! U/ j% q% b( k0 J
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    - C/ k/ V6 a' U
11.     return Math.ceil(bounds.getWidth());
    9 c* p! s3 ^! L0 C; ~1 L
12. }
    , l  n9 K% ~- T, m; q3 {8 z
13. 
    . i3 O3 i, U  K. v. r( L% Z
14. da = (g) => {//底图绘制
    3 [* u: s/ z9 i9 r
15.     g.setColor(Color.BLACK);
    1 m5 X2 [6 q. }& e! m" o0 x2 \4 |. R
16.     g.fillRect(0, 0, 400, 400);
    , e  c) I: M  j! l% U
17. }
    ! L& G* R1 o( ?' ]( Q  _6 h( h$ b
18. 
    : ?( f: F; d1 ?% p# D# J+ y
19. db = (g) => {//上层绘制
    3 E& b1 J0 s5 |
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    6 W$ v0 b6 v# u+ ^2 Q
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    % v8 w4 A, T" `' {1 r
24.     let str = "晴纱是男娘";
    ; y- L2 ^2 b- R* w' L1 B
25.     let ww = 400;
    ' k9 I" Z" O- @7 ]4 [6 v5 y2 M! Y  `9 Q
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    6 L6 o( m! Q9 D# D# I
28. }
    
29. 
    : |9 O) G1 q& `3 h( p* w
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    & I7 d- p( e/ |  V  C
34.     let info = {
    ; j- a: W/ Z3 W9 L" T' A
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    ( V/ r# B0 x5 Z! T8 k) ^
38.         texture: [400, 400],
    
39.         model: {
    ( C2 l  I0 O; N/ U
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    : w/ k! k6 q! W. e
43.         }
    
44.     }
    $ `/ S& ~) a+ z! D
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    7 J4 e3 F0 ^& T: b2 }5 b% ]- n6 w
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    4 e8 ?* e# j! u  H1 I
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    5 \. S5 O: a6 Z! c
56.     let rt = 0;
    ; w* i9 R4 q3 g7 [* l) Z3 M. f" Q
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    / J( o) K& _! L" x! D1 L/ A1 l
59.         if (k < 0) return 0;
    5 ?" U- G. H2 `
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    ' K4 ?6 L; p" c9 h6 C1 u4 ~
61.     }
    
62.     run = () => {// 新线程
    : r7 K8 R) z/ m1 n, S
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    $ j8 F' e( B, J: @* i8 m/ |
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    0 h4 Q, N3 U1 a, N) ]( x% n4 I
69.                 if (k > 1.5) {
    
70.                     k = 0;
    6 R+ z$ A( Z5 N. B2 U& E
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    ) L( u" T2 n) a+ d. i; H  `
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    & ?# z) \$ ]* b; U* j- n
79.                 ctx.setDebugInfo("k", k);
    + f/ {8 R/ v  x' @  n9 y
80.                 ctx.setDebugInfo("sm", kk);
    # q' P" |+ I% r. M; Y, m! b+ O
81.                 rt = Date.now() - ti;
    + P. E$ a# J' N0 F+ M
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    * S; U* t2 x7 @- a
84.             } catch (e) {
    5 y3 m0 z4 n' F4 Q; `4 d
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    2 ?, I0 F$ G# T
87.         }
    
88.         print("Thread end:" + id);
    : O9 }5 E" X/ J9 x8 V
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    4 `) b, v( p0 x* U* Q/ ~0 f) q) o1 P
92. }
    
93. 
    & W+ s+ E$ K0 M8 @) q% ^" i, h
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    . N& D2 G  j* E: {1 K, |
96. }
    
97. 
    . S' l8 X1 X5 x" J, c: r
98. function dispose(ctx, state, entity) {
    6 Q" Z7 t* d, o$ R
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     # N/ l9 O+ `2 J0 D
102. }
     : O& Q1 z* V" M- e: }% d, j, H
103. 
     
104. function setComp(g, value) {
     * M. N) z* K% s
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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


, t7 f' e$ W) `: p. Y/ C顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

1 D0 X, S2 }7 q, a- Y2 Q) w  n  ?甚至双引号里面的自动加粗