JS LCD 切换示例分享

; ^# Q! c! y6 z4 G; H' b这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   , c0 V& L9 v  F+ q4 o. D
2. importPackage (java.awt);
   
3. 
   5 x  x' x, m5 P/ A; I4 I
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   2 X$ T6 U& E5 z: [3 K
5. 
   * J, i% f) ~, [( Y) T
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   : I3 N# [+ N+ G( }6 s: I1 {
8. function getW(str, font) {
   * o0 {# V$ x: Z# c* G# y4 L2 Q
9.     let frc = Resources.getFontRenderContext();
   ) J, r! F/ ]' p4 }3 k: q
10.     bounds = font.getStringBounds(str, frc);
    . r- s& u/ |& M9 Z
11.     return Math.ceil(bounds.getWidth());
    5 v) F) O7 E$ t5 l/ E/ ?' N/ U
12. }
    
13. 
    
14. da = (g) => {//底图绘制
    4 L3 t' f3 H7 X* a: y: B* Z
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    ) v2 K; c& g" d& r/ d
17. }
    
18. 
    9 J8 [( I& M; n) i) M# @$ s
19. db = (g) => {//上层绘制
    / C9 R6 h2 ~) Y6 W
20.     g.setColor(Color.WHITE);
    - p( f2 F! q( e+ M
21.     g.fillRect(0, 0, 400, 400);
    ; q  p# F+ T  s, z
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    , J' o) C3 D* u' @2 J8 v& n
25.     let ww = 400;
    0 U2 j% {! y* C" `. S/ L1 O
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    * E# E; p1 l! d  \. T4 ^2 j  W
29. 
      x: G$ [# e) P4 m
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    " E- v1 c1 A: e/ X$ d
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    " E% B$ m8 b; p% j! P: w
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    6 @( ]- U0 C# _" _1 b
38.         texture: [400, 400],
    : U9 k! f$ G/ q3 t+ T' e1 U9 w
39.         model: {
    
40.             renderType: "light",
      E/ b; c% }! V3 T) N9 S" `' g8 l6 ^
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    - Z' l3 [  T, k2 M/ j: G
45.     let f = new Face(info);
    # f6 ^6 C9 ]& E- |. ?
46.     state.f = f;
    1 H9 ^4 R: i# o; F" ~2 }6 n
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    ( }! u7 N, t5 t2 i
53.     t.upload();
    $ [' M) {4 b5 P; V0 r" j  E8 t
54.     let k = 0;
    ) ]; A1 o, i8 j' [
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    0 _6 g# [) `* J+ `( Y
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    : [& U9 c4 K  z# H4 q- s
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    1 X8 ]0 y. t6 C8 ^
61.     }
    5 E2 Q! `: i, m
62.     run = () => {// 新线程
    & b0 s) L8 u. _% I( M1 o
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    1 G3 S5 p3 x7 U, Q
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ! f: j$ M  p6 m/ E3 e; M/ o
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    4 I8 e1 k3 r1 N/ q2 @
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    0 f8 Z6 \: W, ~; @5 k# [! |- `/ L2 F
73.                 da(g);
    ' f* w5 {  z& W! M1 [
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    $ j5 P. V& @- E+ ~2 V
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    7 d+ h9 T! g) F
79.                 ctx.setDebugInfo("k", k);
    ( o4 s: i- {$ _' X: U/ r
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    7 S) q% w+ v5 f$ j+ |
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    5 H, E" d" n  F6 ?& j2 |+ o
86.             }
    % C2 U7 i* ^4 c
87.         }
    5 ?3 a% `' T2 J2 C& u+ |9 F
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    ) E9 w; Q6 F' x, @7 x
91.     th.start();
    ' D3 P. h  {" v+ M, s/ f9 ~
92. }
    
93. 
    3 P% d7 @5 O5 T; z( b
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    2 \' v% U, ^% l* k* Z6 Z4 {1 j
99.     print("Dispose");
    ; R5 G  o# X# `; _9 F) _
100.     state.running = false;
     
101.     state.f.close();
     
102. }
     * Z! |$ c. ?8 N( O4 _: q# ~
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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


& ]2 _/ z; n" i) ?3 |6 l顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
8 D6 `$ N9 M$ f: W! }1 e' W

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
5 P( W& G/ h# w; y3 _( [: @全场最瞩目：晴纱是男娘[狗头保命]

! ~- U- N% K7 @; ~" ~甚至双引号里面的自动加粗