JS LCD 切换示例分享

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

1. importPackage (java.lang);
   ! D) J# A8 S8 \$ ^
2. importPackage (java.awt);
   / W9 n% S+ q) i# _  x
3. 
   9 Y/ y; a3 X  w
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   ) H  V0 N$ O( o0 x) K+ W
5. 
   
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   / l- @0 W" ?/ K  S1 N
9.     let frc = Resources.getFontRenderContext();
   " f1 Q8 X7 v- o  h. _+ U& R" ?6 Z7 o
10.     bounds = font.getStringBounds(str, frc);
    3 ^5 f$ s: e$ A! t  c. s
11.     return Math.ceil(bounds.getWidth());
    ' M& H7 o& g' G; b0 D' v  S3 O: p
12. }
    : ]1 e: Y* k3 s9 \$ T
13. 
    1 R% ]6 ?) R. ?2 H% ]7 [: V3 _2 \! N" B
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    9 @& H9 A% ]- w3 o
16.     g.fillRect(0, 0, 400, 400);
    ' L5 L! x3 n) y* q
17. }
    
18. 
    
19. db = (g) => {//上层绘制
    ) L5 F$ F+ m8 K
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    . q% D2 r6 q0 o
23.     g.setFont(font0);
    8 [1 A3 x2 X; z; y* X
24.     let str = "晴纱是男娘";
    ! c$ Y8 W. R# I' J
25.     let ww = 400;
    ' y- J; J0 ?/ i1 [
26.     let w = getW(str, font0);
    5 r' k/ ^. H% ?# Q
27.     g.drawString(str, ww / 2 - w / 2, 200);
    1 [8 o& q( ~& g+ k1 Y
28. }
    
29. 
    
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    ( T8 B9 f) }. |- F- [
32. 
    2 x% X* _5 o& T$ O9 `; \/ z
33. function create(ctx, state, entity) {
    
34.     let info = {
    5 C8 P, @0 F4 X; G7 c5 s! B
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
    2 m) U8 }$ I6 p! \0 s) W, ^  X* _3 ~
39.         model: {
    
40.             renderType: "light",
    : e, H: M9 z' X
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    ( I0 ~7 p1 ~: C6 ^' p1 f
44.     }
    4 W1 p8 s5 h# f& k* \& K  z; x1 d
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    1 B$ `- `/ q: H( S5 Q# k
48.     let t = f.texture;
    
49.     let g = t.graphics;
    3 W( b) i9 F9 L3 h/ K8 M4 K
50.     state.running = true;
    2 v9 W+ ]+ K* H; [2 V1 A6 |
51.     let fps = 24;
    + {& e+ S; e9 ^$ n9 c7 v
52.     da(g);//绘制底图
    
53.     t.upload();
    ) d5 @; [; @. l) E$ G+ z
54.     let k = 0;
    3 h! A/ L3 ~, {
55.     let ti = Date.now();
    
56.     let rt = 0;
    
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.     }
    
62.     run = () => {// 新线程
    
63.         let id = Thread.currentThread().getId();
    : F  d+ r; f1 ^8 l6 D: `' ~- Z
64.         print("Thread start:" + id);
    9 x2 [. q, ]0 D# V( w* T) l
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    6 ?* C( O/ V  }6 Z; \- A- x. f
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    
71.                 }
    $ y( [1 }- a2 R' Z" R: v
72.                 setComp(g, 1);
    $ H3 j9 }3 j( j( z4 m
73.                 da(g);
    ! B" ^7 X$ P. g1 A* i5 d, r; s  b
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    2 b' m$ R$ D  m0 D* ?) z9 E
77.                 t.upload();
    # J5 [- r6 f0 z9 i. E
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    ( j/ F$ o  X  a
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    . V& b$ Q6 P  N/ M+ W- I
83.                 ctx.setDebugInfo("error", 0)
    * K0 q7 c) K7 E2 W
84.             } catch (e) {
    ! k' |. u$ O% {- K# U4 M2 C
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    / ^8 Y0 D+ j: \$ _$ N$ J5 ?
88.         print("Thread end:" + id);
      ^% n8 `: v2 V# Z2 E0 F: v
89.     }
    . L, N& b" ^, X& |9 K
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    - f6 f5 G4 s% o9 t1 Q; W
93. 
    
94. function render(ctx, state, entity) {
    : [* K& b  k+ N6 b' M6 Y) W# c
95.     state.f.tick();
    , t8 S" n% }% B" n- L: w
96. }
    2 N* `* {3 U. W- Y' I( Z5 P
97. 
    ; {/ k: |* P9 }& F0 r
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     % q1 z* I* u9 e4 s2 x" ]
101.     state.f.close();
     
102. }
     3 [& N( I( \1 b2 `
103. 
     , ~1 v- G2 {- P! U- Z, U
104. function setComp(g, value) {
     / D* T% U+ X( |- d+ I* ~' f
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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


! s. P8 J! l- g4 `( H顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
9 V7 h% d5 h- L# n9 R+ }4 I7 k

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
4 p4 `: F$ J' z3 K3 F( |& A

Hobbytimeblank 发表于 2024-11-16 20:38
: i" k- J5 s. }! a5 d+ b全场最瞩目：晴纱是男娘[狗头保命]

# b" G3 k/ b! s- n甚至双引号里面的自动加粗