JS LCD 切换示例分享

2 q! K( x+ Z) l' X; y' b这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   9 o* x; ?4 Z& v. Z5 X& ~
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   * I  {0 T4 @" k3 |
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   6 E& r* L( _4 G5 s4 O/ X
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    2 Z: w7 E- ^% Z' p6 Q6 G- k
12. }
    
13. 
    1 ?6 K( d" e" u* G/ |
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    7 a& N/ R& @  }8 H. B4 j! w
16.     g.fillRect(0, 0, 400, 400);
    ' d6 F/ ~  s, X: N7 F
17. }
    
18. 
    " W' D: Q7 Y" J, s9 N# p
19. db = (g) => {//上层绘制
    * L8 [: h; O" H+ O$ _- E" m
20.     g.setColor(Color.WHITE);
    $ K8 U3 a# l6 i8 B0 j& ]
21.     g.fillRect(0, 0, 400, 400);
    ( q1 C7 ]5 f. i2 N% Q* N2 U; n
22.     g.setColor(Color.RED);
    9 x" K4 J& a/ w: M, s" C6 O
23.     g.setFont(font0);
    9 N" V) W) L- [0 s7 y& x
24.     let str = "晴纱是男娘";
    ( w. G" {6 K7 t9 s- N
25.     let ww = 400;
    ' q% n# r# S7 N" ]
26.     let w = getW(str, font0);
    6 z! K9 v3 T( p
27.     g.drawString(str, ww / 2 - w / 2, 200);
    - J3 x3 j8 R. ^! o+ A5 S4 B
28. }
    ) D0 ?- ]$ J- I0 E
29. 
    5 j: o5 R) A3 @) g. G5 a' C
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    2 P! Q4 p3 R. b& o# d' j9 T, }, T. }
32. 
    
33. function create(ctx, state, entity) {
      h- u! {- N$ R, g) }
34.     let info = {
    
35.         ctx: ctx,
    , n& n# g* D8 [; Y
36.         isTrain: false,
    $ V. e/ O+ N* J5 N2 a' ?
37.         matrices: [mat],
      R' ~4 Z2 J: S
38.         texture: [400, 400],
    
39.         model: {
    : _+ z; l. \: H& @, \: K
40.             renderType: "light",
    3 `8 x9 L) I/ d* Y" h% \4 u* w% e
41.             size: [1, 1],
    # X8 \/ V, {1 S7 I* n: b8 K
42.             uvSize: [1, 1]
    
43.         }
    " ?9 s) B9 ~5 |, Y2 a
44.     }
    . f, D1 E- b$ |; K: ?1 r7 U3 R
45.     let f = new Face(info);
    
46.     state.f = f;
    2 X# Q% K" V; a# j. w5 v' K
47. 
    % i, Y1 ]5 _6 y5 a3 A
48.     let t = f.texture;
    - G# [0 z; M1 ~3 q6 }+ J# `9 L
49.     let g = t.graphics;
    ) `3 U/ J# w& |5 z
50.     state.running = true;
    : Z; z; ^( f9 y: |- c  x8 J
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    4 W! [( h4 T+ L8 F' k8 V
54.     let k = 0;
    / D+ G" b5 t, {
55.     let ti = Date.now();
    1 L, J" `2 x" R5 d$ O3 L$ c6 q
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    - a0 M8 K& v8 b
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    & f, q! R& ?" w- j
62.     run = () => {// 新线程
    - w8 G( o9 {/ b
63.         let id = Thread.currentThread().getId();
      y! }# p4 h# C
64.         print("Thread start:" + id);
    ! l) Z4 h1 [' V  s8 u  l* W
65.         while (state.running) {
    , M/ `/ C" U- M0 _2 t9 F
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    8 y0 _" S, N: Y
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    2 p4 Z; B! u5 z
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    " q) h* R3 i7 Y
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    ( q8 j: R' a* r( ?) C
81.                 rt = Date.now() - ti;
    , m* X9 n! ~1 ?6 ?) `
82.                 Thread.sleep(ck(rt - 1000 / fps));
    + u& T0 ]* x( {" h4 N
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    : s# T- X9 [) y& c! M. Q
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    + K4 i  Z+ V" J4 ^( i6 [& |
88.         print("Thread end:" + id);
    
89.     }
    " j, w! P7 h+ P. y/ K
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    1 W2 U- S# F- I: M, z: k/ \
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    $ S1 a: n& `* M) o; T3 l6 ]
97. 
    
98. function dispose(ctx, state, entity) {
    1 v/ Z8 v2 x! Y: A7 [+ L" M
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     7 a' u  O( P* ^1 o! y
102. }
     ' r+ S1 E  M' e0 _3 E
103. 
     ! S" N0 p' g( L, I$ z9 P# a( S
104. function setComp(g, value) {
     : b. m, C/ B  J. S$ q& j
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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

0 X0 u& R% c; y4 W/ @顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
0 P$ K' [( k1 n. u, I全场最瞩目：晴纱是男娘[狗头保命]

8 n% }+ ]6 b! R& N- f% k甚至双引号里面的自动加粗