JS LCD 切换示例分享

% ?/ n3 C4 P( @- q8 E7 f/ v这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
& L( e% L% Y5 `. y& Y2 o, R6 o

1. importPackage (java.lang);
   " t3 P9 Q" m4 i3 _0 H5 L
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   / f) j% B- Q( b6 ]
5. 
   1 C, `  K8 _1 P7 L- N/ [
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ' ^4 s1 a3 A6 A, _! T- @: _, `3 O+ @
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   3 Z# V& c; I( L. B' l. V
10.     bounds = font.getStringBounds(str, frc);
    ; B! g' |+ x& S8 ]/ e1 w% Q
11.     return Math.ceil(bounds.getWidth());
    ; z  g/ s) i7 s2 n
12. }
    ( }7 b' e/ s9 N3 {) Q+ @! g" v
13. 
      l6 N/ x6 ?0 r+ ~& g3 ], Y  C" K
14. da = (g) => {//底图绘制
    # F% _# L9 i7 _' P0 f1 B; p# R
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    $ P! P9 {) ^6 @7 P- \( f
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    $ Z+ ]1 f- C0 |
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    6 j. P6 k$ g$ D5 Y, t4 s
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    , \( D8 B2 A3 L( f, C/ N$ T
24.     let str = "晴纱是男娘";
    3 a( i1 ~6 Y" S3 d; z
25.     let ww = 400;
    ' Z$ G3 U1 s: N9 M0 \- ?0 T, a) p  v
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    - m& j* I1 ~7 ^+ m
28. }
    
29. 
    
30. const mat = new Matrices();
    ; B! q! f( z' l8 B( K
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    1 G% Z% f7 P# l1 \4 ~6 o! ?" T3 Z  j
36.         isTrain: false,
    * {3 M2 c4 V3 h2 a! V5 P% m* f( _% z& X
37.         matrices: [mat],
    . p4 R, a7 S% s# J
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    " \$ k/ D' F; C! f/ X. y) I8 N7 q8 a
49.     let g = t.graphics;
    0 t+ a$ h' S+ x* n  O
50.     state.running = true;
    8 u- {) T& a3 d* I) d+ t% `" C. _! g
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    . Y  y  N: J' |% S; `+ W/ o
58.         if (v > k) return k;
    7 {! o0 Z/ H/ c8 A
59.         if (k < 0) return 0;
    6 f2 j) D' p" H- e9 }
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    ! m; @% U: x- F
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    ! B1 @# C& ^: m6 ~4 m
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
      o( c# a$ ^0 t
70.                     k = 0;
    . c) R3 F( H  z* B, `, @
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    2 v9 D; s- ~3 l4 k( `5 p
75.                 setComp(g, kk);
    
76.                 db(g);
    2 m# \* i  p2 F0 K
77.                 t.upload();
    9 T0 w! X* z, g* {/ g* {
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    ; |! q' e" Y* D& b
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    9 ]; U1 S( E3 S6 A. t' R( c
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    & I* z! J. k5 G) C$ S& R, j0 w  u
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    5 k, ], E' y' Z* c" O8 ~8 W
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    . I8 G$ G' p) ~& D/ `
90.     let th = new Thread(run, "qiehuan");
    4 r: I, j  d0 }, r: ]
91.     th.start();
    3 f' P9 u% i# l( F6 k# }# {
92. }
    
93. 
    % |& [* i! K8 L7 I+ Z/ u+ i3 e( z
94. function render(ctx, state, entity) {
    2 H9 S% a  m& j8 p6 i5 |
95.     state.f.tick();
      H1 a5 ]2 {* c7 m
96. }
    5 m! v- q1 D8 C6 a: l
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    ! V" u- r: ?3 n/ C# X4 D- E; \
100.     state.running = false;
     # Y% z# K, c& R, P$ S* G7 t. m( N
101.     state.f.close();
     
102. }
     
103. 
     
104. function setComp(g, value) {
     / Z& J3 R2 F1 q  k0 V* }
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

) s/ R* A0 a# f& U4 |写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
% q2 G% a3 b6 l0 ^& ]6 O1 f

顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
) |  z  L! e6 \4 ?" h0 o

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
; ~( l# o8 _" R1 _$ R' a9 Y全场最瞩目：晴纱是男娘[狗头保命]

! }; @, [  ]9 G* j+ w甚至双引号里面的自动加粗