JS LCD 切换示例分享

$ o9 c/ b- u- o8 R& p这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
" k/ |: a3 S: u. |; H

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   3 a6 _4 l, M# |3 S7 e
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   + l2 E3 q! L& I5 y
7. 
   
8. function getW(str, font) {
   3 O% E$ {; {* J+ D7 i( G7 U( N
9.     let frc = Resources.getFontRenderContext();
   6 G  O% Y& f  R* l# i! Z
10.     bounds = font.getStringBounds(str, frc);
    3 Q, f  ^: T5 V4 ^' K0 c
11.     return Math.ceil(bounds.getWidth());
    ) L! K. q* I+ y! C! p
12. }
    8 y7 N  g, e- L
13. 
    
14. da = (g) => {//底图绘制
    ' u- W7 E7 h3 b$ r" E: X
15.     g.setColor(Color.BLACK);
    7 B0 c' o5 A/ _  x) D8 a. [" D1 e
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    & d& k; Q5 c7 f( J. g
19. db = (g) => {//上层绘制
    3 l- }5 O* k  C6 T
20.     g.setColor(Color.WHITE);
    * n- t$ |: Z1 g& C) x5 r8 K
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    * _: q  T. |! L/ {9 w$ w
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    ' J( @% P' _" Z* q
25.     let ww = 400;
    4 X7 h" Q) q- B; y( w2 U
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    5 J  U  N) s5 K7 k! O4 H$ M
28. }
    0 X  Z& E  t8 U) f  h6 x' O
29. 
    0 C( h& }7 z/ R
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    ! X. [0 x9 z" }# J, h& \
37.         matrices: [mat],
    
38.         texture: [400, 400],
    2 y' b2 q0 V" o$ W/ k0 E7 [9 Z% q
39.         model: {
    7 g) d' r# k) j4 u% a/ W8 G& q, N" \
40.             renderType: "light",
    
41.             size: [1, 1],
    1 q' V' k5 F: @" l, x; B# w. M( W
42.             uvSize: [1, 1]
    : J+ {- @/ w  T- U+ f8 J/ k
43.         }
    : b5 w, d& |# [7 l0 u
44.     }
    2 m- d3 ?% ^. g( R2 _, x
45.     let f = new Face(info);
    
46.     state.f = f;
    3 w" g' {# x  P, R8 v& q; f
47. 
    
48.     let t = f.texture;
    $ e6 b; J0 u; U
49.     let g = t.graphics;
    : ?/ z- l: L& l7 @5 i& ^8 q
50.     state.running = true;
    + r1 S7 q6 U% ^8 N$ h
51.     let fps = 24;
    
52.     da(g);//绘制底图
    4 @2 P3 A# F" H! s# U3 {, M
53.     t.upload();
    
54.     let k = 0;
    8 V0 c- I% n& w  c/ F
55.     let ti = Date.now();
    $ n: t# h; _' u  d: E2 }
56.     let rt = 0;
    " ]# g) M- w0 c/ ?
57.     smooth = (k, v) => {// 平滑变化
    ) q. B/ G! M. [( v# m2 y, g
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    0 Q! t4 J0 l, ~! K
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    5 w& y& x0 j" I
61.     }
    4 \, X, Q4 `+ P& @; x
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    ! }& z  G: s) a- @* z! [, l
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    ; x3 o* q! x& R' i$ k( F9 O0 t; e: v
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    , y/ f! H0 V' s  Z8 g
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    , e8 h( `' ]5 W5 o9 \
72.                 setComp(g, 1);
    8 t' K2 r% L0 M/ J% G5 o2 u
73.                 da(g);
    % R3 {1 S. T+ h- q8 p3 p+ [' \
74.                 let kk = smooth(1, k);//平滑切换透明度
    4 k* N2 \% e2 w; e" ^; Q
75.                 setComp(g, kk);
    + r4 s% a5 i7 q/ v2 L; `4 L# C& Y
76.                 db(g);
    ) A1 i+ m+ \: a( V5 w/ D
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    ! S( O. M* f7 n
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    $ \1 |# e1 _. I# w+ v# c% s
83.                 ctx.setDebugInfo("error", 0)
    . l5 N! H: n8 n. X/ _9 ^5 V; J& r) a
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    8 {9 @! R1 \. G( h
87.         }
    
88.         print("Thread end:" + id);
    6 L+ A0 D- Q5 x
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
      J2 d9 S# i  \; L
92. }
    . c7 E: f4 ?: P' `
93. 
    
94. function render(ctx, state, entity) {
    ' T' ^1 D. ]4 G3 [2 S. F: c
95.     state.f.tick();
    
96. }
    4 I& [5 J# Y. q# X6 V( @" A* X6 H3 B
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     ; ^) Y, u% v9 D! H( R$ g4 ^
102. }
     
103. 
     / o! \$ P: ~# r' I1 X2 N
104. function setComp(g, value) {
     ' b. \! T& V/ e6 h7 u
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     ) T# [7 t, `% l! i
106. }

复制代码

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


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
0 A0 E5 |* }7 c8 b) H* Z& L全场最瞩目：晴纱是男娘[狗头保命]

% {0 H, z$ A, u. P' r甚至双引号里面的自动加粗