JS LCD 切换示例分享

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

1. importPackage (java.lang);
   * c( c9 y/ |: W: H/ k
2. importPackage (java.awt);
   
3. 
   ) q" C! y' L2 h3 z) Q
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   6 m0 `. g: s' m2 J, u
7. 
   / ]; x4 \' E; f# z. E) b
8. function getW(str, font) {
   % V, f) o/ c9 L/ D  w2 J, K2 b
9.     let frc = Resources.getFontRenderContext();
   " z7 T7 j6 O' V& `
10.     bounds = font.getStringBounds(str, frc);
      \6 I9 @9 q, k; L$ J( v7 k
11.     return Math.ceil(bounds.getWidth());
    7 Y7 I) G0 W8 V4 S- d& z4 c7 e+ A
12. }
    0 T" o1 Z& e$ ?2 i/ M0 l
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    ' w. z8 u- D! u1 G. ^3 [! z$ {
17. }
    : ^/ K" u( ~3 k+ J$ c% u4 h# Z
18. 
    . o6 r  x  _* `! l! T% R" X1 k4 ]% L9 |
19. db = (g) => {//上层绘制
    ' H, v3 I; P9 B; b- S
20.     g.setColor(Color.WHITE);
    $ O5 S5 ~$ m/ L) }4 @  U
21.     g.fillRect(0, 0, 400, 400);
    ( d' P( U8 b' [4 y9 [- t1 ^
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    3 P# R; |% }" X$ h; R6 Q% @, p7 E
24.     let str = "晴纱是男娘";
    , i2 c2 N, \' n& @$ o6 H6 Z
25.     let ww = 400;
    8 J6 G/ o4 ]. O
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    / r" z! O. O: H
28. }
    
29. 
    
30. const mat = new Matrices();
    * N+ T' O8 l: W1 a
31. mat.translate(0, 0.5, 0);
    
32. 
    6 D3 z, `# L% D) ]$ e6 \
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    " W( F% Q4 ~: E, j' {2 Z8 a' K
39.         model: {
    
40.             renderType: "light",
    
41.             size: [1, 1],
    ! I4 D6 I5 Q' m* }
42.             uvSize: [1, 1]
    & z; J( \- d, _/ w/ _4 e9 ?7 _
43.         }
    
44.     }
    
45.     let f = new Face(info);
    + w8 H5 H+ |$ E
46.     state.f = f;
    & w/ L2 |4 E; G8 |
47. 
    
48.     let t = f.texture;
    " c1 U* w! u8 G
49.     let g = t.graphics;
    
50.     state.running = true;
    * L9 u) f5 C0 |, E! y, V3 [  _) `
51.     let fps = 24;
    
52.     da(g);//绘制底图
    7 U! g( v( p7 B) L3 r/ g" O
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    4 v$ A/ k2 b9 L$ B
56.     let rt = 0;
    6 A) e8 Y6 K& V/ D9 R
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    ! T, m& Z$ c' M9 b; @
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    6 }* M1 \5 V1 d
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    2 p. o/ ~& `% A0 K' s* E
72.                 setComp(g, 1);
    ( R) P( y; d/ p% y; N+ e7 g+ n
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    ! f& C) J" b; v  V# L% @# |2 j3 V
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    8 L, o' }' U8 l# I
79.                 ctx.setDebugInfo("k", k);
    . @" _, S/ \2 x" V' x1 D' z
80.                 ctx.setDebugInfo("sm", kk);
    . L1 H7 l5 l% N( T
81.                 rt = Date.now() - ti;
    & ?" I+ E  h' ^5 K
82.                 Thread.sleep(ck(rt - 1000 / fps));
    : ]. @  Z* H/ N! c" Z
83.                 ctx.setDebugInfo("error", 0)
    * {  W9 o) z" q- V3 Q- w
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    0 M' U, q* }3 z# V, T# y/ Q4 l* W
88.         print("Thread end:" + id);
    
89.     }
    8 ~& y2 Y3 e, e% k$ P! Q
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    2 ~5 G' T1 @  D% w
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    ! d6 X( w( i. c7 I4 `
96. }
    
97. 
    
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    4 W- o- v, k# f6 Z
100.     state.running = false;
     " _+ P2 T& ^. O% c2 Z
101.     state.f.close();
     
102. }
     
103. 
     : w- V& X  p9 G3 e( Q# j; i
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     7 [- s" X! P* i/ a8 f% v
106. }

复制代码

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

1 B- S7 R5 M# ~! J9 {
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

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

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

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