JS LCD 切换示例分享

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

1. importPackage (java.lang);
   ! v: [# i: h; H0 A! H% Y. f2 l
2. importPackage (java.awt);
   $ C: k6 K# R5 _# a5 x( _0 m; S" u
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   8 I0 Y2 q- v5 e& Q
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   ( B( Q" U) K; O
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    ' Z4 q" k8 [% N, ?7 H
12. }
    - N1 Y+ o7 T" Q7 c% ^+ A
13. 
    
14. da = (g) => {//底图绘制
    ( M& {8 t* V0 q4 h: j" I
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    % e4 C& N, `) I# K7 c
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    - r  d- H6 b4 M9 P3 Y8 p, Z* X
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    3 C/ Q/ c5 I& D- W
28. }
    / W/ c2 e' m' o
29. 
    - A. `# T. \( z# P  n  I
30. const mat = new Matrices();
    ' L1 n6 ^. S1 k& Z/ G1 m2 c3 j& q
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    % d0 D- p1 {0 {$ ?3 F4 t2 v
36.         isTrain: false,
    
37.         matrices: [mat],
    ! C! n; g/ E) Y! j7 f
38.         texture: [400, 400],
    
39.         model: {
    ' D9 n9 ]# R# ?/ q3 i/ I1 f, y$ }
40.             renderType: "light",
    
41.             size: [1, 1],
    8 Q6 W, q" A* X0 D
42.             uvSize: [1, 1]
    
43.         }
    ( b  M  L, D! i. |0 }
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    + o! S2 k. F5 {' y) O' N9 n
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    ; l  L0 I3 ?3 o/ W+ Q: f1 g
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    9 U# y/ _+ n2 v( p2 X
54.     let k = 0;
    
55.     let ti = Date.now();
    : H6 c$ v3 |2 Q7 K/ j% R
56.     let rt = 0;
    : U9 U; p. Z8 u9 o& H+ N
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    , r& s6 O2 ~! v3 c
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
      N9 `; b/ ~1 c. \! R. D
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    : n1 C% F8 ?$ q$ `* ?
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
      o* k9 _$ v5 K* _
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    % B( ]5 K; W( W2 A* Z' |
75.                 setComp(g, kk);
    
76.                 db(g);
    3 z2 H6 n; k8 |/ k# S( `7 i4 {: q
77.                 t.upload();
    6 p$ s6 Z# U: I' ?: {1 i
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    + E; k. A1 e5 A; R8 m. ^5 d  I
83.                 ctx.setDebugInfo("error", 0)
    7 m+ B" y  T* x% v. p
84.             } catch (e) {
    " E. w0 w( ]& f5 {( [; U7 }. N! T, L; N
85.                 ctx.setDebugInfo("error", e);
    ) a* l- g  u) Z. Y
86.             }
    
87.         }
    8 K8 I% o  j; a" ~0 r
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
      X7 @  n5 H5 B9 I  A$ c( v
91.     th.start();
    . ~( X" ?4 k% `8 q1 f' z
92. }
    
93. 
    ! b0 W5 p& \9 q* e$ C6 [1 z* _
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    1 t% {8 V6 c: m. F0 n
98. function dispose(ctx, state, entity) {
    6 c& }" |4 L. a7 ~$ y# E$ q, A
99.     print("Dispose");
    
100.     state.running = false;
     , Q; K5 x: x; n6 @- c
101.     state.f.close();
     * I8 g' S# `* s
102. }
     
103. 
     0 }! U% s/ u! D5 |
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     * S0 u5 C# s. X* Q& _9 h
106. }

复制代码

- e5 T% N( ~- Y1 k( f4 t写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
3 s( M! v. w4 V+ [- ~  o9 V2 i" o) l

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
# y; v4 C" q9 p8 v* t2 e( R2 N& E$ T

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
' F# L$ S( l: ]* p  X, ~全场最瞩目：晴纱是男娘[狗头保命]

! K* [, g& F; J) [! M* b$ v. K甚至双引号里面的自动加粗