feat:extract FastBlur Function

doric-demo/src/ImageProcessorDemo.tsx

@@ -14,79 +14,12 @@ import {
 } from "doric";
 import { colors } from "./utils";
 
-function pixelToRGBA(pixel: number) {
+function fastBlur(
-  const r = pixel & 0xff;
+  pixels: Uint32Array | Array<number>,
-  const g = (pixel >> 8) & 0xff;
+  w: number,
-  const b = (pixel >> 16) & 0xff;
+  h: number,
-  const a = (pixel >> 24) & 0xff;
+  radius: number
-  return { r, g, b, a };
+) {
-}
-
-function rgbaToPixel(rgba: { r: number; g: number; b: number; a: number }) {
-  return (
-    (rgba.r & 0xff) +
-    ((rgba.g & 0xff) << 8) +
-    ((rgba.b & 0xff) << 16) +
-    ((rgba.a & 0xff) << 24)
-  );
-}
-
-@Entry
-export class ImageProcessorDemo extends Panel {
-  build(root: Group): void {
-    const iv = createRef<Image>();
-    const imageUrl = "https://doric.pub/about/The_Parthenon_in_Athens.jpg"; //"https://doric.pub/logo.png";
-    <Scroller parent={root} layoutConfig={layoutConfig().most()}>
-      <VLayout
-        layoutConfig={layoutConfig().mostWidth().fitHeight()}
-        space={20}
-        gravity={Gravity.Center}
-      >
-        <Text
-          layoutConfig={layoutConfig().mostWidth().justHeight()}
-          textSize={30}
-          textColor={Color.WHITE}
-          backgroundColor={colors[5]}
-          textAlignment={Gravity.Center}
-          height={50}
-        >
-          图片处理
-        </Text>
-        <Image
-          ref={iv}
-          layoutConfig={layoutConfig().justWidth().fitHeight()}
-          width={(Environment.screenWidth / 5) * 4}
-          imageUrl={imageUrl}
-        />
-        {(
-          [
-            [
-              "黑白",
-              async () => {
-                const imageInfo = await iv.current.getImageInfo(context);
-                const pixels = await iv.current.getImagePixels(context);
-                const data = new Uint32Array(pixels);
-                for (let i = 0; i < data.length; i++) {
-                  let { r, g, b, a } = pixelToRGBA(data[i]);
-                  r = g = b = Math.floor(r * 0.2989 + g * 0.587 + b * 0.114);
-                  data[i] = rgbaToPixel({ r, g, b, a });
-                }
-                iv.current.imagePixels = {
-                  width: imageInfo.width,
-                  height: imageInfo.height,
-                  pixels: pixels,
-                };
-              },
-            ],
-            [
-              "FastBlur",
-              async () => {
-                const imageInfo = await iv.current.getImageInfo(context);
-                const pixels = await iv.current.getImagePixels(context);
-                const data = new Uint32Array(pixels);
-                const radius = 30;
-                const w = imageInfo.width;
-                const h = imageInfo.height;
   const wm = w - 1;
   const hm = h - 1;
   const wh = w * h;
@@ -135,7 +68,7 @@ export class ImageProcessorDemo extends Panel {
       bsum =
         0;
     for (i = -radius; i <= radius; i++) {
-                    p = data[yi + Math.min(wm, Math.max(i, 0))];
+      p = pixels[yi + Math.min(wm, Math.max(i, 0))];
       sir = stack[i + radius];
       sir[0] = p & 0xff;
       sir[1] = (p >> 8) & 0xff;
@@ -175,7 +108,7 @@ export class ImageProcessorDemo extends Panel {
       if (y == 0) {
         vmin[x] = Math.min(x + radius + 1, wm);
       }
-                    p = data[yw + vmin[x]];
+      p = pixels[yw + vmin[x]];
 
       sir[0] = p & 0xff;
       sir[1] = (p >> 8) & 0xff;
@@ -248,11 +181,11 @@ export class ImageProcessorDemo extends Panel {
     yi = x;
     stackpointer = radius;
     for (y = 0; y < h; y++) {
-                    data[yi] =
+      pixels[yi] =
         dv[rsum] |
         ((dv[gsum] & 0xff) << 8) |
         ((dv[bsum] & 0xff) << 16) |
-                      (data[yi] & 0xff000000);
+        (pixels[yi] & 0xff000000);
       rsum -= routsum;
       gsum -= goutsum;
       bsum -= boutsum;
@@ -295,12 +228,84 @@ export class ImageProcessorDemo extends Panel {
       yi += w;
     }
   }
+}
+
+function pixelToRGBA(pixel: number) {
+  const r = pixel & 0xff;
+  const g = (pixel >> 8) & 0xff;
+  const b = (pixel >> 16) & 0xff;
+  const a = (pixel >> 24) & 0xff;
+  return { r, g, b, a };
+}
+
+function rgbaToPixel(rgba: { r: number; g: number; b: number; a: number }) {
+  return (
+    (rgba.r & 0xff) +
+    ((rgba.g & 0xff) << 8) +
+    ((rgba.b & 0xff) << 16) +
+    ((rgba.a & 0xff) << 24)
+  );
+}
+
+@Entry
+export class ImageProcessorDemo extends Panel {
+  build(root: Group): void {
+    const iv = createRef<Image>();
+    const imageUrl = "https://doric.pub/about/The_Parthenon_in_Athens.jpg"; //"https://doric.pub/logo.png";
+    <Scroller parent={root} layoutConfig={layoutConfig().most()}>
+      <VLayout
+        layoutConfig={layoutConfig().mostWidth().fitHeight()}
+        space={20}
+        gravity={Gravity.Center}
+      >
+        <Text
+          layoutConfig={layoutConfig().mostWidth().justHeight()}
+          textSize={30}
+          textColor={Color.WHITE}
+          backgroundColor={colors[5]}
+          textAlignment={Gravity.Center}
+          height={50}
+        >
+          图片处理
+        </Text>
+        <Image
+          ref={iv}
+          layoutConfig={layoutConfig().justWidth().fitHeight()}
+          width={(Environment.screenWidth / 5) * 4}
+          imageUrl={imageUrl}
+        />
+        {(
+          [
+            [
+              "黑白",
+              async () => {
+                const imageInfo = await iv.current.getImageInfo(context);
+                const pixels = await iv.current.getImagePixels(context);
+                const data = new Uint32Array(pixels);
+                for (let i = 0; i < data.length; i++) {
+                  let { r, g, b, a } = pixelToRGBA(data[i]);
+                  r = g = b = Math.floor(r * 0.2989 + g * 0.587 + b * 0.114);
+                  data[i] = rgbaToPixel({ r, g, b, a });
+                }
+                iv.current.imagePixels = {
+                  width: imageInfo.width,
+                  height: imageInfo.height,
+                  pixels: pixels,
+                };
+              },
+            ],
+            [
+              "FastBlur",
+              async () => {
+                const imageInfo = await iv.current.getImageInfo(context);
+                const pixels = await iv.current.getImagePixels(context);
+                const data = new Uint32Array(pixels);
+                fastBlur(data, imageInfo.width, imageInfo.height, 30);
                 iv.current.imagePixels = {
                   width: imageInfo.width,
                   height: imageInfo.height,
                   pixels: pixels,
                 };
-                loge(stack);
               },
             ],
             [