JS LCD 切换示例分享

' E, `! g! j# o. L/ v) |这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   8 K8 ~; Z4 j1 X/ H! R
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   : H" }. {) g3 z) l
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
     z7 C2 s; t& d- H0 f
8. function getW(str, font) {
   " {7 C6 }5 P' e6 u. b" z
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    + J/ D+ P$ X% G. L
11.     return Math.ceil(bounds.getWidth());
    ; n( s8 J; {7 R3 Z4 g. w0 P
12. }
    
13. 
    : x" O  S4 H+ b- P! L$ K: B
14. da = (g) => {//底图绘制
    # ?/ s' w. `+ X: t& m9 v' Z6 b) \- B
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    / j1 N9 ]7 u8 G- c; A
19. db = (g) => {//上层绘制
      m$ K& I+ |5 w& w& k
20.     g.setColor(Color.WHITE);
    6 Y# i7 w7 R* F0 w6 j! K; A- T# L
21.     g.fillRect(0, 0, 400, 400);
    : Q. C8 D. S6 w# |4 c4 ]# t' q
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    ! q) J" Z$ }: A( @5 P
24.     let str = "晴纱是男娘";
    # l+ q' y9 h* z  `% X
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    0 e! V/ e4 b" I+ X- n4 V" \; w' V
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    2 h# t0 |8 [2 m1 [- @
29. 
    ; H6 p# K8 f/ I: k1 n
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    4 F( L5 ~9 _3 W: n
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    % S& o* V+ M9 x# k8 c3 p6 P
37.         matrices: [mat],
    " c8 s# |: k0 g
38.         texture: [400, 400],
      t' [( P. e* j: m4 T' P
39.         model: {
    * e5 F1 L" i0 r  U6 S
40.             renderType: "light",
    
41.             size: [1, 1],
    & h" q5 t# I" o  H. d) p  w7 j$ B
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    ( n3 ?. a8 R9 c
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    0 ~. o, G& ~- \
49.     let g = t.graphics;
    " P. U. Q* d: {1 D) r
50.     state.running = true;
    
51.     let fps = 24;
    ( }! e3 }/ O: @* y; G
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    2 Z5 D4 b" D7 T) f
56.     let rt = 0;
    3 Y5 I6 ~: n" N6 G& ~7 k
57.     smooth = (k, v) => {// 平滑变化
    / m! b4 K9 Y" }9 A% k6 }2 ~
58.         if (v > k) return k;
    . f& v, B- N! X3 u* C# r9 }, Q: \
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    / B" @* x; Y. e+ J- L- f# H
61.     }
    
62.     run = () => {// 新线程
    * d. M) ^0 `. n0 h/ y9 v% u
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    & Z" Y$ Z5 V) J! A5 J- L
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    - {1 p9 F& X1 q: i& f
69.                 if (k > 1.5) {
    . n" d2 Z' E: s5 P% Y* B
70.                     k = 0;
    
71.                 }
    5 h3 _* e8 p7 Y4 {; t
72.                 setComp(g, 1);
    . K) w* b6 ]2 n) A
73.                 da(g);
    1 U+ o4 x/ c5 y* K2 i+ F
74.                 let kk = smooth(1, k);//平滑切换透明度
    4 G8 H3 }, X2 a' f2 f1 ?& V
75.                 setComp(g, kk);
    ( n+ T+ x+ r* @- ^- E
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    ! Z7 p1 Q5 h- ~7 A0 w  U
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    2 N8 c3 l) u( ?; r
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    . }2 N0 @( |* ]7 H
85.                 ctx.setDebugInfo("error", e);
    ' q' v% E( O" P
86.             }
    ( ^2 q0 Q% \3 K) p2 x$ {
87.         }
    1 ~- \6 L  x% T+ H; m* L5 v
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    2 C, X2 @5 ^0 x, A! Q
91.     th.start();
    
92. }
    
93. 
    $ U/ W+ ~7 V! f4 O2 G( p, E
94. function render(ctx, state, entity) {
    " M* Y! X$ a2 C7 M, F; Z
95.     state.f.tick();
    : ?( Y8 ~  ?- Y# t
96. }
    5 X. ~. U+ e3 k# q
97. 
    * |! t* z$ W5 ^/ f9 ?  N5 F1 K5 g
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    # y/ d2 B9 i) `7 z/ @# X: k# l9 V7 S
100.     state.running = false;
     
101.     state.f.close();
     + I6 l. |; X. H- F6 b+ M* C' U; p
102. }
     
103. 
     , f, F  i! J7 l# B! B
104. function setComp(g, value) {
     ( a! ]% z! T* S5 [; |+ V
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     - M7 y. x. G' J* }& h
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
" O% E5 u" l4 s( |3 c1 k
/ ~0 r2 D" Y5 w
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
, C0 B5 N% K- d* W4 f. ?; w

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
1 Q9 p* o) y: d3 G

Hobbytimeblank 发表于 2024-11-16 20:38
5 N9 ~9 F9 x/ _4 n* ~# `全场最瞩目：晴纱是男娘[狗头保命]

1 Y. j8 L" |, M甚至双引号里面的自动加粗