JS LCD 切换示例分享

) J( ?3 U0 h* w  N这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
) e5 C! s' D# y

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   + A: ^! p- |! ~
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   8 d, t4 s5 J, P; Z
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   # D  K/ u  U$ M) @
7. 
   
8. function getW(str, font) {
   ' W6 C2 E* L% P
9.     let frc = Resources.getFontRenderContext();
   7 n; L0 K3 B- j! Z. @: N
10.     bounds = font.getStringBounds(str, frc);
    ( h: k( N9 B5 f- E: c6 T* n% d
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    5 X) M" p: |% S; t2 b
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    / b8 S' `( I2 k1 o$ q
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    * |/ I8 m, D# f. I
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
      r" l, \0 Y' q% _  f& T' @
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    1 ~- Y2 O- f& [9 w) ~. {1 ~6 `
27.     g.drawString(str, ww / 2 - w / 2, 200);
    $ F; q2 z6 k4 }# f1 @
28. }
    
29. 
    # q2 ?+ R$ U$ ?
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    8 p) R  Q$ X) P+ S! V  m
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    ( T! x; ]0 \0 z" G1 E% o5 @& m
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    , l8 _: E5 e( `
40.             renderType: "light",
    
41.             size: [1, 1],
    * N& P- P) C6 @1 v) E& t. m" [( `4 a. E
42.             uvSize: [1, 1]
    " s- p$ o8 K* h/ Q$ m# o7 Y
43.         }
    6 a3 p# T2 r  {% R+ l: d. ^
44.     }
    
45.     let f = new Face(info);
    4 {! Z5 I" D' O
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    0 B5 T+ m: n2 }
49.     let g = t.graphics;
    9 A& M( |8 ]5 U  ~1 U) I( i
50.     state.running = true;
    
51.     let fps = 24;
    7 \: ~: ~8 f* b$ {' s2 H
52.     da(g);//绘制底图
    
53.     t.upload();
    % v$ `) Z, }) g5 y% y6 s/ ^
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    3 G1 y* @8 k2 n
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    : G& `) l; T# p: P& k
59.         if (k < 0) return 0;
    1 C9 W$ D- \* |. A/ _/ |1 q% G6 Q
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    & a. j/ ]! _8 u: U& m7 t
61.     }
    " h( T, q* E7 N5 U1 _
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    2 @1 N) g1 ]. i
64.         print("Thread start:" + id);
    ' |- o7 }7 ]8 m& a. S# G
65.         while (state.running) {
    / T5 z$ k5 E: }$ `5 f
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    , [* A* H& \7 g+ P' ?% Y, Q4 V
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    $ D5 Y. b  I' Y) j
70.                     k = 0;
    . H, o/ Y3 Q6 o/ y
71.                 }
    
72.                 setComp(g, 1);
    / [! R/ P# j! D6 Q" [
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    ! _( }2 \/ Q0 e
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    8 ^) {" B6 g& R" x0 i% I
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    / |; }3 K- ^+ p3 R8 w9 P/ u
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    0 j( A$ q- r* C2 e1 z" v! ^* n
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    . r1 L( P5 f( R$ f/ T; C
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    6 {7 |$ \  n8 [3 d3 Y$ U  _7 J+ c
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    " U" u& m5 |: x* H
91.     th.start();
    4 `  h8 u0 c/ J' B
92. }
    
93. 
    
94. function render(ctx, state, entity) {
      x+ \: P0 v% Z8 t& F
95.     state.f.tick();
    2 [2 ]* p0 J* H: a& A) A
96. }
    % t" I" a' F9 t$ m) [, @
97. 
    3 q  s+ n! ^7 T$ f$ ?
98. function dispose(ctx, state, entity) {
    6 E$ N& x7 p5 O) d) c
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     / w* b- I, g; ?8 E
103. 
     2 h* P) t8 O3 Z
104. function setComp(g, value) {
     $ M) g9 w/ o% u
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     , |& a, K6 E' p' b
106. }

复制代码

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


& l+ n& z% Z; y! F2 G, p顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
2 Z2 a& J9 q- D/ @" H

Hobbytimeblank 发表于 2024-11-16 20:38
) X8 _( z3 k' V7 I7 C+ I  W8 k8 `全场最瞩目：晴纱是男娘[狗头保命]

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