JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
, W/ q4 R2 n- F8 }+ M4 |

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   : X6 I) A7 j3 m$ V2 s$ X3 I/ F
3. 
   7 |8 n( ~/ S2 O  {  K0 s$ s/ b
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ( Q1 r' W( X" v5 s2 ?) @; F
7. 
   
8. function getW(str, font) {
   1 F! \* {, k9 U
9.     let frc = Resources.getFontRenderContext();
   8 ~- l# q2 J" H9 f; P& x
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    / o8 E' L# p! m# S( r7 V
13. 
    
14. da = (g) => {//底图绘制
    , \6 n4 L# o3 Q
15.     g.setColor(Color.BLACK);
    4 J7 m5 n; {) y# J
16.     g.fillRect(0, 0, 400, 400);
    3 ^2 S2 S: F4 L9 C- c- B
17. }
    7 N- t+ i! t) ]+ u8 x; P  T- e1 L
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    1 r/ x' W; H1 ^: L8 R& d
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    3 ]& a# \' S( v* [, r$ E) y" m9 M
24.     let str = "晴纱是男娘";
    - o$ L/ T$ v9 T2 f
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    4 a  \# |8 `. D/ D8 y, J5 {
27.     g.drawString(str, ww / 2 - w / 2, 200);
    7 Q0 R: u& N6 ^  r
28. }
    
29. 
    - v( ^: P, N. \9 H
30. const mat = new Matrices();
    ; s& a& r8 ]1 @5 |
31. mat.translate(0, 0.5, 0);
    2 r, ?8 T3 t) N0 L
32. 
    
33. function create(ctx, state, entity) {
    " j3 K  i3 L5 `1 S2 Z  a/ q! v3 ^
34.     let info = {
    9 N3 {' h% @9 W/ _$ L% U
35.         ctx: ctx,
    
36.         isTrain: false,
    # Z. T" _# H0 H1 N
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    8 V5 G" h8 b1 T$ u4 z
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    
45.     let f = new Face(info);
    4 i9 D; h. E3 Q3 |/ N$ @6 R" d
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    ( c- s3 h+ k! E8 S
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    ; K# Z/ p$ v* }4 _1 o3 u# M, g/ v; W
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    , U, Z- ~' l; [- U8 Z% x: z& ?
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    ( K9 d; _2 M% Z; Q
59.         if (k < 0) return 0;
    - \9 V7 d2 O, K% P
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    ( d1 K1 j1 c. r; D# A; G9 @
61.     }
    
62.     run = () => {// 新线程
    3 Q3 J' B( `" m; g
63.         let id = Thread.currentThread().getId();
    / V- i8 h0 l, I/ p7 J) U6 h
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    & ~7 E' W! W5 \7 {1 c0 _
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    0 {2 @0 C' V7 a! T
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    0 G: p5 h2 X. e1 h! r8 t* [+ S* Z& }* t
71.                 }
    
72.                 setComp(g, 1);
    ; h5 Z2 r5 P% w
73.                 da(g);
    ) S; z$ g  [5 p# q% m( t
74.                 let kk = smooth(1, k);//平滑切换透明度
    - q1 A" F2 g" v. ^! q# I+ C" L3 i
75.                 setComp(g, kk);
    * s0 Q6 c- ~- v- T8 M- z# P1 G
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    / u& r% \/ v! D0 h5 M5 F& X0 ^" P
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    7 Z. T3 q" Z. G# N
82.                 Thread.sleep(ck(rt - 1000 / fps));
    , D& ?( P3 A. d2 c4 b( o& X
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    4 U! e% o& k9 x5 e- I$ a
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    ) i; U5 p. J/ O* [) T) o, C8 G
88.         print("Thread end:" + id);
    * {( `6 p0 w8 t2 {# h
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    . O, P, }: ], v
91.     th.start();
    5 w% K8 n, I2 D& c, u" d
92. }
    0 Q& p" c* n* N% A7 Q1 K: j3 O0 Z
93. 
    0 c! R* e9 O6 L" l
94. function render(ctx, state, entity) {
    9 n, g) _4 e" I" |9 E
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    / ?( r- ^) w# A& T
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     
103. 
     4 N7 ~6 P) E# \9 ~' i
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     , b8 o0 k5 \0 ^/ u
106. }

复制代码

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

2 `6 o! n# J6 m5 y6 B
, h2 @% `) P" \7 J: I4 t顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
2 [4 Z( S1 k3 `1 h6 J7 s9 a

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
5 {& s/ f9 `0 z3 a9 b' C全场最瞩目：晴纱是男娘[狗头保命]

1 L1 P6 ~9 g) L/ \7 T8 x! \7 k0 \甚至双引号里面的自动加粗