JS LCD 切换示例分享

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

1. importPackage (java.lang);
   6 K" q. }0 t1 I: }; k9 P7 `& i; K
2. importPackage (java.awt);
   0 w# M1 O0 `% P2 U
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   : Y0 T/ o9 S" f5 G- r
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   & a( D# B* ~+ H9 E# U/ R( t, C
8. function getW(str, font) {
   % n$ _8 R9 B. ~! O
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    * c( v6 g( Z6 h7 N! I
12. }
    / }# [8 p( s+ G+ ?; g+ d% ~3 X$ l
13. 
    7 ?  E3 @, |' q5 Y7 l
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    ) V& S) v$ |4 s1 P" {0 o2 E
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    
18. 
    / j4 D5 a9 R8 A1 |5 x5 I
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    8 \8 i; N$ U7 p1 B) O# Z& c
24.     let str = "晴纱是男娘";
    " O3 s+ M4 j% o8 |2 s& {
25.     let ww = 400;
    & |$ N- {  p! K% F7 ~  ]- R
26.     let w = getW(str, font0);
    + a+ S" R; o6 V( U- ?# {
27.     g.drawString(str, ww / 2 - w / 2, 200);
    6 {: b) \7 h, {9 |. R& E+ S4 L
28. }
    
29. 
    + K& t& ^  |* M, d, B, I. d0 J
30. const mat = new Matrices();
    ; v  i" ^2 z+ H
31. mat.translate(0, 0.5, 0);
    / p; j7 l# j# ^8 g& I9 h. t4 B( X7 b
32. 
    
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    ! a- z7 r9 `4 X
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    * M0 P( }+ e( T  [$ q  T9 C( e) m% E
39.         model: {
    ; X5 R+ [, a% t0 y! }7 V8 i
40.             renderType: "light",
    ' Z2 ^1 Q% {; S+ h
41.             size: [1, 1],
    " f; D2 q! \1 u$ _1 W/ B0 a5 _
42.             uvSize: [1, 1]
    $ f* A( B" B. e& h6 b
43.         }
    
44.     }
    4 G1 X  H) Q- V! T1 C+ ]
45.     let f = new Face(info);
    ! n" J3 {2 [& F5 Z4 V$ a. i5 E
46.     state.f = f;
    1 q9 U! D; z# ]8 L
47. 
    
48.     let t = f.texture;
    
49.     let g = t.graphics;
    ! L% i% J$ W# W1 R/ G
50.     state.running = true;
    
51.     let fps = 24;
    , r/ S: ]# G8 U, H/ G5 l4 x0 E
52.     da(g);//绘制底图
    
53.     t.upload();
    : Y9 h2 K0 S; n
54.     let k = 0;
    8 D9 b* _. I0 p/ Y+ }; E/ a0 f# y
55.     let ti = Date.now();
    
56.     let rt = 0;
    : G2 [; g$ S0 x  B
57.     smooth = (k, v) => {// 平滑变化
    , |+ c  f* z0 Q, p( [
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    ( g; N, u4 x  O8 v2 d
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    / L9 q. c$ H+ j9 V4 d* R. j* j6 m- S
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    " M  j/ q- V3 }; i
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    & c& o& E  |+ Y: |2 H% s
68.                 ti = Date.now();
    6 _, ~( G6 F6 t/ u
69.                 if (k > 1.5) {
    $ i  |  Z8 \8 Z/ r* g6 T: l
70.                     k = 0;
    ! w& J- W6 A' S
71.                 }
    
72.                 setComp(g, 1);
    0 \/ H0 X4 V9 J# d9 O) s" E
73.                 da(g);
    # C- s% ~+ ?( J
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    - Z- ~* J2 E) g0 ?6 ^# R5 {' D
76.                 db(g);
    
77.                 t.upload();
    8 @2 C" {8 x7 A2 o0 Z: u7 B
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    ) Q0 `% e7 T3 b: t8 |
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    7 }" w8 n% N2 ?7 `  Z1 {- j: p7 @  |% F
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    & }! [3 \' K  B: r$ b2 t
88.         print("Thread end:" + id);
    ; {4 c' [; w8 r# `" R, E" s
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    * Q0 k9 l, L% E+ n  e
91.     th.start();
    % A$ y& R0 d* K5 H8 F6 e
92. }
    ; q: Y5 j3 E" A: I. E8 O
93. 
    ' t6 D1 c  a4 f# X4 w
94. function render(ctx, state, entity) {
    6 u  A0 o* b9 {; B  v: D  U# X1 \
95.     state.f.tick();
    
96. }
    
97. 
    4 z8 b) v6 F: Z& g
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     ( m0 n) m+ s3 x8 [! Q
102. }
     
103. 
     ( }1 c  b9 f9 i* s3 y% j. L
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     8 N% P0 t& A2 i  ?- u9 q
106. }

复制代码

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

% I/ p% _3 q, L; K
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
! d$ q' M' c" C  r

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
! L4 r5 V; |& P) _

Hobbytimeblank 发表于 2024-11-16 20:38
# h+ h" L9 N* n4 H4 [# f全场最瞩目：晴纱是男娘[狗头保命]

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