JS LCD 切换示例分享

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

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   4 `& M  E6 I6 ^0 N3 B
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   0 v% S9 Z/ p& i( I& h1 B
5. 
   * [6 z( u: `, c+ x$ q* R
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   7 K$ f. B1 K: \. X0 T0 @
8. function getW(str, font) {
   3 d! S! p, l7 U+ Z* n9 L
9.     let frc = Resources.getFontRenderContext();
   ; S9 _* \7 Z! k: w, `% m2 s! g' Z% Z% \
10.     bounds = font.getStringBounds(str, frc);
    % p3 B. |6 a# r* [1 Y+ d
11.     return Math.ceil(bounds.getWidth());
    $ U' A- J# @! X3 m0 v( e' P
12. }
    
13. 
    0 P8 X$ ~* m; I- V/ O
14. da = (g) => {//底图绘制
    ) y, z7 X. M9 x( g6 W
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
      ?& ?  D1 N' U0 A+ h$ l
18. 
    
19. db = (g) => {//上层绘制
    / ^9 q/ z4 t: o
20.     g.setColor(Color.WHITE);
    : ?# P: o$ e9 h1 f1 U" O; G
21.     g.fillRect(0, 0, 400, 400);
    * P6 ?" c" g7 [- n- C" a+ W& ^
22.     g.setColor(Color.RED);
    # Q5 x" c; ~7 Y7 U1 w
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    & s, h" y$ Z% E# O8 Q  P" X. j
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    8 v7 @2 O# c4 |8 E+ a" k3 L
28. }
    ' W# p& o, u" s9 z3 W6 k
29. 
    # ]) y5 T4 ]' @$ m; t
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    " |1 L. }# `0 s5 J8 E4 Z. U1 o$ n/ F
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    8 b, z7 u0 u! ]
41.             size: [1, 1],
    7 p  B8 R6 R( M# q, ~( f% ^
42.             uvSize: [1, 1]
    
43.         }
    6 U5 r# C' p1 A5 P7 ?2 }5 a
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    # K# V7 b8 p. h: L. P
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    5 O3 z* \6 T. W/ W- Z! c1 e
54.     let k = 0;
    ' X' W% S" G' a
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    1 S1 b4 n0 ?! {# F# D7 D1 [
59.         if (k < 0) return 0;
    5 j0 o& j! F# x
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    7 q1 s1 Y2 `' v: F% J- ^& w! i8 X
61.     }
    6 r, J: K. D* z7 M/ Y4 X) X, z
62.     run = () => {// 新线程
    5 r2 H! ]; s5 l3 V6 A
63.         let id = Thread.currentThread().getId();
    8 C; a& W3 A/ n$ G: Y. h' R
64.         print("Thread start:" + id);
    9 o& Z% P6 w: d4 U
65.         while (state.running) {
    9 J$ {; ^) @, H$ W& {3 i) _0 J
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    4 R3 Q9 H% U1 C9 \6 m
69.                 if (k > 1.5) {
    4 P/ [6 f$ a) k3 @6 z7 _& ]) G
70.                     k = 0;
    5 X3 M" k: F8 l, H% O8 ]
71.                 }
    ' Q3 _* b/ Q( J. z- w1 H* D$ U) l
72.                 setComp(g, 1);
    
73.                 da(g);
    8 J% m, G4 q8 G4 A% \* |1 Y# ?
74.                 let kk = smooth(1, k);//平滑切换透明度
    ; D5 K5 D* M6 T9 |/ F
75.                 setComp(g, kk);
    - l3 `0 z9 ~) X5 |; m; |5 C
76.                 db(g);
    8 D% D. x$ m) c7 F# R
77.                 t.upload();
    3 u/ o! N' _: O" e
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    ( M! h$ F$ X* w& N; e# k
79.                 ctx.setDebugInfo("k", k);
    ( e# H( ^; I# h2 J& o) V, I
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    8 }: ^3 X3 l* Z- k# a" \1 d
82.                 Thread.sleep(ck(rt - 1000 / fps));
    6 g  S+ Y3 Z+ {/ |9 b
83.                 ctx.setDebugInfo("error", 0)
    9 r+ X6 ?+ N3 ~4 Y1 x
84.             } catch (e) {
    3 h# i9 r4 K6 H) v
85.                 ctx.setDebugInfo("error", e);
    5 ^  Y6 e/ A" U9 \
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    & N8 }: H# ^. {' N' N
91.     th.start();
    
92. }
    
93. 
    * }/ p, J0 {5 S5 Q* G7 e: [* Y) [6 Q
94. function render(ctx, state, entity) {
    , @% j: p. N+ P
95.     state.f.tick();
    
96. }
    $ @3 l. m* V9 P/ A
97. 
    8 D( z/ y' L8 H3 m& Z5 N, B% I
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    " v0 E6 X3 `8 D. _& ^
100.     state.running = false;
     - ]4 ~: L, |3 u* i
101.     state.f.close();
     
102. }
     4 r- ~9 Y- l, l# n+ R3 D# E
103. 
     
104. function setComp(g, value) {
     % ^# y; n& s( V
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     / O* _% Z3 F# b2 F
106. }

复制代码

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

9 ]2 R+ \* ^, c/ y2 o
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
- \; P" ]+ D# m3 {$ k

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
  S; R$ ?$ D  `" C3 ~( k5 [5 [

Hobbytimeblank 发表于 2024-11-16 20:38
7 L9 G6 K- [) Y6 Z3 z' Y全场最瞩目：晴纱是男娘[狗头保命]

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