Merge pull request #329 from antvis/feat-polyline

feat(g-canvas & g-svg): add getStartTangent() and getEndTangent() method for Polyline

docs/api/canvas.en.md

@@ -1,6 +1,6 @@
 ---
 title: Canvas
-order: 0
+order: 2
 redirect_from:
   - /en/docs/api
 ---

docs/api/canvas.zh.md

@@ -1,6 +1,6 @@
 ---
 title: Canvas 画布
-order: 0
+order: 2
 redirect_from:
   - /zh/docs/api
 ---

docs/api/group.en.md

@@ -1,6 +1,6 @@
 ---
 title: Group
-order: 1
+order: 3
 ---
 
 ## 属性

docs/api/group.zh.md

@@ -1,6 +1,6 @@
 ---
 title: Group 图形分组
-order: 1
+order: 3
 ---
 
 ## 属性

docs/api/shape/polyline.en.md

@@ -21,7 +21,7 @@ order: 10
 
 ### getTotalLength(): number
 
-- Get total length of path；
+- Get total length of polyline;
 
 ### getPoint(ratio: number): Point
 
@@ -33,3 +33,11 @@ export type Point = {
   y: number;
 };
 ```
+
+### getStartTangent(): number[][]
+
+- Get the start tangent vector, like `[[10, 10], [20, 20]]`;
+
+### getEndTangent(): number[][]
+
+- Get the end tangent vector, like `[[10, 10], [20, 20]]`;

docs/api/shape/polyline.zh.md

@@ -33,3 +33,11 @@ export type Point = {
   y: number;
 };
 ```
+
+### getStartTangent(): number[][]
+
+- 获取起点切向量，形如: `[[10, 10], [20, 20]]`；
+
+### getEndTangent(): number[][]
+
+- 获取终点切向量，形如: `[[10, 10], [20, 20]]`；

packages/g-canvas/src/shape/polyline.ts

@@ -132,6 +132,31 @@ class PolyLine extends ShapeBase {
     });
     this.set('tCache', tCache);
   }
+
+  /**
+   * Get start tangent
+   * @return {Array}
+   */
+  getStartTangent() {
+    const { points } = this.attr();
+    const result = [];
+    result.push([points[1][0], points[1][1]]);
+    result.push([points[0][0], points[0][1]]);
+    return result;
+  }
+
+  /**
+   * Get end tangent
+   * @return {Array}
+   */
+  getEndTangent() {
+    const { points } = this.attr();
+    const l = points.length - 1;
+    const result = [];
+    result.push([points[l - 1][0], points[l - 1][1]]);
+    result.push([points[l][0], points[l][1]]);
+    return result;
+  }
 }
 
 export default PolyLine;

packages/g-canvas/tests/unit/shape/polyline-spec.js

@@ -124,4 +124,30 @@ describe('polygon test', () => {
       y: 150,
     });
   });
+
+  it('getStartTangent', () => {
+    polyline.attr('points', points1);
+    expect(polyline.getStartTangent()).eqls([
+      [100, 10],
+      [10, 10],
+    ]);
+    polyline.attr('points', points2);
+    expect(polyline.getStartTangent()).eqls([
+      [100, 50],
+      [50, 50],
+    ]);
+  });
+
+  it('getEndTangent', () => {
+    polyline.attr('points', points1);
+    expect(polyline.getEndTangent()).eqls([
+      [100, 100],
+      [10, 100],
+    ]);
+    polyline.attr('points', points2);
+    expect(polyline.getEndTangent()).eqls([
+      [150, 150],
+      [200, 150],
+    ]);
+  });
 });

packages/g-svg/src/shape/polyline.ts

@@ -107,6 +107,31 @@ class Polyline extends ShapeBase {
     });
     this.set('tCache', tCache);
   }
+
+  /**
+   * Get start tangent
+   * @return {Array}
+   */
+  getStartTangent() {
+    const { points } = this.attr();
+    const result = [];
+    result.push([points[1][0], points[1][1]]);
+    result.push([points[0][0], points[0][1]]);
+    return result;
+  }
+
+  /**
+   * Get end tangent
+   * @return {Array}
+   */
+  getEndTangent() {
+    const { points } = this.attr();
+    const l = points.length - 1;
+    const result = [];
+    result.push([points[l - 1][0], points[l - 1][1]]);
+    result.push([points[l][0], points[l][1]]);
+    return result;
+  }
 }
 
 export default Polyline;

packages/g-svg/tests/unit/shape/polyline-spec.js

@@ -110,6 +110,32 @@ describe('SVG polyline', () => {
     });
   });
 
+  it('getStartTangent', () => {
+    polyline.attr('points', points1);
+    expect(polyline.getStartTangent()).eqls([
+      [100, 10],
+      [10, 10],
+    ]);
+    polyline.attr('points', points2);
+    expect(polyline.getStartTangent()).eqls([
+      [100, 50],
+      [50, 50],
+    ]);
+  });
+
+  it('getEndTangent', () => {
+    polyline.attr('points', points1);
+    expect(polyline.getEndTangent()).eqls([
+      [100, 100],
+      [10, 100],
+    ]);
+    polyline.attr('points', points2);
+    expect(polyline.getEndTangent()).eqls([
+      [150, 150],
+      [200, 150],
+    ]);
+  });
+
   it('destroy', () => {
     expect(polyline.destroyed).eql(false);
     polyline.destroy();