JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
# h4 q, S9 J9 @  z; U8 }% ~9 ~

1. importPackage (java.lang);
   ' @  ~. k4 f7 m& x7 W* N, O, k
2. importPackage (java.awt);
   9 v3 ^/ y! I7 E
3. 
   2 D" J' z  P0 C$ `' I$ e% b' `
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   6 X. S' }3 B, k) s( c' x
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    4 @8 S; q0 q3 D1 F6 }! ~8 W
13. 
    ( f: ]8 g6 X1 o- v
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    8 U4 Q8 C: Y" M9 u- T) R
17. }
    , i) ^7 u0 P$ ~# s" ^6 ^$ a
18. 
    & N6 o6 O( x, W
19. db = (g) => {//上层绘制
    3 |2 S; `& m0 k! c, ^- h* {& M
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    ; u7 p) H  M7 a4 ~
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    + B7 {/ Z  v3 h! Q6 t8 N
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    4 L: @3 U, ~0 D" N7 J4 _4 e+ w: E' M; s
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
      n; ]& p* L1 v1 \
32. 
    
33. function create(ctx, state, entity) {
    9 y2 C0 @3 C; l
34.     let info = {
    % [" w! @1 D8 u  X
35.         ctx: ctx,
    * `3 Z' {+ \& s8 r, {' l. ?
36.         isTrain: false,
    
37.         matrices: [mat],
    : G9 ]6 W$ p, {( A' d* V( w2 h
38.         texture: [400, 400],
    5 X5 {5 P4 l" M" t2 Q! O2 t% v# m
39.         model: {
    
40.             renderType: "light",
    5 Z# d4 \/ A! |* j8 M+ i: z# U
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    # N, T9 {$ h# F2 H! W) d; n5 \& A
43.         }
    1 I7 j3 e* O- y9 q0 C; \
44.     }
    ' g1 [$ L, E2 y4 B9 f: E
45.     let f = new Face(info);
    
46.     state.f = f;
    5 e* o% D+ c  J5 ?
47. 
    6 b, g. ~0 q' H% t+ A0 \. n
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    + n8 ^/ R& {: ~& n4 p: A& `* c
51.     let fps = 24;
    
52.     da(g);//绘制底图
    4 j: u4 }; ]/ S- x+ }
53.     t.upload();
    1 ^3 d  R7 r! d
54.     let k = 0;
    2 N4 R0 H/ ?6 D
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    $ [+ v0 ^; u+ b& t! A; x1 F
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    5 k1 D! C8 R% ]4 g( x8 Y0 l1 L
61.     }
    ( K& o& S' j9 {9 E9 O' ?) o+ L
62.     run = () => {// 新线程
    1 `5 p6 a; P& q
63.         let id = Thread.currentThread().getId();
    6 P' C) u- N+ ^
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    " N1 _* P% T) u* o3 g1 }0 q& w
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    % d, f. ?0 d# o
69.                 if (k > 1.5) {
    9 G' E% d$ x! U+ M& O# {) y* ?8 t
70.                     k = 0;
    
71.                 }
    , ^0 [% w6 p2 W9 Q
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    3 b, B5 ~6 I3 a8 A4 i( G
75.                 setComp(g, kk);
    & H+ I& h# }  M1 t& u: H
76.                 db(g);
    
77.                 t.upload();
    0 t" w: K, I1 p4 U+ ?+ A8 O1 O; @
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    9 @, _6 m9 I' a& V! d+ d
79.                 ctx.setDebugInfo("k", k);
    0 k- J5 O+ Q9 @5 Q& y
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    . t, d4 f, A# u2 _
84.             } catch (e) {
    , _9 g5 n: p* `: M1 H: }0 z. I8 W
85.                 ctx.setDebugInfo("error", e);
    8 h0 K9 n5 E- O9 J  X0 @5 I
86.             }
    
87.         }
    ; {( j- P$ {! o( V! i0 {9 i) }
88.         print("Thread end:" + id);
    $ \: U. z5 L( O: g' {6 I9 e
89.     }
    ' D2 f: K; ^# ?, `2 M
90.     let th = new Thread(run, "qiehuan");
    6 Y, |* |. x( ^
91.     th.start();
    8 }) l; U) c, P1 n: ^/ w# o1 `
92. }
    
93. 
    5 X& \9 ~; D: Q- f. ?
94. function render(ctx, state, entity) {
    * J3 i1 \6 x) D7 f) i
95.     state.f.tick();
    ; ]' x1 ?. b; B+ Q& |2 @6 k6 C7 p
96. }
    3 @+ J& J1 I, _" J) m" R
97. 
    ) F$ V) P* t. k
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    9 |" R4 z( X% ]8 n% l, s
100.     state.running = false;
     
101.     state.f.close();
     . n; E" x6 T) _0 G7 y( Q
102. }
     ) O. w2 {4 _; C8 `8 Q" a, s
103. 
     4 M  q+ p4 X9 w! T, q; }. v
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     + R' k0 e5 v+ k, Y1 w9 M. E
106. }

复制代码

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

3 o$ z& F  o$ U& \
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
, L) E+ Q5 ^" `, N0 N# K

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

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