JS LCD 切换示例分享

3 U/ K* }1 x; P$ o& z2 K这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
$ K& z9 P! ^: A% F

1. importPackage (java.lang);
   7 l0 W9 z) O& K
2. importPackage (java.awt);
   . {& b( F/ B! [, k, C6 U9 g7 W
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   $ m1 p' z9 d; B
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   $ |1 |6 _$ H" l7 V; P
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    1 W+ e' O' K; l3 L5 K# P
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    5 }! h0 L" a8 W
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    8 I% v! b) L2 V
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    9 E6 l5 o. j1 Q8 H* u. h/ @
18. 
    + @) P* L$ P: _, c. e/ p5 m
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    5 F1 ~7 i2 n$ h4 G% F  r
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    ) \* T: ]0 `4 |) I
23.     g.setFont(font0);
    ! u; G; n( b" {/ t  K
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    * g# D4 U5 {' b  v
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    
30. const mat = new Matrices();
    " o) k1 q, }* d; @, y& s# i
31. mat.translate(0, 0.5, 0);
    
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    , d( r' w7 S7 A+ q* e
35.         ctx: ctx,
    
36.         isTrain: false,
    % z/ ], _$ r! D/ s; v7 P# y2 G
37.         matrices: [mat],
    
38.         texture: [400, 400],
    7 ~9 b8 g# f; u; ^6 D$ e
39.         model: {
    $ Z( B/ ~: c3 G
40.             renderType: "light",
    
41.             size: [1, 1],
      N& K; [6 r6 m
42.             uvSize: [1, 1]
    
43.         }
    
44.     }
    6 B4 c+ I" }, v0 E
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    # r8 ^+ H# w( Y
49.     let g = t.graphics;
    
50.     state.running = true;
    3 T+ y% u! A: o' v) g3 }9 ?3 }' J
51.     let fps = 24;
    8 Z' k/ S+ H8 a
52.     da(g);//绘制底图
    
53.     t.upload();
    + ?0 `, M2 W( a/ Q3 Q9 f
54.     let k = 0;
    6 X1 L; K6 E2 Y  e( F. W8 }
55.     let ti = Date.now();
    
56.     let rt = 0;
    8 w3 D+ E9 b6 K+ B
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    1 t9 }" J' U4 x9 Q. H( t; o, M) \. @
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    0 g7 V$ C- a. E# b: V2 j2 y
61.     }
    
62.     run = () => {// 新线程
    , S& ?. E: k9 w& K/ F8 G
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    + G) ~6 d# e$ K' q# ]" p+ K0 s$ ]
65.         while (state.running) {
    
66.             try {
    + M  b( c$ x6 H8 H* w) K
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    , k3 F- d# S0 e' |# @7 v
72.                 setComp(g, 1);
    
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    - R0 {% g+ G1 s: v: q
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    : k$ D3 ?2 D8 u
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    3 i) r; K* m5 H/ E( ~; }) X  z; O- f! [' y
81.                 rt = Date.now() - ti;
    / d/ L4 B: d5 C+ M; x
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    8 a4 [+ q3 a: I1 ]
84.             } catch (e) {
      [* V+ b4 `  X3 Q+ c
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    4 f9 d8 c7 ?& _
88.         print("Thread end:" + id);
    2 H( P  x" o/ F# f/ {$ i0 E$ Q
89.     }
    # Q3 n; I' p/ y
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    
93. 
    6 z/ k+ j2 i8 U& C: t# [3 U
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    7 V1 p& q% N* l1 M
97. 
    3 O- Q  x+ u) n" A7 p: M8 Q9 v
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     1 p8 q8 a( V" O- J
101.     state.f.close();
     
102. }
     8 R7 u1 L4 i+ n6 Q1 ]3 t
103. 
     
104. function setComp(g, value) {
     $ s6 g; l* v. ?$ M9 {! M9 _: ~
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

  o# i" c! w" @" S$ Q/ B1 D写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
6 Z' }: d1 A+ K/ U/ F
3 s  F# o; V" w7 o2 K& w6 D: v3 {
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
2 I8 E1 j$ K, [1 \' C1 ^

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

* v0 Y4 A+ V  I- \( R) i甚至双引号里面的自动加粗