JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
; R$ }- ~9 f  {; U* L) F- i

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   * p- c. l  m4 z7 o6 E5 u7 ?, i# v3 w
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   9 c  i% H5 n. P; `) {9 e8 @
7. 
   
8. function getW(str, font) {
   ( |+ D/ W$ q; m7 }. y
9.     let frc = Resources.getFontRenderContext();
   8 e; f& z  ?& p
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    / _9 H; \0 }3 ^1 K
18. 
    
19. db = (g) => {//上层绘制
    0 T, x- G; x+ y6 f, a
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    / s4 a( |3 z7 v/ W+ U
25.     let ww = 400;
    6 P- R/ H+ k: A* e, ]/ w3 X
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    7 _/ Y! K6 U4 x
28. }
    
29. 
    - ^# u8 X8 w2 {  o
30. const mat = new Matrices();
    # J0 |/ L8 v3 @, }% d
31. mat.translate(0, 0.5, 0);
    2 ]0 X. Y% t" ~3 }9 @
32. 
    8 w1 _( w$ J) s/ m3 g5 ~
33. function create(ctx, state, entity) {
    & {& _; \' P9 b1 b- Z8 \. n# a0 P  C
34.     let info = {
    
35.         ctx: ctx,
    7 X" ^: m4 Q" M5 g; i
36.         isTrain: false,
    
37.         matrices: [mat],
    ! @6 x% Y& ~- ]$ M
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    # b( F1 [+ v4 B8 T4 ]) G
42.             uvSize: [1, 1]
    % l6 c( u# }. [; H& ~- B5 V
43.         }
    : F/ p, b4 w6 s3 r- N& ?( g
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    ' ~2 Q1 N& @  h$ B3 G% \0 x: e& e: g' Q( ?
48.     let t = f.texture;
    + ]. x& I, Y# U/ U  i& a1 v  A8 i' v% O
49.     let g = t.graphics;
    ' @+ T3 G2 Q( W) T
50.     state.running = true;
    9 e+ r" {! H8 c% I+ B. A8 ~
51.     let fps = 24;
    
52.     da(g);//绘制底图
    ! W7 {% r# b; i7 |* q0 e4 Y- \
53.     t.upload();
    " _; g' v6 m" G
54.     let k = 0;
    
55.     let ti = Date.now();
    + c& z2 |( [( T- H4 L
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    8 U/ f' a4 d- J9 _& B  F, f
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    4 \7 V% P3 N% D4 d: V
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    $ p: C0 I+ t5 f7 X$ j0 E
62.     run = () => {// 新线程
    % A; r0 Z( l. X3 [! [
63.         let id = Thread.currentThread().getId();
    * Z5 G, |) P% E
64.         print("Thread start:" + id);
    & [* S" E1 w  l. D( J  p# ?
65.         while (state.running) {
    ) b/ P/ u) V2 [2 _8 s
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    " |6 `! ]; E1 j* z* k
68.                 ti = Date.now();
    8 E; G6 X& n' r+ {3 Y
69.                 if (k > 1.5) {
    & q! z8 @0 Y6 d/ T0 s. @, A: m  k
70.                     k = 0;
    # X4 x7 }3 p9 ~7 e
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    ' G( \  l" M0 l( i0 t* _7 {- H7 O
76.                 db(g);
    8 |& a% P* \1 h; Z2 T. f! k
77.                 t.upload();
    5 Y# o& L6 d- o1 [0 M
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    + ]7 ?% d0 }( Y) i. t9 x
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    ( C. W6 s/ \* B  `' H
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    : I+ R( E6 d& U" G( }5 k( K( G/ D; \
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    7 K# l% a) N. W( d/ ^
89.     }
    , M0 H  w) _3 H. b8 c" o9 X
90.     let th = new Thread(run, "qiehuan");
    & U, W: w5 }. S, V7 S9 w
91.     th.start();
    
92. }
    
93. 
    1 N, }: Q/ ]7 M3 G
94. function render(ctx, state, entity) {
    3 w* Y4 n; ^% O% M
95.     state.f.tick();
    9 y+ F9 t0 h* u) ^& j7 C
96. }
    
97. 
    3 C# p% f, o0 d3 j
98. function dispose(ctx, state, entity) {
    ; g$ b- \* A6 Q; `" G5 w
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     4 t) O9 P$ p7 V$ J
102. }
     # a+ H  I, c& L. }4 A9 G" y- a, U
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
; O0 m1 o) i7 E" ]( ]: P
: r9 y1 l6 m% X3 e$ _9 D4 W
; }1 ^% o3 M& x, p% p顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
$ v) @/ L! x  P* g& p

看不懂，但我大受震撼

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

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

+ r( f! }: ~7 k* E6 S甚至双引号里面的自动加粗