JS LCD 切换示例分享

; |, O( }: V! |- Q, p1 `  V这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
# o: N, T  n9 b" u% O) D8 u

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   * K! f$ Q% j1 h! m: |0 N
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   % y4 a7 N  N8 q. g7 h
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   4 `. c- N2 N. V1 x
8. function getW(str, font) {
   . |/ _/ |, l& I% W/ o- O
9.     let frc = Resources.getFontRenderContext();
   6 }. X7 G) l% y  Z  U
10.     bounds = font.getStringBounds(str, frc);
    8 \% f7 _3 {* w& z/ O$ }3 F
11.     return Math.ceil(bounds.getWidth());
    
12. }
    * R$ V" @' w( K: w1 p) P" F* y( p
13. 
    ( L- n- K( C3 m
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    / `& ^* h! j  q6 P
18. 
    & `( }$ m- q# K8 B% E: I# a
19. db = (g) => {//上层绘制
    9 v8 I0 W3 ^9 J, R" `, n7 p
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    8 I  c- J6 l5 g
23.     g.setFont(font0);
    1 o, v; n$ d2 w6 d( O. C
24.     let str = "晴纱是男娘";
    3 p7 x2 v, M  c9 J
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    2 e% A, m( i  Y1 m$ Z7 n& Z
29. 
    $ r' \& o) |1 _+ Q' p2 Z! s7 D5 g) T
30. const mat = new Matrices();
    / D# a! @0 H+ }# v" ~
31. mat.translate(0, 0.5, 0);
    
32. 
    / {8 T( s" \0 ^( \2 k
33. function create(ctx, state, entity) {
    5 W# _3 U' f  a. g5 a
34.     let info = {
    & J) L2 z2 ~/ n; \" i
35.         ctx: ctx,
      g! {$ \. ]) m* a7 ]& A
36.         isTrain: false,
    $ z/ g7 N  w+ D' N, t! }: \5 b
37.         matrices: [mat],
    1 R; W- U7 M0 o- ]- ^
38.         texture: [400, 400],
    & y' k8 h* R8 p7 O% z
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    & q# P2 H1 E+ W# G
42.             uvSize: [1, 1]
    
43.         }
    3 E+ ?) H8 b9 A6 B; `7 f
44.     }
    
45.     let f = new Face(info);
    : b& H' x; t  t; T
46.     state.f = f;
    , ]! j8 F0 Q! _7 l
47. 
    6 O( P* J& |3 x- M! c: I* F% U' @
48.     let t = f.texture;
    8 S% s& o7 ?5 f# l
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    5 k  S3 Z9 }% q1 x3 ?1 C8 l; a
52.     da(g);//绘制底图
    
53.     t.upload();
    & v2 e4 V; G- |! P6 Z& g0 m
54.     let k = 0;
    
55.     let ti = Date.now();
    & d4 B: ^1 U3 @# A8 R- F
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    8 N  d8 U/ R; |0 B( E5 Z
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    : `4 G/ s4 g. h  j# W# z
61.     }
    
62.     run = () => {// 新线程
    : d1 k7 b( i9 o9 O: B
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    % `% k1 K7 W. L- e( V0 F, O% b
65.         while (state.running) {
      I  K1 W. U1 T( V5 `4 U" _, Z
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    " w$ [( W4 V; H
68.                 ti = Date.now();
    6 T- J! F. H; x2 e; f9 [5 q
69.                 if (k > 1.5) {
    
70.                     k = 0;
    , }8 m6 Y8 @5 v' @) \3 B
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    + D$ u8 z$ q* V  a6 N1 U* `
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    + @4 l' g0 c/ R; J( A. v
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    ) W$ L: d* K6 X& b) Z2 q2 w
79.                 ctx.setDebugInfo("k", k);
    9 O+ J! b" S; ]! P* G9 l$ }& y
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    # f' y% D  H: H0 h9 `; J. V# U: c
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    1 F7 ]. ?4 t+ F! E5 f, q7 L
93. 
    + b( N5 v. r+ Z5 s( B% x( h
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    ' U6 v: a1 B$ K4 o0 U( ?* w1 z2 y
96. }
    
97. 
    # I5 i% L9 c8 G6 \) I) s+ A
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     , j1 k  a( f* t, q; W) K; k
101.     state.f.close();
     8 [2 @0 F- b6 U& r* T/ Q% L
102. }
     " y$ r( A; E" G* q; S
103. 
     
104. function setComp(g, value) {
     $ N. F0 T& }- Q/ J0 f
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     # Z! I' H, e; p. d
106. }

复制代码

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


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

) }9 @4 o& P* p# N/ \甚至双引号里面的自动加粗