JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   , L3 S! L0 @0 U# Q  G* S8 K
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   0 Q# c' n. D  a& T) O; H
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   + W0 q. n5 u: t* v; w9 |
7. 
   
8. function getW(str, font) {
   4 V) Y( V1 N2 r' z6 Q+ j
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    # z- Z/ |* o' y& `9 g( K
11.     return Math.ceil(bounds.getWidth());
    * X8 e6 H( K2 h4 h4 Z6 J
12. }
    * W: v3 ?% _" [4 {. z
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    & p; c- S; s4 I7 l
16.     g.fillRect(0, 0, 400, 400);
    8 l& Q' Q' Y$ _: Z. R' S
17. }
    4 D, ?; n2 x, M' H9 t% O+ u8 u
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    # p1 Z' K$ O0 \! L( V9 _
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    3 `) p& Q6 U! e! B5 p, b
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    0 j6 Y  G" D. H1 Y( \. w. k6 B
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    0 O" c8 L; d; G, ?) _, s
34.     let info = {
    
35.         ctx: ctx,
    6 E. g% n: j' v+ j& M" J' N8 c7 |( {1 U7 O1 i
36.         isTrain: false,
    ! W0 r+ x! z2 I5 O
37.         matrices: [mat],
    
38.         texture: [400, 400],
    
39.         model: {
    
40.             renderType: "light",
    , ?; }4 H" C' ~- v/ q/ A
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    / O9 I5 F5 E4 a# J; \3 B4 {  S8 Y
43.         }
    2 @- X8 h% A, K4 u! q
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    3 e. k3 y9 p+ X. H
49.     let g = t.graphics;
    
50.     state.running = true;
    . j+ N8 ]: n4 O4 h
51.     let fps = 24;
    
52.     da(g);//绘制底图
      I( D4 e# C/ W. c
53.     t.upload();
    
54.     let k = 0;
    8 J% D' q" n6 O# G
55.     let ti = Date.now();
    
56.     let rt = 0;
    - T' f! {4 i& Z
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    # a: Z/ s3 I8 ]
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    % V1 J9 B* f& }; n& o; e1 ?% d' u
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    . Y' W0 k. l5 f+ v5 k
65.         while (state.running) {
    2 G% G4 i  ^% L* {0 U9 S- x6 s
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    ' @$ c1 v* v+ ^- R: `. ~
70.                     k = 0;
    ' ~' e" q: U+ ]% h8 }- H/ X7 h, o
71.                 }
    
72.                 setComp(g, 1);
    
73.                 da(g);
    + }/ \- N$ Z, B6 ?/ t% r
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
      e& l/ o* R  N" P8 U/ E; h& u
77.                 t.upload();
    % k: b+ U0 O- y) {* `/ L
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    : E1 \/ t% D0 }9 v5 P7 c5 [
79.                 ctx.setDebugInfo("k", k);
    2 L- v4 A% K% P# l  V# I) r
80.                 ctx.setDebugInfo("sm", kk);
    , o! g/ w# f5 q& W8 v& B3 Z- w, X
81.                 rt = Date.now() - ti;
    0 m9 o  L2 d% E: y: [& f6 b
82.                 Thread.sleep(ck(rt - 1000 / fps));
      S" Q% M/ w" @) ~, r
83.                 ctx.setDebugInfo("error", 0)
    : h2 z$ p( Z5 {: K& u6 t
84.             } catch (e) {
    / V% Z1 d, _$ F# X4 j. ~4 C/ Y
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    & T; S- \. l  _7 z& o6 C& x& |
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    5 p" t9 O+ ^/ X  L
90.     let th = new Thread(run, "qiehuan");
    . y2 c' A' f+ A' Z
91.     th.start();
    
92. }
    
93. 
      Y6 E$ K7 U4 L; C; y. {7 J7 e
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    - g( k# u7 J1 c+ i8 P! _, n
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     9 a: d% a4 y; I
102. }
     / z/ P1 ]( c/ [9 y
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     % k: g! V4 g$ M. s  M
106. }

复制代码

写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
3 w) X3 G- h6 u; H+ x; N) Z
9 q/ f: ~0 d& q8 [7 \
4 |; b' A. W' O* E+ a- d顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
8 y/ Q* D6 s- D9 Z/ C$ ~

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
( Z4 b  F3 m5 |( Z* K6 g

Hobbytimeblank 发表于 2024-11-16 20:38
全场最瞩目：晴纱是男娘[狗头保命]

甚至双引号里面的自动加粗