fix(shape): 修复 sector & arc 角度从非 0 到 0 不更新 (#245)

antvis · Oct 26, 2023 · 13afa9f · 13afa9f
1 parent 9497e97
commit 13afa9f
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 0 deletions.
diff --git a/packages/f-engine/src/shape/arc.ts b/packages/f-engine/src/shape/arc.ts
@@ -62,6 +62,7 @@ export class Arc extends Path {
     const { cx = 0, cy = 0, startAngle, endAngle, r, anticlockwise } = this.parsedStyle;
 
     if (isNil(startAngle) || isNil(endAngle) || startAngle === endAngle || isNil(r) || r <= 0) {
+      super.setAttribute('path', '');
       return;
     }
 

diff --git a/packages/f-engine/src/shape/sector.ts b/packages/f-engine/src/shape/sector.ts
@@ -135,6 +135,7 @@ export class Sector extends Path {
     const { cx, cy, startAngle, endAngle, r, r0, radius, anticlockwise = false } = this.parsedStyle;
 
     if (isNil(startAngle) || isNil(endAngle) || startAngle === endAngle || isNil(r) || r <= 0) {
+      super.setAttribute('path', '');
       return;
     }
 

diff --git a/.../f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-角度从非-0-到-0-1-snap.png b/.../f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-角度从非-0-到-0-1-snap.png
diff --git a/.../f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-角度从非-0-到-0-2-snap.png b/.../f-engine/test/shape/__image_snapshots__/arc-test-tsx-arc-角度从非-0-到-0-2-snap.png
diff --git a/...ine/test/shape/__image_snapshots__/sector-test-tsx-sector-角度从非-0-到-0-1-snap.png b/...ine/test/shape/__image_snapshots__/sector-test-tsx-sector-角度从非-0-到-0-1-snap.png
diff --git a/...ine/test/shape/__image_snapshots__/sector-test-tsx-sector-角度从非-0-到-0-2-snap.png b/...ine/test/shape/__image_snapshots__/sector-test-tsx-sector-角度从非-0-到-0-2-snap.png
diff --git a/packages/f-engine/test/shape/arc.test.tsx b/packages/f-engine/test/shape/arc.test.tsx
@@ -154,4 +154,46 @@ describe('Arc', () => {
     await delay(500);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('角度从非0到0', async () => {
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <arc
+          style={{
+            cx: 60,
+            cy: 60,
+            stroke: 'red',
+            lineWidth: '8px',
+            startAngle: '-1.57rad',
+            endAngle: '4.36rad',
+            r: 50,
+          }}
+        />
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+
+    const update = (
+      <Canvas context={context} pixelRatio={1}>
+        <arc
+          style={{
+            cx: 60,
+            cy: 60,
+            stroke: 'red',
+            lineWidth: '8px',
+            startAngle: '1rad',
+            endAngle: '1rad',
+            r: 50,
+          }}
+        />
+      </Canvas>
+    );
+    await canvas.update(update.props);
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
 });
diff --git a/packages/f-engine/test/shape/sector.test.tsx b/packages/f-engine/test/shape/sector.test.tsx
@@ -358,4 +358,46 @@ describe('Sector', () => {
       expect(context).toMatchImageSnapshot();
     });
   });
+
+  it('角度从非0到0', async () => {
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <sector
+          style={{
+            cx: 150,
+            cy: 120,
+            fill: 'red',
+            startAngle: '-1.57rad',
+            endAngle: '4.36rad',
+            r0: 60,
+            r: 100,
+          }}
+        />
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+
+    const update = (
+      <Canvas context={context} pixelRatio={1}>
+        <sector
+          style={{
+            cx: 150,
+            cy: 120,
+            fill: 'red',
+            startAngle: '1rad',
+            endAngle: '1rad',
+            r0: 60,
+            r: 100,
+          }}
+        />
+      </Canvas>
+    );
+    await canvas.update(update.props);
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
 });