llbzow 的摸鱼日记 (づ￣ 3￣)づ

1
+---------------------- Web App (Capacitor) --------------------+
2
|                                                               |
3
|  [ Live2D WebGL Canvas ]                                      |
4
|          |                                                    |
5
|     (Frame Export)                                            |
6
|          v                                                    |
7
|  [ toDataURL() / WebGL ReadPixels ]                           |
8
|          |                                                    |
9
|     (220ms Throttled Bridge)                                  |
10
|          v                                                    |
11
+----------|----------------------------------------------------+
12
           |  (Base64 Image Bytes via Bridge)
13
           v
14
+---------------------- Native Android -------------------------+
15
|                                                               |
16
|  [ Presence Store (Cache Image) ]                             |
17
|          |                                                    |
18
|     (System Trigger Draw)                                     |
19
|          v                                                    |
20
|  [ WallpaperService ]                                         |
21
|          |                                                    |
22
|          +---> Draw Image + Render Canvas Animations (30fps)  |
23
|                                                               |
24
+---------------------------------------------------------------+

1
const gl = canvas.getContext("webgl", {
2
  preserveDrawingBuffer: true // 关键：允许导出 WebGL 内容
3
});

1
// 220ms 节流锁，保证一秒最多传输 4~5 帧关键关键帧
2
let lastSyncTime = 0;
3
const SYNC_INTERVAL = 220;
4

5
function onLive2DRenderFrame() {
6
  const now = Date.now();
7
  if (now - lastSyncTime >= SYNC_INTERVAL) {
8
    lastSyncTime = now;
9

10
    // 导出当前 Canvas 为 base64
11
    const dataUrl = live2dCanvas.toDataURL("image/png");
12

13
    // 调用 Capacitor Native 插件将帧数据传递给原生系统
14
    Capacitor.Plugins.PresencePlugin.setWallpaperFrame({ dataUrl });
15
  }
16
}

1
public class DemoWallpaperService extends WallpaperService {
2
    @Override
3
    public Engine onCreateEngine() {
4
        return new WallpaperEngine();
5
    }
6

7
    private class WallpaperEngine extends Engine {
8
        private final Handler mHandler = new Handler(Looper.getMainLooper());
9
        private final Runnable mDrawRunnable = this::drawFrame;
10
        private boolean mVisible = false;
11
        private Bitmap mCurrentFrameBitmap = null;
12

13
        // 桌面刷新率节流锁（30fps，每 33ms 刷新一次）
14
        private static final int FRAME_DURATION = 33;
15

16
        // 监听来自 Web 侧传入的 Bitmap 更新
17
        private final FrameUpdateListener mListener = (bitmap) -> {
18
            mCurrentFrameBitmap = bitmap;
19
        };
20

21
        @Override
22
        public void onVisibilityChanged(boolean visible) {
23
            mVisible = visible;
24
            if (visible) {
25
                mHandler.post(mDrawRunnable);
26
            } else {
27
                mHandler.removeCallbacks(mDrawRunnable);
28
            }
29
        }
30

31
        private void drawFrame() {
32
            if (!mVisible) return;
33

34
            SurfaceHolder holder = getSurfaceHolder();
35
            Canvas canvas = null;
36
            try {
37
                canvas = holder.lockCanvas();
38
                if (canvas != null) {
39
                    // 1. 清屏（绘制纯色背景或桌面壁纸）
40
                    canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
41
                    canvas.drawColor(Color.parseColor("#1a1a2e")); // 暗色背景
42

43
                    // 2. 绘制 WebGL 同步过来的角色镜像帧
44
                    if (mCurrentFrameBitmap != null) {
45
                        drawScaledCharacter(canvas, mCurrentFrameBitmap);
46
                    }
47

48
                    // 3. 在原生层叠加额外的视觉动效（如呼吸摇摆、粒子脉冲等）
49
                    drawOverlayAnimations(canvas);
50
                }
51
            } finally {
52
                if (canvas != null) {
53
                    holder.unlockCanvasAndPost(canvas);
54
                }
55
            }
56

57
            // 调度下一次绘制
58
            mHandler.removeCallbacks(mDrawRunnable);
59
            mHandler.postDelayed(mDrawRunnable, FRAME_DURATION);
60
        }
61

62
        // 缩放角色比例以适应横竖屏显示
63
        private void drawScaledCharacter(Canvas canvas, Bitmap bitmap) {
64
            int viewWidth = canvas.getWidth();
65
            int viewHeight = canvas.getHeight();
66

67
            float scale = (float) viewHeight / bitmap.getHeight();
68
            int destWidth = (int) (bitmap.getWidth() * scale);
69

70
            int left = (viewWidth - destWidth) / 2;
71
            Rect destRect = new Rect(left, 0, left + destWidth, viewHeight);
72

73
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
74
            canvas.drawBitmap(bitmap, null, destRect, paint);
75
        }
76

77
        private void drawOverlayAnimations(Canvas canvas) {
78
            // 在这里可以使用原生 Java 绘制呼吸波纹、交互气泡等，提高动画连贯性
79
        }
80
    }
81
}