JS LCD 切换示例分享

# l1 N6 {+ ?+ Y5 {4 M( [这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ) \( x; Y+ k. ]% b& H
7. 
   , c8 r' g8 T/ C' Q" l* d+ q
8. function getW(str, font) {
   2 w4 e; b4 N/ |" }
9.     let frc = Resources.getFontRenderContext();
   # P$ M! R5 Z9 N; o: I6 @* g. V
10.     bounds = font.getStringBounds(str, frc);
    3 U. b- T" a+ q* w% U
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    4 Z2 q# L4 p" E5 h8 U  Q
17. }
    ) k. a# j$ ?( T6 B8 \& g
18. 
    
19. db = (g) => {//上层绘制
    & @( s5 J3 l& T. t5 {6 n
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    " C: |4 d" L1 i5 ]( `
22.     g.setColor(Color.RED);
    , |# E8 s! u7 J# Y/ }5 j
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    9 @$ N3 s! s" N- O. q
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    # ~& @! Q/ c6 O: r( X0 n+ B
28. }
    $ h7 Y2 o' s/ I
29. 
    % ~) e# P1 }: O
30. const mat = new Matrices();
    ) T8 W5 P' q; J" l* d" L# H; {3 z5 M
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    $ M2 Y2 ]% q. u$ p
35.         ctx: ctx,
    
36.         isTrain: false,
    $ t& q5 v7 l# a5 \# v
37.         matrices: [mat],
    # E2 \9 Q! X) h1 l! w* r
38.         texture: [400, 400],
      L" C! Z' e9 W
39.         model: {
    
40.             renderType: "light",
    " M1 c/ V4 K$ A
41.             size: [1, 1],
    0 j* O/ T8 m1 H9 z
42.             uvSize: [1, 1]
    * {6 }+ }: I' w3 H4 {5 O$ L
43.         }
    
44.     }
    
45.     let f = new Face(info);
    1 l) I, m3 @5 K9 X+ p
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    6 F0 M6 x& L; C
51.     let fps = 24;
    % g- O9 y9 U2 Y; T. a
52.     da(g);//绘制底图
    ! ?) I$ \: L  z5 F
53.     t.upload();
    4 v9 F+ M7 t5 s8 Q) n2 ?, n' ~
54.     let k = 0;
    ) P- R' q/ W9 V/ I" K( N( }1 h
55.     let ti = Date.now();
    
56.     let rt = 0;
      ?3 T4 V* m7 `  L& q7 V( C1 I
57.     smooth = (k, v) => {// 平滑变化
    6 p8 ~4 O9 j- ^" z) g5 n
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;
    
61.     }
    
62.     run = () => {// 新线程
    3 R4 H' p, ~. _* v7 o' f
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    " A& A2 ~# f6 L% _; e9 t
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    2 A) ?. M' \( D/ |* k
68.                 ti = Date.now();
    ! e6 k+ E3 v7 M' A* g3 @9 [
69.                 if (k > 1.5) {
    
70.                     k = 0;
    ( h" G. B6 I. n3 W& `
71.                 }
    : b& h9 W. j) S2 Z4 O. |+ [
72.                 setComp(g, 1);
    7 N& J; q: U  g2 l, n4 ^
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    ) B; V! A6 n; W/ d) A% B9 S
75.                 setComp(g, kk);
    
76.                 db(g);
    % R6 L8 X$ I0 I- @3 ~
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    9 J9 |' n$ ]  y& P* O  j% P
79.                 ctx.setDebugInfo("k", k);
    ' x6 u9 d4 ?  H4 s, b) X! G1 k
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    ! L% t2 M' ?$ }! Z- C3 q! D: i
82.                 Thread.sleep(ck(rt - 1000 / fps));
    6 E, I8 _) p' f: \
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    # B& s, D0 @& _/ F
85.                 ctx.setDebugInfo("error", e);
    ( Z+ V% s2 w+ H# Q( H3 P' b
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    # o' _0 \  D% l& u" H. Y
90.     let th = new Thread(run, "qiehuan");
    8 ?  z8 u, z# K5 q; v8 x  m( t
91.     th.start();
    
92. }
    - b1 {( S7 q( q% {* q
93. 
    
94. function render(ctx, state, entity) {
    7 W& G9 `* `" n- e4 K* L
95.     state.f.tick();
    
96. }
    ( l) q5 q5 k" _! {% @: e3 L
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    2 S4 J7 f- f% t/ H! x! ^2 A" p
100.     state.running = false;
     
101.     state.f.close();
     + B3 y$ B* Z7 Y0 C: G' Q, T
102. }
     ; n8 o2 E! g1 I& h
103. 
     1 d& s% q: Z' ]5 \7 b& d9 S5 N
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     % j$ y' S/ g- Z0 H4 x$ U
106. }

复制代码

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

' V/ p$ O' d, q' [. ]: O
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
3 e- {6 Z, R- a8 R# }4 S: F

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
" E( f$ i: T& i1 L# Q

Hobbytimeblank 发表于 2024-11-16 20:38
) T4 l2 e  F1 x( U, |全场最瞩目：晴纱是男娘[狗头保命]

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