Merge pull request #1479 from VisActor/fix/vscreen-bug

fix: vscreen extreme case error
VisActor · Sep 29, 2024 · 4c403e3 · 4c403e3
2 parents 6d55462 + 840fcd2
commit 4c403e3
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 36 deletions.
diff --git a/packages/vrender-core/src/animate/custom-animate.ts b/packages/vrender-core/src/animate/custom-animate.ts
@@ -497,7 +497,7 @@ export class StreamLight extends ACustomAnimate<any> {
         c.curves.forEach((ci: any) => curves.push(ci));
       });
       return this._updateCurves(customPath, curves, totalLen, ratio);
-    } else if (g.type === 'area') {
+    } else if (g.type === 'area' && g.cacheArea?.top?.curves) {
       const cache = g.cacheArea as IAreaCacheItem;
       const totalLen = cache.top.curves.reduce((a, b) => a + b.getLength(), 0);
       return this._updateCurves(customPath, cache.top.curves, totalLen, ratio);
@@ -510,44 +510,46 @@ export class StreamLight extends ACustomAnimate<any> {
     let lastLen = 0;
     let start = false;
     for (let i = 0; i < curves.length; i++) {
-      const curveItem = curves[i];
-      const len = curveItem.getLength();
-      const startPercent = 1 - (lastLen + len - startLen) / len;
-      let endPercent = 1 - (lastLen + len - endLen) / len;
-      let curveForStart: ICubicBezierCurve;
-      if (lastLen < startLen && lastLen + len > startLen) {
-        start = true;
-        if (curveItem.p2 && curveItem.p3) {
-          const [_, curve2] = divideCubic(curveItem as ICubicBezierCurve, startPercent);
-          customPath.moveTo(curve2.p0.x, curve2.p0.y);
-          curveForStart = curve2;
-          // console.log(curve2.p0.x, curve2.p0.y);
-        } else {
-          const p = curveItem.getPointAt(startPercent);
-          customPath.moveTo(p.x, p.y);
-        }
-      }
-      if (lastLen < endLen && lastLen + len > endLen) {
-        if (curveItem.p2 && curveItem.p3) {
-          if (curveForStart) {
-            endPercent = (endLen - startLen) / curveForStart.getLength();
+      if (curves[i].defined !== false) {
+        const curveItem = curves[i];
+        const len = curveItem.getLength();
+        const startPercent = 1 - (lastLen + len - startLen) / len;
+        let endPercent = 1 - (lastLen + len - endLen) / len;
+        let curveForStart: ICubicBezierCurve;
+        if (lastLen < startLen && lastLen + len > startLen) {
+          start = true;
+          if (curveItem.p2 && curveItem.p3) {
+            const [_, curve2] = divideCubic(curveItem as ICubicBezierCurve, startPercent);
+            customPath.moveTo(curve2.p0.x, curve2.p0.y);
+            curveForStart = curve2;
+            // console.log(curve2.p0.x, curve2.p0.y);
+          } else {
+            const p = curveItem.getPointAt(startPercent);
+            customPath.moveTo(p.x, p.y);
           }
-          const [curve1] = divideCubic(curveForStart || (curveItem as ICubicBezierCurve), endPercent);
-          customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
-        } else {
-          const p = curveItem.getPointAt(endPercent);
-          customPath.lineTo(p.x, p.y);
         }
-        break;
-      } else if (start) {
-        if (curveItem.p2 && curveItem.p3) {
-          const curve = curveForStart || curveItem;
-          customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
-        } else {
-          customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
+        if (lastLen < endLen && lastLen + len > endLen) {
+          if (curveItem.p2 && curveItem.p3) {
+            if (curveForStart) {
+              endPercent = (endLen - startLen) / curveForStart.getLength();
+            }
+            const [curve1] = divideCubic(curveForStart || (curveItem as ICubicBezierCurve), endPercent);
+            customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
+          } else {
+            const p = curveItem.getPointAt(endPercent);
+            customPath.lineTo(p.x, p.y);
+          }
+          break;
+        } else if (start) {
+          if (curveItem.p2 && curveItem.p3) {
+            const curve = curveForStart || curveItem;
+            customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
+          } else {
+            customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
+          }
         }
+        lastLen += len;
       }
-      lastLen += len;
     }
   }
 

diff --git a/packages/vrender-kits/src/canvas/contributions/browser/context.ts b/packages/vrender-kits/src/canvas/contributions/browser/context.ts
@@ -539,7 +539,7 @@ export class BrowserContext2d implements IContext2d {
         this.bezierCurveTo(bez[0], bez[1], bez[2], bez[3], bez[4], bez[5], z);
       }
     } else {
-      this.nativeContext.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+      this.nativeContext.arc(x, y, Math.max(0, radius), startAngle, endAngle, anticlockwise);
     }
   }
 
@@ -684,6 +684,13 @@ export class BrowserContext2d implements IContext2d {
   }
 
   createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
+    if (!isFinite(x0 + y0 + x1 + y1)) {
+      x0 = 0;
+      y0 = 0;
+      x1 = 0;
+      y1 = 0;
+    }
+
     return this.nativeContext.createLinearGradient(x0, y0, x1, y1);
   }