feat: update EffectDemo and fix some code problems

doric-android/doric/src/main/java/pub/doric/shader/AeroEffectView.java

@@ -62,6 +62,9 @@ public class AeroEffectView extends DoricLayer {
 
     @Override
     protected void dispatchDraw(Canvas canvas) {
+        if (canvas.getWidth() <= 0 || canvas.getHeight() <= 0) {
+            return;
+        }
         if (mFullBitmap == null
                 || mFullBitmap.getWidth() != canvas.getWidth()
                 || mFullBitmap.getHeight() != canvas.getHeight()) {

doric-android/doric/src/main/java/pub/doric/shader/AeroEffectViewNode.java

@@ -46,7 +46,7 @@ public class AeroEffectViewNode extends StackNode {
         if ("effectiveRect".equals(name)) {
             if (prop.isObject()) {
                 int x = DoricUtils.dp2px(prop.asObject().getProperty("x").asNumber().toFloat());
-                int y = DoricUtils.dp2px(prop.asObject().getProperty("x").asNumber().toFloat());
+                int y = DoricUtils.dp2px(prop.asObject().getProperty("y").asNumber().toFloat());
                 int width = DoricUtils.dp2px(prop.asObject().getProperty("width").asNumber().toFloat());
                 int height = DoricUtils.dp2px(prop.asObject().getProperty("height").asNumber().toFloat());
                 ((AeroEffectView) view).setEffectiveRect(new Rect(x, y, x + width, y + height));

doric-android/doric/src/main/java/pub/doric/shader/BlurEffectView.java

@@ -61,6 +61,9 @@ public class BlurEffectView extends DoricLayer {
 
     @Override
     protected void dispatchDraw(Canvas canvas) {
+        if (canvas.getWidth() <= 0 || canvas.getHeight() <= 0) {
+            return;
+        }
         if (mFullBitmap == null
                 || mFullBitmap.getWidth() != canvas.getWidth()
                 || mFullBitmap.getHeight() != canvas.getHeight()) {

doric-android/doric/src/main/java/pub/doric/shader/BlurEffectViewNode.java

@@ -50,7 +50,7 @@ public class BlurEffectViewNode extends StackNode {
         } else if ("effectiveRect".equals(name)) {
             if (prop.isObject()) {
                 int x = DoricUtils.dp2px(prop.asObject().getProperty("x").asNumber().toFloat());
-                int y = DoricUtils.dp2px(prop.asObject().getProperty("x").asNumber().toFloat());
+                int y = DoricUtils.dp2px(prop.asObject().getProperty("y").asNumber().toFloat());
                 int width = DoricUtils.dp2px(prop.asObject().getProperty("width").asNumber().toFloat());
                 int height = DoricUtils.dp2px(prop.asObject().getProperty("height").asNumber().toFloat());
                 ((BlurEffectView) view).setEffectiveRect(new Rect(x, y, x + width, y + height));

doric-demo/src/BlurEffectsDemo.tsx

@@ -8,32 +8,270 @@ import {
   Image,
   Text,
   createRef,
-  animate,
-  loge,
   Stack,
-  RotationXAnimation,
+  Color,
-  RotationAnimation,
+  GestureContainer,
+  Scroller,
+  Gravity,
+  HLayout,
 } from "doric";
+import { colors } from "./utils";
 
 @Entry
 export class BlurEffectsDemo extends Panel {
   build(root: Group) {
-    let ref = createRef<Image>();
+    root.backgroundColor = Color.WHITE;
-    <VLayout layoutConfig={layoutConfig().most()} parent={root}>
+    const blurEffectRef = createRef<BlurEffect>();
-      <BlurEffect layoutConfig={layoutConfig().most()} radius={15}>
+    const gestureRef = createRef<GestureContainer>();
-        <Image
+    <Scroller parent={root} layoutConfig={layoutConfig().most()}>
-          ref={ref}
+      <VLayout layoutConfig={layoutConfig().mostWidth().fitHeight()}>
-          imageUrl="https://pic3.zhimg.com/v2-5847d0813bd0deba333fcbe52435e83e_b.jpg"
+        <BlurEffect
-          onClick={async () => {
+          layoutConfig={layoutConfig().mostWidth().fitHeight()}
-            const rotation = new RotationAnimation();
+          radius={20}
-            rotation.fromRotation = 0;
+          ref={blurEffectRef}
-            rotation.toRotation = 2;
+          effectiveRect={{
-            rotation.duration = 1000;
+            x: 50,
-            rotation.repeatCount = -1;
+            y: 50,
-            ref.current.doAnimation(context, rotation);
+            width: 200,
+            height: 200,
           }}
-        />
+        >
-      </BlurEffect>
+          <GestureContainer
-    </VLayout>;
+            ref={gestureRef}
+            layoutConfig={layoutConfig().mostWidth().fitHeight()}
+          >
+            <VLayout space={20} padding={{ left: 5, right: 5 }}>
+              <Image imageUrl="https://doric.pub/about/The_Parthenon_in_Athens.jpg" />
+              <HLayout space={10}>
+                <Image imageUrl="https://doric.pub/logo.png" />
+                <Text
+                  layoutConfig={layoutConfig().mostWidth().fitHeight()}
+                  maxLines={-1}
+                  textAlignment={Gravity.Left}
+                >
+                  希腊帕特农神庙历经数千年风雨侵蚀，早已断墙残垣。然而那些廊柱屹立千年，仍然坚固巍然。
+                  这种廊柱样式叫做 Doric，即我们这个项目的名称由来。
+                  正如Doric样式的廊柱撑起了神庙的千年风雨，我们也希望Doric项目能够作为前端页面的支柱，简洁，可靠。
+                  目前Doric正在持续迭代中。如果您对Doric项目感兴趣，欢迎加入我们。
+                </Text>
+              </HLayout>
+            </VLayout>
+          </GestureContainer>
+        </BlurEffect>
+        <VLayout
+          layoutConfig={layoutConfig()
+            .mostWidth()
+            .fitHeight()
+            .configMargin({ top: 20 })}
+          space={5}
+          padding={{ left: 10, right: 10 }}
+        >
+          {(() => {
+            const labelRef = createRef<Text>();
+            const spinnerRef = createRef<Stack>();
+            const containerRef = createRef<GestureContainer>();
+            this.addOnRenderFinishedCallback(async () => {
+              const width = await containerRef.current.getWidth(this.context);
+              const maxValue = 25;
+              spinnerRef.current.width =
+                ((blurEffectRef.current.radius || 0) * width) / maxValue;
+              labelRef.current.text = `Blur radius: ${blurEffectRef.current.radius}`;
+              containerRef.current.onTouchDown = async (event) => {
+                spinnerRef.current.width = event.x;
+                blurEffectRef.current.radius = Math.round(
+                  (event.x / width) * maxValue
+                );
+                labelRef.current.text = `Blur radius: ${blurEffectRef.current.radius}`;
+              };
+              containerRef.current.onTouchMove = async (event) => {
+                spinnerRef.current.width = event.x;
+                blurEffectRef.current.radius = Math.round(
+                  (event.x / width) * maxValue
+                );
+                labelRef.current.text = `Blur radius: ${blurEffectRef.current.radius}`;
+              };
+            });
+            return (
+              <>
+                <Text textSize={20} ref={labelRef}>
+                  Blur radius:\t
+                </Text>
+                <GestureContainer
+                  layoutConfig={layoutConfig().mostWidth().fitHeight()}
+                  ref={containerRef}
+                  border={{
+                    width: 1,
+                    color: colors[4],
+                  }}
+                >
+                  <Stack
+                    ref={spinnerRef}
+                    backgroundColor={colors[6]}
+                    layoutConfig={layoutConfig().justWidth().justHeight()}
+                    height={40}
+                  ></Stack>
+                </GestureContainer>
+              </>
+            );
+          })()}
+        </VLayout>
+        <VLayout
+          layoutConfig={layoutConfig()
+            .mostWidth()
+            .fitHeight()
+            .configMargin({ top: 20 })}
+          space={5}
+          padding={{ left: 10, right: 10 }}
+        >
+          {(() => {
+            const labelRef = createRef<Text>();
+            const spinnerRef = createRef<Stack>();
+            const containerRef = createRef<GestureContainer>();
+            this.addOnRenderFinishedCallback(async () => {
+              const width = await containerRef.current.getWidth(this.context);
+              const maxValue = await blurEffectRef.current.getWidth(
+                this.context
+              );
+              spinnerRef.current.width =
+                ((blurEffectRef.current.effectiveRect?.width || 0) * width) /
+                maxValue;
+              labelRef.current.text = `Effective Width: ${blurEffectRef.current.effectiveRect?.width}`;
+              containerRef.current.onTouchDown = async (event) => {
+                spinnerRef.current.width = event.x;
+                blurEffectRef.current.effectiveRect = {
+                  ...blurEffectRef.current.effectiveRect!!,
+                  width: Math.floor((event.x / width) * maxValue),
+                };
+                labelRef.current.text = `Effective Width: ${blurEffectRef.current.effectiveRect?.width}`;
+              };
+              containerRef.current.onTouchMove = async (event) => {
+                spinnerRef.current.width = event.x;
+                blurEffectRef.current.effectiveRect = {
+                  ...blurEffectRef.current.effectiveRect!!,
+                  width: Math.floor((event.x / width) * maxValue),
+                };
+                labelRef.current.text = `Effective Width: ${blurEffectRef.current.effectiveRect?.width}`;
+              };
+            });
+            return (
+              <>
+                <Text textSize={20} ref={labelRef} />
+                <GestureContainer
+                  layoutConfig={layoutConfig().mostWidth().fitHeight()}
+                  ref={containerRef}
+                  border={{
+                    width: 1,
+                    color: colors[4],
+                  }}
+                >
+                  <Stack
+                    ref={spinnerRef}
+                    backgroundColor={colors[6]}
+                    layoutConfig={layoutConfig().justWidth().justHeight()}
+                    height={40}
+                  ></Stack>
+                </GestureContainer>
+              </>
+            );
+          })()}
+        </VLayout>
+        <VLayout
+          layoutConfig={layoutConfig()
+            .mostWidth()
+            .fitHeight()
+            .configMargin({ top: 20 })}
+          space={5}
+          padding={{ left: 10, right: 10 }}
+        >
+          {(() => {
+            const labelRef = createRef<Text>();
+            const spinnerRef = createRef<Stack>();
+            const containerRef = createRef<GestureContainer>();
+            this.addOnRenderFinishedCallback(async () => {
+              const width = await containerRef.current.getWidth(this.context);
+              const maxValue = await blurEffectRef.current.getHeight(
+                this.context
+              );
+              spinnerRef.current.width =
+                ((blurEffectRef.current.effectiveRect?.height || 0) * width) /
+                maxValue;
+              labelRef.current.text = `Effective Height: ${blurEffectRef.current.effectiveRect?.height}`;
+              containerRef.current.onTouchDown = async (event) => {
+                spinnerRef.current.width = event.x;
+                blurEffectRef.current.effectiveRect = {
+                  ...blurEffectRef.current.effectiveRect!!,
+                  height: Math.floor((event.x / width) * maxValue),
+                };
+                labelRef.current.text = `Effective Height: ${blurEffectRef.current.effectiveRect?.height}`;
+              };
+              containerRef.current.onTouchMove = async (event) => {
+                spinnerRef.current.width = event.x;
+                blurEffectRef.current.effectiveRect = {
+                  ...blurEffectRef.current.effectiveRect!!,
+                  height: Math.floor((event.x / width) * maxValue),
+                };
+                labelRef.current.text = `Effective Height: ${blurEffectRef.current.effectiveRect?.height}`;
+              };
+            });
+            return (
+              <>
+                <Text textSize={20} ref={labelRef} />
+                <GestureContainer
+                  layoutConfig={layoutConfig().mostWidth().fitHeight()}
+                  ref={containerRef}
+                  border={{
+                    width: 1,
+                    color: colors[4],
+                  }}
+                >
+                  <Stack
+                    ref={spinnerRef}
+                    backgroundColor={colors[6]}
+                    layoutConfig={layoutConfig().justWidth().justHeight()}
+                    height={40}
+                  ></Stack>
+                </GestureContainer>
+              </>
+            );
+          })()}
+        </VLayout>
+      </VLayout>
+    </Scroller>;
+    this.addOnRenderFinishedCallback(() => {
+      let x = 0,
+        y = 0,
+        posX = 0,
+        posY = 0;
+      gestureRef.current.onTouchDown = (event) => {
+        const rect = blurEffectRef.current.effectiveRect || {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+        };
+        if (
+          event.x >= rect.x &&
+          event.x <= rect.x + rect.width &&
+          event.y >= rect.y &&
+          event.y <= rect.y + rect.height
+        ) {
+          x = event.x;
+          y = event.y;
+          posX = rect.x;
+          posY = rect.y;
+        } else {
+          x = -1;
+        }
+      };
+      gestureRef.current.onTouchMove = (event) => {
+        if (x >= 0) {
+          blurEffectRef.current.effectiveRect = {
+            ...blurEffectRef.current.effectiveRect!!,
+            x: posX + (event.x - x),
+            y: posY + (event.y - y),
+          };
+        }
+      };
+    });
   }
 }