pref: 针对 HiDPI 屏幕捕获的优化。

src/App.tsx

@@ -44,7 +44,7 @@ function App() {
 
   // listen to led_colors_changed event
   createEffect(() => {
-    const unlisten = listen<Array<string>>('led_colors_changed', (event) => {
+    const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
       const colors = event.payload;
 
       setLedStripStore({

src/components/led-strip-part.tsx

@@ -1,5 +1,4 @@
 import { invoke } from '@tauri-apps/api';
-import { listen } from '@tauri-apps/api/event';
 import {
   Component,
   createEffect,
@@ -8,7 +7,6 @@ import {
   createSignal,
   For,
   JSX,
-  onCleanup,
   splitProps,
   useContext,
 } from 'solid-js';
@@ -77,9 +75,15 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
       return;
     }
 
-    const offset = mapper.pos;
+    const offset = mapper.pos * 3;
+
+    const colors = new Array(localProps.config.len).fill(null).map((_, i) => {
+      const index = offset + i * 3;
+      return `rgb(${ledStripStore.colors[index]}, ${ledStripStore.colors[index + 1]}, ${
+        ledStripStore.colors[index + 2]
+      })`;
+    });
 
-    const colors = ledStripStore.colors.slice(offset, offset + localProps.config.len);
     setColors(colors);
   });
 

src/components/led-strip-parts-sorter.tsx

@@ -115,12 +115,21 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
   // update fullLeds
   createEffect(() => {
     const fullLeds = new Array(ledStripStore.totalLedCount).fill(null);
+    const colors = ledStripStore.colors;
 
     const { start, end, pos } = props.mapper;
     const isForward = start < end;
     const step = isForward ? 1 : -1;
     for (let i = start, j = pos; i !== end; i += step, j++) {
-      fullLeds[i] = ledStripStore.colors[j];
+      let c1 = `rgb(${Math.floor(colors[j * 3] * 0.8)}, ${Math.floor(
+        colors[j * 3 + 1] * 0.8,
+      )}, ${Math.floor(colors[j * 3 + 2] * 0.8)})`;
+      let c2 = `rgb(${Math.min(Math.floor(colors[j * 3] * 1.2), 255)}, ${Math.min(
+        Math.floor(colors[j * 3 + 1] * 1.2),
+        255,
+      )}, ${Math.min(Math.floor(colors[j * 3 + 2] * 1.2), 255)})`;
+
+      fullLeds[i] = `linear-gradient(70deg, ${c1} 10%, ${c2})`;
     }
 
     setFullLeds(fullLeds);

src/stores/led-strip.store.tsx

@@ -4,7 +4,7 @@ import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config'
 export const [ledStripStore, setLedStripStore] = createStore({
   strips: new Array<LedStripConfig>(),
   mappers: new Array<LedStripPixelMapper>(),
-  colors: new Array<string>(),
+  colors: new Uint8ClampedArray(),
   sortedColors: new Uint8ClampedArray(),
   get totalLedCount() {
     return Math.max(0, ...ledStripStore.mappers.map((m) => Math.max(m.start, m.end)));