Merge pull request #265 from antvis/fix-issue-254

fix(g-canvas): bbox calculation should be correct for path when angle is null, 0 and PI
antvis · Nov 20, 2019 · f90e848 · f90e848
2 parents 250f54d + 5a02d10
commit f90e848
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/packages/g-canvas/src/util/path.ts b/packages/g-canvas/src/util/path.ts
@@ -6,7 +6,6 @@ import getArcParams from './arc-params';
 import QuadUtil from '@antv/g-math/lib/quadratic';
 import CubicUtil from '@antv/g-math/lib/cubic';
 import EllipseArcUtil from '@antv/g-math/lib/arc';
-import { getBBoxByArray } from '@antv/g-math/lib/util';
 import { inBox } from './util';
 import inLine from './in-stroke/line';
 import inArc from './in-stroke/arc';
@@ -30,9 +29,9 @@ function hasArc(path) {
 
 function getSegments(path) {
   const segments = [];
-  let currentPoint = [0, 0]; // 当前图形
+  let currentPoint = null; // 当前图形
   let nextParams = null; // 下一节点的 path 参数
-  let startMovePoint = [0, 0]; // 开始 M 的点，可能会有多个
+  let startMovePoint = null; // 开始 M 的点，可能会有多个
   let lastStartMovePointIndex = 0; // 最近一个开始点 M 的索引
   const count = path.length;
   for (let i = 0; i < count; i++) {
@@ -188,8 +187,12 @@ function getExtraFromSegmentWithAngle(segment, lineWidth) {
   const currentAngle = Math.acos(
     (currentAndPre + currentAndNext - preAndNext) / (2 * Math.sqrt(currentAndPre) * Math.sqrt(currentAndNext))
   );
-  if (Math.sin(currentAngle) === 0) {
-    return 0;
+  // 夹角为空、 0 或 PI 时，不需要计算夹角处的额外宽度
+  if (!currentAngle || Math.sin(currentAngle) === 0) {
+    return {
+      xExtra: 0,
+      yExtra: 0,
+    };
   }
   let xAngle = Math.abs(Math.atan2(nextPoint[1] - currentPoint[1], nextPoint[0] - currentPoint[0]));
   let yAngle = Math.abs(Math.atan2(nextPoint[0] - currentPoint[0], nextPoint[1] - currentPoint[1]));

diff --git a/packages/g-canvas/tests/bugs/issue-210-spec.js b/packages/g-canvas/tests/bugs/issue-210-spec.js
@@ -5,7 +5,7 @@ const dom = document.createElement('div');
 document.body.appendChild(dom);
 dom.id = 'c1';
 
-describe('#187', () => {
+describe('#210', () => {
   const canvas = new Canvas({
     container: dom,
     width: 500,
@@ -15,7 +15,11 @@ describe('#187', () => {
   it('bbox calculation should ignore NaN of path', () => {
     const path = canvas.addShape('path', {
       attrs: {
-        path: [['M', 100, 100], ['L', 200, 200], ['L', 300, NaN]],
+        path: [
+          ['M', 100, 100],
+          ['L', 200, 200],
+          ['L', 300, NaN],
+        ],
         stroke: 'red',
       },
     });

diff --git a/packages/g-canvas/tests/bugs/issue-232-spec.js b/packages/g-canvas/tests/bugs/issue-232-spec.js
@@ -55,8 +55,8 @@ describe('#232', () => {
     setTimeout(() => {
       bbox = shape.getBBox();
       expect(bbox.minX).eqls(72.82280392116971);
-      expect(bbox.minY).eqls(31.487390015101695);
-      expect(bbox.maxX).eqls(386.8131061130099);
+      expect(bbox.minY).eqls(31.711318897448876);
+      expect(bbox.maxX).eqls(389.8131061130099);
       expect(bbox.maxY).eqls(377.36);
       done();
     }, 600);

diff --git a/packages/g-canvas/tests/bugs/issue-252-spec.js b/packages/g-canvas/tests/bugs/issue-252-spec.js
@@ -18,7 +18,13 @@ describe('#252', () => {
       type: 'path',
       attrs: {
         lineWidth: 2,
-        path: [['M', 75, 200], ['L', 75, 100], ['L', 175, 100], ['L', 175, 200], ['L', 75, 200]],
+        path: [
+          ['M', 75, 200],
+          ['L', 75, 100],
+          ['L', 175, 100],
+          ['L', 175, 200],
+          ['L', 75, 200],
+        ],
         stroke: 'red',
       },
     });
@@ -31,7 +37,7 @@ describe('#252', () => {
   });
 
   // 水平和垂直方向具有凸起角
-  it.only('bbox calculation for path with prominent angle should be correct', () => {
+  it('bbox calculation for path with prominent angle should be correct', () => {
     const shape = canvas.addShape({
       type: 'path',
       attrs: {

diff --git a/packages/g-canvas/tests/bugs/issue-254-spec.js b/packages/g-canvas/tests/bugs/issue-254-spec.js
@@ -12,7 +12,7 @@ describe('#254', () => {
     height: 600,
   });
 
-  it('bbox calculation for path should be correct when angle is 0 and π', () => {
+  it('bbox calculation for path should be correct when angle is null, 0 and π', () => {
     const shape = canvas.addShape({
       type: 'path',
       attrs: {