JS LCD 切换示例分享

* m* L$ Z& m! a$ j" w这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
# n' \) q* {  d3 x6 q- b0 A

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   ( L5 s% y3 ]' F/ z, I& x" N
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   . F9 U( J! y4 J
5. 
   3 r7 Q8 J4 q% ~9 x4 r; J
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   - r  R+ y2 {# f8 K0 n
7. 
   5 f. _2 i% S+ X. F6 ?
8. function getW(str, font) {
   & e. I; x& A1 i$ {9 I6 r- H, k6 A) }
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    6 ]1 N  A; M+ z
11.     return Math.ceil(bounds.getWidth());
    
12. }
    
13. 
    " s" W9 k: O- C  q
14. da = (g) => {//底图绘制
    # q# {! ~- T5 D3 V2 r8 H
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    ! i' \' x  y8 d8 @
17. }
    
18. 
    1 g. M% a7 D3 M5 y. [) a
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
    / e; K, V+ F1 L" c3 |% ]
21.     g.fillRect(0, 0, 400, 400);
    9 k0 c6 W" p% k- c
22.     g.setColor(Color.RED);
    8 P5 S9 I& D1 A5 g. }
23.     g.setFont(font0);
    
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    1 {" ~! b2 G, p  Z: m2 l" O
29. 
    . u& q# [, j+ V1 `  [
30. const mat = new Matrices();
    & W% Z2 a( N0 N0 B+ S9 r" E) U( J1 \
31. mat.translate(0, 0.5, 0);
    
32. 
    : S8 ~6 ^( _6 P& @3 g7 z
33. function create(ctx, state, entity) {
    
34.     let info = {
    
35.         ctx: ctx,
    
36.         isTrain: false,
    5 s  u) H! U* L- I
37.         matrices: [mat],
    9 K, v+ W) t9 B0 q0 \
38.         texture: [400, 400],
    & X& J  g0 G/ ^. R
39.         model: {
    
40.             renderType: "light",
    # j9 G$ O- U! J, t
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    
43.         }
    4 S  [" u5 T/ Z& O9 E3 L; V) [
44.     }
    5 k! Q) F2 j/ v8 T0 q% U7 T
45.     let f = new Face(info);
    6 g& |" k; s& n2 L- ~/ n$ N8 r
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    8 P, C) X5 r* F5 F2 `
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    / U  `- A+ c3 q
52.     da(g);//绘制底图
      t2 Q& }" z0 \5 h4 F
53.     t.upload();
    
54.     let k = 0;
    , Y4 ~1 j8 f0 p
55.     let ti = Date.now();
    
56.     let rt = 0;
    
57.     smooth = (k, v) => {// 平滑变化
    " c7 T  o  l5 I+ ?) I7 b1 _
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.     }
      K" A( d$ V) T  n
62.     run = () => {// 新线程
      {* L' K7 g2 q3 D9 ]
63.         let id = Thread.currentThread().getId();
    2 A8 q' U* c4 Y. N! H- S
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    1 i% g2 ~* M( J% |! u& o
66.             try {
    ' J3 ?( @! u( E7 k9 _+ i) G3 m
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ; m+ U, A  b3 Q+ G' Q9 S, \
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    
70.                     k = 0;
    % a, ~" h- i1 z+ C
71.                 }
    3 x/ [1 a( h( U- m
72.                 setComp(g, 1);
    3 T  P* ]  @8 _. }* x
73.                 da(g);
    9 h; R, [! k6 o8 ]0 G, s) G
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    , Q1 @; o7 k; W! J) K! }* @! ]
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
      R0 N) c; k7 o9 X
80.                 ctx.setDebugInfo("sm", kk);
    6 O# y+ @. ]( h/ E; y
81.                 rt = Date.now() - ti;
    0 P$ T5 e/ v$ B7 h5 C+ P; [
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    . m4 ]9 B/ A3 G) S
84.             } catch (e) {
    ' L/ |) J# `" Z4 F5 k8 C6 ?2 q
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    ' J% ]5 \! \' W" c5 \& ?: c" X
88.         print("Thread end:" + id);
    
89.     }
    4 k3 b: Q& n2 J) G  {
90.     let th = new Thread(run, "qiehuan");
    * S+ g: C* B" _8 ^7 R% w9 ^! U# L
91.     th.start();
      @% e* D9 @' r# e/ K% w' I0 [2 Q5 {
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    ! H/ P  W! F+ v5 w- q1 S
95.     state.f.tick();
    5 u0 B" k- |5 x* x" `, W* @
96. }
      i7 @: w1 u  t9 C9 Y5 ~
97. 
    ' f! E$ R" s- S; `2 i$ ]  ]
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    
100.     state.running = false;
     
101.     state.f.close();
     : ?6 Z8 f' @* A* E, V
102. }
     & y" E9 @# P( Q0 D6 Q% A/ P% N
103. 
     - L6 k3 A, G$ M  v9 [. M- ?
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

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


顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
! o% b. j; ]( z3 k- S: B) A

Hobbytimeblank 发表于 2024-11-16 20:38
) V3 r* ^# R, I4 \9 l1 `+ A; p全场最瞩目：晴纱是男娘[狗头保命]

  F& x+ `8 \  I0 U' D甚至双引号里面的自动加粗