JS LCD 切换示例分享

6 k! F0 ^8 p, {/ T" X7 }这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
% y6 h) u$ V# y/ l7 @) \

1. importPackage (java.lang);
   * U+ w$ ]! N' B& H7 `
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   . W" M/ A% J* U+ p3 \, y0 a
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ) I8 S4 a1 J8 v# z3 d
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
     z% w0 f* V. o
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    9 G- Q: \, B" \- y/ Y1 b$ T
12. }
    2 w% u4 y& Q' _+ G. v
13. 
    
14. da = (g) => {//底图绘制
    + V( @( v; ]) P2 B
15.     g.setColor(Color.BLACK);
    * M$ U! V  c# K, n# F7 ^
16.     g.fillRect(0, 0, 400, 400);
    1 R# O2 p4 T4 {3 J9 h
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    * Z. T3 S$ C; T' R8 I6 g
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
      b: z* T0 {& f/ b( \) z
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    ' B3 i1 J6 i7 c: E, j
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    
30. const mat = new Matrices();
    , Y: U) {3 i% o: H$ B' \
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    , O9 T3 ^& }, l; Y( f3 _
37.         matrices: [mat],
    
38.         texture: [400, 400],
    8 X  U4 G6 P  l, a- a* G: q3 u
39.         model: {
    3 y+ ]9 M: b: f
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    2 `, Q$ X9 ?" i. B1 n3 w7 t$ }
43.         }
    ) t4 ?4 z  [/ l! Z7 W+ O
44.     }
    
45.     let f = new Face(info);
    * [8 }! Z9 d4 D9 N/ M
46.     state.f = f;
    0 |( ]2 Q/ V, ], N' D
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    ' g) S7 P9 |9 O7 [! t
50.     state.running = true;
    $ U1 [2 a9 j) s- L; K: m
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    # H+ m/ r1 w$ a! `; P
54.     let k = 0;
    * b4 \- |4 e, _4 ]
55.     let ti = Date.now();
    6 W7 j' R( x) Q
56.     let rt = 0;
    ( \5 w; T, D7 W& s
57.     smooth = (k, v) => {// 平滑变化
    ! F7 z+ V* \. D2 ?5 H5 o7 G
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    5 h% i3 X; U& i; L% R6 e
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    ( V/ P0 n" e8 H2 o. t+ M$ U
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    1 m! Y0 k# U, l! @% g8 q& r, Y9 M
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    * p" Z4 w% z) h$ z! f5 X5 j6 D
68.                 ti = Date.now();
    : H7 I7 e+ k0 I9 j# K9 |( P
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    3 t# U4 P5 H. o4 Z( S
72.                 setComp(g, 1);
    * }$ [. Q( T+ c, ~. Z  i
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    - r# w2 c. {' y- Q, D* A/ P* u
75.                 setComp(g, kk);
    
76.                 db(g);
    5 G% ~1 ?) b. v5 y! c3 ]
77.                 t.upload();
    3 u# t+ j# D  n2 o: s+ m
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    ! z5 a1 c8 p+ Q' Z; I
79.                 ctx.setDebugInfo("k", k);
    - u& k6 O! ~- ^& `# }- X) Z
80.                 ctx.setDebugInfo("sm", kk);
    $ ]# Z& {6 B; }, c& S$ e
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    ; G. l" c, \( @5 B# j: |
83.                 ctx.setDebugInfo("error", 0)
    . g( y, o/ Y# V& ~, v& W
84.             } catch (e) {
    ' b  t! X+ Y; q
85.                 ctx.setDebugInfo("error", e);
    + ~$ Y8 u1 ]3 k/ r$ j( S6 ]
86.             }
      s, ]2 M3 Q1 x$ W# }1 V
87.         }
    * D; i* ~, k* h4 i/ H$ r; A2 d
88.         print("Thread end:" + id);
    
89.     }
    - l  y* l% w' G5 p
90.     let th = new Thread(run, "qiehuan");
    8 Z( ]/ r4 C& E' c$ S. I
91.     th.start();
    0 b' v" X! N2 O; X( z+ ^7 A
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    5 d2 q$ L5 U  A' K5 _! ]
95.     state.f.tick();
    - }5 d2 O1 x9 f& {
96. }
    ( B9 h; I- V/ k
97. 
    % P" N6 r9 i& @6 j+ ~" D8 C9 A3 R
98. function dispose(ctx, state, entity) {
    & g8 y* H; R" `+ f2 d
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     / t+ W( a3 X# P3 ~0 ^' g
102. }
     
103. 
     ) G2 c' H8 r/ z0 H' R- H
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     2 V* B" ]7 J1 J9 \: R9 x5 q, ]$ ~
106. }

复制代码

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


; E& l% Q/ U0 a: k顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
+ ^% b/ x- w. o; `0 s8 ~

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
0 s$ T! w" o! {8 s& U

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

/ M9 q4 U* V, r2 z" |' e  D甚至双引号里面的自动加粗