@antv/g-canvas - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

esm/canvas.js

@@ -40,2 +40,4 @@ import { __extends } from "tslib";
         var cfg = _super.prototype.getDefaultCfg.call(this);
+        // 设置渲染引擎为 canvas，只读属性
+        cfg['renderer'] = 'canvas';
         // 是否自动绘制，不需要用户调用 draw 方法
@@ -42,0 +44,0 @@ cfg['autoDraw'] = true;

esm/shape/line.d.ts

@@ -1,16 +0,18 @@
-/**
- * @fileoverview 圆
- * @author [e-mail]
- */
 import ShapeBase from './base';
 declare class Line extends ShapeBase {
-    getInnerBox(attrs: any): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
+    getInnerBox(attrs: any): import("@antv/g-math/lib/types").BBox;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
     createPath(context: any): void;
+    /**
+     * Get length of line
+     * @return {number} length
+     */
+    getTotalLength(): number;
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    getPoint(ratio: number): import("@antv/g-math/lib/types").Point;
 }
 export default Line;

esm/shape/line.js

@@ -0,1 +1,2 @@
+import { __extends } from "tslib";
 /**
@@ -5,6 +6,5 @@ * @fileoverview 圆
  */
-import { __extends } from "tslib";
+import LineUtil from '@antv/g-math/lib/line';
 import ShapeBase from './base';
 import inLine from '../util/in-stroke/line';
-import LineUtil from '@antv/g-math/lib/line';
 var Line = /** @class */ (function (_super) {
@@ -33,2 +33,19 @@ __extends(Line, _super);
     };
+    /**
+     * Get length of line
+     * @return {number} length
+     */
+    Line.prototype.getTotalLength = function () {
+        var _a = this.attr(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
+        return LineUtil.length(x1, y1, x2, y2);
+    };
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    Line.prototype.getPoint = function (ratio) {
+        var _a = this.attr(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
+        return LineUtil.pointAt(x1, y1, x2, y2, ratio);
+    };
     return Line;
@@ -35,0 +52,0 @@ }(ShapeBase));

esm/shape/path.d.ts

@@ -5,2 +5,3 @@ /**
  */
+import { Point } from '@antv/g-base/lib/types';
 import ShapeBase from './base';
@@ -20,3 +21,16 @@ declare class Path extends ShapeBase {
     createPath(context: any): void;
+    /**
+     * Get total length of path
+     * @return {number} length
+     */
+    getTotalLength(): any;
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    getPoint(ratio: number): Point;
+    _calculateCurve(): void;
+    _setTcache(): void;
 }
 export default Path;

esm/shape/path.js

 import { __extends } from "tslib";
-/**
- * @fileoverview path
- * @author [e-mail]
- */
+import CubicUtil from '@antv/g-math/lib/cubic';
+import { each, isNil } from '@antv/util';
 import ShapeBase from './base';
@@ -11,3 +9,3 @@ import path2Absolute from '@antv/path-util/lib/path-2-absolute';
 import isInPolygon from '../util/in-path/polygon';
-import pathUtil from '../util/path';
+import PathUtil from '../util/path';
 // 是否在多个多边形内部
@@ -37,3 +35,3 @@ function isInPolygons(polygons, x, y) {
         this.attrs.path = path2Absolute(path);
-        var hasArc = pathUtil.hasArc(path);
+        var hasArc = PathUtil.hasArc(path);
         // 为了加速 path 的绘制、拾取和计算，这个地方可以缓存很多东西
@@ -44,2 +42,5 @@ // 这些缓存都是第一次需要时计算和存储，虽然增加了复杂度，但是频繁调用的方法，性能有很大提升
         this.set('segments', null); // 延迟生成 path，在动画场景下可能不会有拾取
+        this.set('curve', null);
+        this.set('tCache', null);
+        this.set('totalLength', null);
     };
@@ -49,3 +50,3 @@ Path.prototype.getInnerBox = function (attrs) {
         var lineWidth = this.getHitLineWidth();
-        return pathUtil.getPathBox(segments, lineWidth);
+        return PathUtil.getPathBox(segments, lineWidth);
     };
@@ -55,3 +56,3 @@ Path.prototype.getSegments = function () {
         if (!segments) {
-            segments = pathUtil.getSegments(this.attr('path'));
+            segments = PathUtil.getSegments(this.attr('path'));
             this.set('segments', segments);
@@ -66,3 +67,3 @@ }
         if (isStroke) {
-            isHit = pathUtil.isPointInStroke(segments, lineWidth, x, y);
+            isHit = PathUtil.isPointInStroke(segments, lineWidth, x, y);
         }
@@ -76,3 +77,3 @@ if (!isHit && isFill) {
                 var path = this.attr('path');
-                var extractResutl = pathUtil.extractPolygons(path);
+                var extractResutl = PathUtil.extractPolygons(path);
                 // 提取出来的多边形包含闭合的和非闭合的，在这里统一按照多边形处理
@@ -96,2 +97,98 @@ isHit = isInPolygons(extractResutl.polygons, x, y) || isInPolygons(extractResutl.polylines, x, y);
     };
+    /**
+     * Get total length of path
+     * @return {number} length
+     */
+    Path.prototype.getTotalLength = function () {
+        var totalLength = this.get('totalLength');
+        if (!isNil(totalLength)) {
+            return totalLength;
+        }
+        this._calculateCurve();
+        this._setTcache();
+        return this.get('totalLength');
+    };
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    Path.prototype.getPoint = function (ratio) {
+        var tCache = this.get('tCache');
+        if (!tCache) {
+            this._calculateCurve();
+            this._setTcache();
+            tCache = this.get('tCache');
+        }
+        var subt;
+        var index;
+        var curve = this.get('curve');
+        if (!tCache || tCache.length === 0) {
+            if (curve) {
+                return {
+                    x: curve[0][1],
+                    y: curve[0][2],
+                };
+            }
+            return null;
+        }
+        each(tCache, function (v, i) {
+            if (ratio >= v[0] && ratio <= v[1]) {
+                subt = (ratio - v[0]) / (v[1] - v[0]);
+                index = i;
+            }
+        });
+        var seg = curve[index];
+        if (isNil(seg) || isNil(index)) {
+            return null;
+        }
+        var l = seg.length;
+        var nextSeg = curve[index + 1];
+        return CubicUtil.pointAt(seg[l - 2], seg[l - 1], nextSeg[1], nextSeg[2], nextSeg[3], nextSeg[4], nextSeg[5], nextSeg[6], subt);
+    };
+    Path.prototype._calculateCurve = function () {
+        var path = this.attr().path;
+        this.set('curve', PathUtil.pathToCurve(path));
+    };
+    Path.prototype._setTcache = function () {
+        var totalLength = 0;
+        var tempLength = 0;
+        // 每段 curve 对应起止点的长度比例列表，形如: [[0, 0.25], [0.25, 0.6]. [0.6, 0.9], [0.9, 1]]
+        var tCache = [];
+        var segmentT;
+        var segmentL;
+        var segmentN;
+        var l;
+        var curve = this.get('curve');
+        if (!curve) {
+            return;
+        }
+        each(curve, function (segment, i) {
+            segmentN = curve[i + 1];
+            l = segment.length;
+            if (segmentN) {
+                totalLength +=
+                    CubicUtil.length(segment[l - 2], segment[l - 1], segmentN[1], segmentN[2], segmentN[3], segmentN[4], segmentN[5], segmentN[6]) || 0;
+            }
+        });
+        this.set('totalLength', totalLength);
+        if (totalLength === 0) {
+            this.set('tCache', []);
+            return;
+        }
+        each(curve, function (segment, i) {
+            segmentN = curve[i + 1];
+            l = segment.length;
+            if (segmentN) {
+                segmentT = [];
+                segmentT[0] = tempLength / totalLength;
+                segmentL = CubicUtil.length(segment[l - 2], segment[l - 1], segmentN[1], segmentN[2], segmentN[3], segmentN[4], segmentN[5], segmentN[6]);
+                // 当 path 不连续时，segmentL 可能为空，为空时需要作为 0 处理
+                tempLength += segmentL || 0;
+                segmentT[1] = tempLength / totalLength;
+                tCache.push(segmentT);
+            }
+        });
+        this.set('tCache', tCache);
+    };
     return Path;
@@ -98,0 +195,0 @@ }(ShapeBase));

esm/shape/polygon.d.ts

@@ -7,8 +7,3 @@ /**
 declare class Polygon extends ShapeBase {
-    getInnerBox(attrs: any): {
-        x: any;
-        y: any;
-        width: number;
-        height: number;
-    };
+    getInnerBox(attrs: any): import("@antv/g-math/lib/types").BBox;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
@@ -15,0 +10,0 @@ createPath(context: any): void;

esm/shape/polyline.d.ts

@@ -5,15 +5,25 @@ /**
  */
+import { Point } from '@antv/g-base/lib/types';
 import ShapeBase from './base';
 declare class PolyLine extends ShapeBase {
+    onAttrChange(name: string, value: any, originValue: any): void;
+    _resetCache(): void;
     isFill(): boolean;
-    getInnerBox(attrs: any): {
-        x: any;
-        y: any;
-        width: number;
-        height: number;
-    };
+    getInnerBox(attrs: any): import("@antv/g-math/lib/types").BBox;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
     isStroke(): boolean;
     createPath(context: any): void;
+    /**
+     * Get length of polyline
+     * @return {number} length
+     */
+    getTotalLength(): any;
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    getPoint(ratio: number): Point;
+    _setTcache(): void;
 }
 export default PolyLine;

esm/shape/polyline.js

@@ -1,9 +0,7 @@
-/**
- * @fileoverview 多边形
- * @author [e-mail]
- */
 import { __extends } from "tslib";
+import LineUtil from '@antv/g-math/lib/line';
+import PolylineUtil from '@antv/g-math/lib/polyline';
+import { each, isNil } from '@antv/util';
 import ShapeBase from './base';
 import inPolyline from '../util/in-stroke/polyline';
-import PolylineUtil from '@antv/g-math/lib/polyline';
 var PolyLine = /** @class */ (function (_super) {
@@ -14,2 +12,13 @@ __extends(PolyLine, _super);
     }
+    // 更新属性时，检测是否更改了 points
+    PolyLine.prototype.onAttrChange = function (name, value, originValue) {
+        _super.prototype.onAttrChange.call(this, name, value, originValue);
+        if (['points'].indexOf(name) !== -1) {
+            this._resetCache();
+        }
+    };
+    PolyLine.prototype._resetCache = function () {
+        this.set('totalLength', null);
+        this.set('tCache', null);
+    };
     // 不允许 fill
@@ -52,2 +61,64 @@ PolyLine.prototype.isFill = function () {
     };
+    /**
+     * Get length of polyline
+     * @return {number} length
+     */
+    PolyLine.prototype.getTotalLength = function () {
+        var points = this.attr().points;
+        // get totalLength from cache
+        var totalLength = this.get('totalLength');
+        if (!isNil(totalLength)) {
+            return totalLength;
+        }
+        this.set('totalLength', PolylineUtil.length(points));
+        return this.get('totalLength');
+    };
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    PolyLine.prototype.getPoint = function (ratio) {
+        var points = this.attr().points;
+        // get tCache from cache
+        var tCache = this.get('tCache');
+        if (!tCache) {
+            this._setTcache();
+            tCache = this.get('tCache');
+        }
+        var subt;
+        var index;
+        each(tCache, function (v, i) {
+            if (ratio >= v[0] && ratio <= v[1]) {
+                subt = (ratio - v[0]) / (v[1] - v[0]);
+                index = i;
+            }
+        });
+        return LineUtil.pointAt(points[index][0], points[index][1], points[index + 1][0], points[index + 1][1], subt);
+    };
+    PolyLine.prototype._setTcache = function () {
+        var points = this.attr().points;
+        if (!points || points.length === 0) {
+            return;
+        }
+        var totalLength = this.getTotalLength();
+        if (totalLength <= 0) {
+            return;
+        }
+        var tempLength = 0;
+        var tCache = [];
+        var segmentT;
+        var segmentL;
+        each(points, function (p, i) {
+            if (points[i + 1]) {
+                segmentT = [];
+                segmentT[0] = tempLength / totalLength;
+                segmentL = LineUtil.length(p[0], p[1], points[i + 1][0], points[i + 1][1]);
+                tempLength += segmentL;
+                segmentT[1] = tempLength / totalLength;
+                tCache.push(segmentT);
+            }
+        });
+        this.set('tCache', tCache);
+    };
     return PolyLine;
@@ -54,0 +125,0 @@ }(ShapeBase));

esm/shape/text.d.ts

@@ -31,2 +31,3 @@ /**
     _drawText(context: any, isFill: any): void;
+    strokeAndFill(context: any): void;
     fill(context: any): void;
@@ -33,0 +34,0 @@ stroke(context: any): void;

esm/shape/text.js

@@ -217,2 +217,29 @@ /**
     };
+    // 复写绘制和填充的逻辑：对于文本，应该先绘制边框，再进行填充
+    Text.prototype.strokeAndFill = function (context) {
+        var attrs = this.attrs;
+        var originOpacity = context.globalAlpha;
+        if (this.isStroke()) {
+            var lineWidth = attrs['lineWidth'];
+            if (lineWidth > 0) {
+                var strokeOpacity = attrs['strokeOpacity'];
+                if (!isNil(strokeOpacity) && strokeOpacity !== 1) {
+                    context.globalAlpha = strokeOpacity;
+                }
+                this.stroke(context);
+            }
+        }
+        if (this.isFill()) {
+            var fillOpacity = attrs['fillOpacity'];
+            if (!isNil(fillOpacity) && fillOpacity !== 1) {
+                context.globalAlpha = fillOpacity;
+                this.fill(context);
+                context.globalAlpha = originOpacity;
+            }
+            else {
+                this.fill(context);
+            }
+        }
+        this.afterDrawPath(context);
+    };
     // 复写填充逻辑
@@ -219,0 +246,0 @@ Text.prototype.fill = function (context) {

esm/util/arc-params.js

@@ -1,2 +0,2 @@
-import { mod, toRadian } from './util';
+import { mod, toRadian, isSamePoint } from './util';
 // 向量长度
@@ -6,5 +6,6 @@ function vMag(v) {
 }
-// u.v/|u||v|
+// u.v/|u||v|，计算夹角的余弦值
 function vRatio(u, v) {
-    return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
+    // 当存在一个向量的长度为 0 时，夹角也为 0，即夹角的余弦值为 1
+    return vMag(u) * vMag(v) ? (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v)) : 1;
 }
@@ -22,8 +23,10 @@ // 向量角度
     var sweepFlag = params[5];
+    // 弧形起点坐标
     var x1 = startPoint[0];
     var y1 = startPoint[1];
+    // 弧形终点坐标
     var x2 = params[6];
     var y2 = params[7];
-    var xp = Math.cos(xRotation) * (x1 - x2) / 2.0 + Math.sin(xRotation) * (y1 - y2) / 2.0;
-    var yp = -1 * Math.sin(xRotation) * (x1 - x2) / 2.0 + Math.cos(xRotation) * (y1 - y2) / 2.0;
+    var xp = (Math.cos(xRotation) * (x1 - x2)) / 2.0 + (Math.sin(xRotation) * (y1 - y2)) / 2.0;
+    var yp = (-1 * Math.sin(xRotation) * (x1 - x2)) / 2.0 + (Math.cos(xRotation) * (y1 - y2)) / 2.0;
     var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
@@ -34,4 +37,4 @@ if (lambda > 1) {
     }
-    var diff = (rx * rx) * (yp * yp) + (ry * ry) * (xp * xp);
-    var f = Math.sqrt((((rx * rx) * (ry * ry)) - diff) / diff);
+    var diff = rx * rx * (yp * yp) + ry * ry * (xp * xp);
+    var f = diff ? Math.sqrt((rx * rx * (ry * ry) - diff) / diff) : 1;
     if (arcFlag === sweepFlag) {
@@ -43,9 +46,15 @@ f *= -1;
     }
-    var cxp = f * rx * yp / ry;
-    var cyp = f * -ry * xp / rx;
+    // 旋转前的起点坐标
+    var cxp = (f * rx * yp) / ry;
+    var cyp = (f * -ry * xp) / rx;
+    // 椭圆圆心坐标
     var cx = (x1 + x2) / 2.0 + Math.cos(xRotation) * cxp - Math.sin(xRotation) * cyp;
     var cy = (y1 + y2) / 2.0 + Math.sin(xRotation) * cxp + Math.cos(xRotation) * cyp;
-    var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
+    // 起始点的单位向量
     var u = [(xp - cxp) / rx, (yp - cyp) / ry];
+    // 终止点的单位向量
     var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
+    // 计算起始点和圆心的连线，与 x 轴正方向的夹角
+    var theta = vAngle([1, 0], u);
+    // 计算圆弧起始点和终止点与椭圆圆心连线的夹角
     var dTheta = vAngle(u, v);
@@ -67,4 +76,5 @@ if (vRatio(u, v) <= -1) {
         cy: cy,
-        rx: rx,
-        ry: ry,
+        // 弧形的起点和终点相同时，长轴和短轴的长度按 0 处理
+        rx: isSamePoint(startPoint, [x2, y2]) ? 0 : rx,
+        ry: isSamePoint(startPoint, [x2, y2]) ? 0 : ry,
         startAngle: theta,
@@ -71,0 +81,0 @@ endAngle: theta + dTheta,

esm/util/path.d.ts

@@ -20,2 +20,12 @@ declare function hasArc(path: any): boolean;
 declare const _default: {
+    catmullRomToBezier: (crp: any, z: any) => any[];
+    fillPath: (source: any, target: any) => any;
+    fillPathByDiff: (source: any, target: any) => any;
+    formatPath: (fromPath: any, toPath: any) => any;
+    intersection: (path1: any, path2: any) => number | any[];
+    parsePathArray: (path: any) => any;
+    parsePathString: (pathString: string) => import("@antv/g-base/lib/types").PathCommand[];
+    pathToAbsolute: (pathArray: any) => any[];
+    pathToCurve: (path: any, path2?: any) => any[];
+    rectPath: (x: any, y: any, w: any, h: any, r?: any) => any[][];
     hasArc: typeof hasArc;
@@ -22,0 +32,0 @@ extractPolygons: typeof extractPolygons;

esm/util/path.js

@@ -0,1 +1,2 @@
+import { __assign } from "tslib";
 /**
@@ -5,2 +6,3 @@ * @fileoverview path 的一些工具
  */
+import { PathUtil } from '@antv/g-base';
 import getArcParams from './arc-params';
@@ -10,3 +12,3 @@ import QuadUtil from '@antv/g-math/lib/quadratic';
 import EllipseArcUtil from '@antv/g-math/lib/arc';
-import { inBox } from './util';
+import { inBox, isSamePoint } from './util';
 import inLine from './in-stroke/line';
@@ -165,6 +167,2 @@ import inArc from './in-stroke/arc';
 }
-// 判断两个点是否重合
-function isSamePoint(point1, point2) {
-    return point1[0] === point2[0] && point1[1] === point2[1];
-}
 // 获取 L segment 的外尖角与内夹角的距离 + 二分之一线宽
@@ -292,9 +290,7 @@ function getExtraFromSegmentWithAngle(segment, lineWidth) {
 }
-export default {
-    hasArc: hasArc,
+export default __assign({ hasArc: hasArc,
     extractPolygons: extractPolygons,
     getSegments: getSegments,
     getPathBox: getPathBox,
-    isPointInStroke: isPointInStroke,
-};
+    isPointInStroke: isPointInStroke }, PathUtil);
 //# sourceMappingURL=path.js.map

esm/util/util.d.ts

@@ -23,2 +23,8 @@ export declare function getPixelRatio(): number;
 export declare function mergeRegion(region1: any, region2: any): any;
+/**
+ * 判断两个点是否重合，点坐标的格式为 [x, y]
+ * @param {Array} point1 第一个点
+ * @param {Array} point2 第二个点
+ */
+export declare function isSamePoint(point1: any, point2: any): boolean;
 export { default as isNil } from '@antv/util/lib/is-nil';
@@ -25,0 +31,0 @@ export { default as isString } from '@antv/util/lib/is-string';

esm/util/util.js

@@ -54,2 +54,10 @@ export function getPixelRatio() {
 }
+/**
+ * 判断两个点是否重合，点坐标的格式为 [x, y]
+ * @param {Array} point1 第一个点
+ * @param {Array} point2 第二个点
+ */
+export function isSamePoint(point1, point2) {
+    return point1[0] === point2[0] && point1[1] === point2[1];
+}
 export { default as isNil } from '@antv/util/lib/is-nil';
@@ -56,0 +64,0 @@ export { default as isString } from '@antv/util/lib/is-string';

lib/canvas.js

@@ -42,2 +42,4 @@ "use strict";
         var cfg = _super.prototype.getDefaultCfg.call(this);
+        // 设置渲染引擎为 canvas，只读属性
+        cfg['renderer'] = 'canvas';
         // 是否自动绘制，不需要用户调用 draw 方法
@@ -44,0 +46,0 @@ cfg['autoDraw'] = true;

lib/shape/line.d.ts

@@ -1,16 +0,18 @@
-/**
- * @fileoverview 圆
- * @author [e-mail]
- */
 import ShapeBase from './base';
 declare class Line extends ShapeBase {
-    getInnerBox(attrs: any): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
+    getInnerBox(attrs: any): import("@antv/g-math/lib/types").BBox;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
     createPath(context: any): void;
+    /**
+     * Get length of line
+     * @return {number} length
+     */
+    getTotalLength(): number;
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    getPoint(ratio: number): import("@antv/g-math/lib/types").Point;
 }
 export default Line;

lib/shape/line.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 /**
@@ -6,7 +8,5 @@ * @fileoverview 圆
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+var line_1 = require("@antv/g-math/lib/line");
 var base_1 = require("./base");
-var line_1 = require("../util/in-stroke/line");
-var line_2 = require("@antv/g-math/lib/line");
+var line_2 = require("../util/in-stroke/line");
 var Line = /** @class */ (function (_super) {
@@ -19,3 +19,3 @@ tslib_1.__extends(Line, _super);
         var _a = this.attr(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
-        return line_2.default.box(x1, y1, x2, y2);
+        return line_1.default.box(x1, y1, x2, y2);
     };
@@ -27,3 +27,3 @@ Line.prototype.isInStrokeOrPath = function (x, y, isStroke, isFill, lineWidth) {
         var _a = this.attr(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
-        return line_1.default(x1, y1, x2, y2, lineWidth, x, y);
+        return line_2.default(x1, y1, x2, y2, lineWidth, x, y);
     };
@@ -37,2 +37,19 @@ Line.prototype.createPath = function (context) {
     };
+    /**
+     * Get length of line
+     * @return {number} length
+     */
+    Line.prototype.getTotalLength = function () {
+        var _a = this.attr(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
+        return line_1.default.length(x1, y1, x2, y2);
+    };
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    Line.prototype.getPoint = function (ratio) {
+        var _a = this.attr(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
+        return line_1.default.pointAt(x1, y1, x2, y2, ratio);
+    };
     return Line;
@@ -39,0 +56,0 @@ }(base_1.default));

lib/shape/path.d.ts

@@ -5,2 +5,3 @@ /**
  */
+import { Point } from '@antv/g-base/lib/types';
 import ShapeBase from './base';
@@ -20,3 +21,16 @@ declare class Path extends ShapeBase {
     createPath(context: any): void;
+    /**
+     * Get total length of path
+     * @return {number} length
+     */
+    getTotalLength(): any;
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    getPoint(ratio: number): Point;
+    _calculateCurve(): void;
+    _setTcache(): void;
 }
 export default Path;

lib/shape/path.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-/**
- * @fileoverview path
- * @author [e-mail]
- */
+var cubic_1 = require("@antv/g-math/lib/cubic");
+var util_1 = require("@antv/util");
 var base_1 = require("./base");
@@ -44,2 +42,5 @@ var path_2_absolute_1 = require("@antv/path-util/lib/path-2-absolute");
         this.set('segments', null); // 延迟生成 path，在动画场景下可能不会有拾取
+        this.set('curve', null);
+        this.set('tCache', null);
+        this.set('totalLength', null);
     };
@@ -92,2 +93,98 @@ Path.prototype.getInnerBox = function (attrs) {
     };
+    /**
+     * Get total length of path
+     * @return {number} length
+     */
+    Path.prototype.getTotalLength = function () {
+        var totalLength = this.get('totalLength');
+        if (!util_1.isNil(totalLength)) {
+            return totalLength;
+        }
+        this._calculateCurve();
+        this._setTcache();
+        return this.get('totalLength');
+    };
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    Path.prototype.getPoint = function (ratio) {
+        var tCache = this.get('tCache');
+        if (!tCache) {
+            this._calculateCurve();
+            this._setTcache();
+            tCache = this.get('tCache');
+        }
+        var subt;
+        var index;
+        var curve = this.get('curve');
+        if (!tCache || tCache.length === 0) {
+            if (curve) {
+                return {
+                    x: curve[0][1],
+                    y: curve[0][2],
+                };
+            }
+            return null;
+        }
+        util_1.each(tCache, function (v, i) {
+            if (ratio >= v[0] && ratio <= v[1]) {
+                subt = (ratio - v[0]) / (v[1] - v[0]);
+                index = i;
+            }
+        });
+        var seg = curve[index];
+        if (util_1.isNil(seg) || util_1.isNil(index)) {
+            return null;
+        }
+        var l = seg.length;
+        var nextSeg = curve[index + 1];
+        return cubic_1.default.pointAt(seg[l - 2], seg[l - 1], nextSeg[1], nextSeg[2], nextSeg[3], nextSeg[4], nextSeg[5], nextSeg[6], subt);
+    };
+    Path.prototype._calculateCurve = function () {
+        var path = this.attr().path;
+        this.set('curve', path_1.default.pathToCurve(path));
+    };
+    Path.prototype._setTcache = function () {
+        var totalLength = 0;
+        var tempLength = 0;
+        // 每段 curve 对应起止点的长度比例列表，形如: [[0, 0.25], [0.25, 0.6]. [0.6, 0.9], [0.9, 1]]
+        var tCache = [];
+        var segmentT;
+        var segmentL;
+        var segmentN;
+        var l;
+        var curve = this.get('curve');
+        if (!curve) {
+            return;
+        }
+        util_1.each(curve, function (segment, i) {
+            segmentN = curve[i + 1];
+            l = segment.length;
+            if (segmentN) {
+                totalLength +=
+                    cubic_1.default.length(segment[l - 2], segment[l - 1], segmentN[1], segmentN[2], segmentN[3], segmentN[4], segmentN[5], segmentN[6]) || 0;
+            }
+        });
+        this.set('totalLength', totalLength);
+        if (totalLength === 0) {
+            this.set('tCache', []);
+            return;
+        }
+        util_1.each(curve, function (segment, i) {
+            segmentN = curve[i + 1];
+            l = segment.length;
+            if (segmentN) {
+                segmentT = [];
+                segmentT[0] = tempLength / totalLength;
+                segmentL = cubic_1.default.length(segment[l - 2], segment[l - 1], segmentN[1], segmentN[2], segmentN[3], segmentN[4], segmentN[5], segmentN[6]);
+                // 当 path 不连续时，segmentL 可能为空，为空时需要作为 0 处理
+                tempLength += segmentL || 0;
+                segmentT[1] = tempLength / totalLength;
+                tCache.push(segmentT);
+            }
+        });
+        this.set('tCache', tCache);
+    };
     return Path;
@@ -94,0 +191,0 @@ }(base_1.default));

lib/shape/polygon.d.ts

@@ -7,8 +7,3 @@ /**
 declare class Polygon extends ShapeBase {
-    getInnerBox(attrs: any): {
-        x: any;
-        y: any;
-        width: number;
-        height: number;
-    };
+    getInnerBox(attrs: any): import("@antv/g-math/lib/types").BBox;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
@@ -15,0 +10,0 @@ createPath(context: any): void;

lib/shape/polyline.d.ts

@@ -5,15 +5,25 @@ /**
  */
+import { Point } from '@antv/g-base/lib/types';
 import ShapeBase from './base';
 declare class PolyLine extends ShapeBase {
+    onAttrChange(name: string, value: any, originValue: any): void;
+    _resetCache(): void;
     isFill(): boolean;
-    getInnerBox(attrs: any): {
-        x: any;
-        y: any;
-        width: number;
-        height: number;
-    };
+    getInnerBox(attrs: any): import("@antv/g-math/lib/types").BBox;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
     isStroke(): boolean;
     createPath(context: any): void;
+    /**
+     * Get length of polyline
+     * @return {number} length
+     */
+    getTotalLength(): any;
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    getPoint(ratio: number): Point;
+    _setTcache(): void;
 }
 export default PolyLine;

lib/shape/polyline.js

 "use strict";
-/**
- * @fileoverview 多边形
- * @author [e-mail]
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var line_1 = require("@antv/g-math/lib/line");
+var polyline_1 = require("@antv/g-math/lib/polyline");
+var util_1 = require("@antv/util");
 var base_1 = require("./base");
-var polyline_1 = require("../util/in-stroke/polyline");
-var polyline_2 = require("@antv/g-math/lib/polyline");
+var polyline_2 = require("../util/in-stroke/polyline");
 var PolyLine = /** @class */ (function (_super) {
@@ -16,2 +14,13 @@ tslib_1.__extends(PolyLine, _super);
     }
+    // 更新属性时，检测是否更改了 points
+    PolyLine.prototype.onAttrChange = function (name, value, originValue) {
+        _super.prototype.onAttrChange.call(this, name, value, originValue);
+        if (['points'].indexOf(name) !== -1) {
+            this._resetCache();
+        }
+    };
+    PolyLine.prototype._resetCache = function () {
+        this.set('totalLength', null);
+        this.set('tCache', null);
+    };
     // 不允许 fill
@@ -23,3 +32,3 @@ PolyLine.prototype.isFill = function () {
         var points = attrs.points;
-        return polyline_2.default.box(points);
+        return polyline_1.default.box(points);
     };
@@ -32,3 +41,3 @@ PolyLine.prototype.isInStrokeOrPath = function (x, y, isStroke, isFill, lineWidth) {
         var points = this.attr().points;
-        return polyline_1.default(points, lineWidth, x, y, false);
+        return polyline_2.default(points, lineWidth, x, y, false);
     };
@@ -56,2 +65,64 @@ // 始终填充
     };
+    /**
+     * Get length of polyline
+     * @return {number} length
+     */
+    PolyLine.prototype.getTotalLength = function () {
+        var points = this.attr().points;
+        // get totalLength from cache
+        var totalLength = this.get('totalLength');
+        if (!util_1.isNil(totalLength)) {
+            return totalLength;
+        }
+        this.set('totalLength', polyline_1.default.length(points));
+        return this.get('totalLength');
+    };
+    /**
+     * Get point according to ratio
+     * @param {number} ratio
+     * @return {Point} point
+     */
+    PolyLine.prototype.getPoint = function (ratio) {
+        var points = this.attr().points;
+        // get tCache from cache
+        var tCache = this.get('tCache');
+        if (!tCache) {
+            this._setTcache();
+            tCache = this.get('tCache');
+        }
+        var subt;
+        var index;
+        util_1.each(tCache, function (v, i) {
+            if (ratio >= v[0] && ratio <= v[1]) {
+                subt = (ratio - v[0]) / (v[1] - v[0]);
+                index = i;
+            }
+        });
+        return line_1.default.pointAt(points[index][0], points[index][1], points[index + 1][0], points[index + 1][1], subt);
+    };
+    PolyLine.prototype._setTcache = function () {
+        var points = this.attr().points;
+        if (!points || points.length === 0) {
+            return;
+        }
+        var totalLength = this.getTotalLength();
+        if (totalLength <= 0) {
+            return;
+        }
+        var tempLength = 0;
+        var tCache = [];
+        var segmentT;
+        var segmentL;
+        util_1.each(points, function (p, i) {
+            if (points[i + 1]) {
+                segmentT = [];
+                segmentT[0] = tempLength / totalLength;
+                segmentL = line_1.default.length(p[0], p[1], points[i + 1][0], points[i + 1][1]);
+                tempLength += segmentL;
+                segmentT[1] = tempLength / totalLength;
+                tCache.push(segmentT);
+            }
+        });
+        this.set('tCache', tCache);
+    };
     return PolyLine;
@@ -58,0 +129,0 @@ }(base_1.default));

lib/shape/text.d.ts

@@ -31,2 +31,3 @@ /**
     _drawText(context: any, isFill: any): void;
+    strokeAndFill(context: any): void;
     fill(context: any): void;
@@ -33,0 +34,0 @@ stroke(context: any): void;

lib/shape/text.js

@@ -219,2 +219,29 @@ "use strict";
     };
+    // 复写绘制和填充的逻辑：对于文本，应该先绘制边框，再进行填充
+    Text.prototype.strokeAndFill = function (context) {
+        var attrs = this.attrs;
+        var originOpacity = context.globalAlpha;
+        if (this.isStroke()) {
+            var lineWidth = attrs['lineWidth'];
+            if (lineWidth > 0) {
+                var strokeOpacity = attrs['strokeOpacity'];
+                if (!util_1.isNil(strokeOpacity) && strokeOpacity !== 1) {
+                    context.globalAlpha = strokeOpacity;
+                }
+                this.stroke(context);
+            }
+        }
+        if (this.isFill()) {
+            var fillOpacity = attrs['fillOpacity'];
+            if (!util_1.isNil(fillOpacity) && fillOpacity !== 1) {
+                context.globalAlpha = fillOpacity;
+                this.fill(context);
+                context.globalAlpha = originOpacity;
+            }
+            else {
+                this.fill(context);
+            }
+        }
+        this.afterDrawPath(context);
+    };
     // 复写填充逻辑
@@ -221,0 +248,0 @@ Text.prototype.fill = function (context) {

lib/util/arc-params.js

@@ -8,5 +8,6 @@ "use strict";
 }
-// u.v/|u||v|
+// u.v/|u||v|，计算夹角的余弦值
 function vRatio(u, v) {
-    return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
+    // 当存在一个向量的长度为 0 时，夹角也为 0，即夹角的余弦值为 1
+    return vMag(u) * vMag(v) ? (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v)) : 1;
 }
@@ -24,8 +25,10 @@ // 向量角度
     var sweepFlag = params[5];
+    // 弧形起点坐标
     var x1 = startPoint[0];
     var y1 = startPoint[1];
+    // 弧形终点坐标
     var x2 = params[6];
     var y2 = params[7];
-    var xp = Math.cos(xRotation) * (x1 - x2) / 2.0 + Math.sin(xRotation) * (y1 - y2) / 2.0;
-    var yp = -1 * Math.sin(xRotation) * (x1 - x2) / 2.0 + Math.cos(xRotation) * (y1 - y2) / 2.0;
+    var xp = (Math.cos(xRotation) * (x1 - x2)) / 2.0 + (Math.sin(xRotation) * (y1 - y2)) / 2.0;
+    var yp = (-1 * Math.sin(xRotation) * (x1 - x2)) / 2.0 + (Math.cos(xRotation) * (y1 - y2)) / 2.0;
     var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
@@ -36,4 +39,4 @@ if (lambda > 1) {
     }
-    var diff = (rx * rx) * (yp * yp) + (ry * ry) * (xp * xp);
-    var f = Math.sqrt((((rx * rx) * (ry * ry)) - diff) / diff);
+    var diff = rx * rx * (yp * yp) + ry * ry * (xp * xp);
+    var f = diff ? Math.sqrt((rx * rx * (ry * ry) - diff) / diff) : 1;
     if (arcFlag === sweepFlag) {
@@ -45,9 +48,15 @@ f *= -1;
     }
-    var cxp = f * rx * yp / ry;
-    var cyp = f * -ry * xp / rx;
+    // 旋转前的起点坐标
+    var cxp = (f * rx * yp) / ry;
+    var cyp = (f * -ry * xp) / rx;
+    // 椭圆圆心坐标
     var cx = (x1 + x2) / 2.0 + Math.cos(xRotation) * cxp - Math.sin(xRotation) * cyp;
     var cy = (y1 + y2) / 2.0 + Math.sin(xRotation) * cxp + Math.cos(xRotation) * cyp;
-    var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
+    // 起始点的单位向量
     var u = [(xp - cxp) / rx, (yp - cyp) / ry];
+    // 终止点的单位向量
     var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
+    // 计算起始点和圆心的连线，与 x 轴正方向的夹角
+    var theta = vAngle([1, 0], u);
+    // 计算圆弧起始点和终止点与椭圆圆心连线的夹角
     var dTheta = vAngle(u, v);
@@ -69,4 +78,5 @@ if (vRatio(u, v) <= -1) {
         cy: cy,
-        rx: rx,
-        ry: ry,
+        // 弧形的起点和终点相同时，长轴和短轴的长度按 0 处理
+        rx: util_1.isSamePoint(startPoint, [x2, y2]) ? 0 : rx,
+        ry: util_1.isSamePoint(startPoint, [x2, y2]) ? 0 : ry,
         startAngle: theta,
@@ -73,0 +83,0 @@ endAngle: theta + dTheta,

lib/util/path.d.ts

@@ -20,2 +20,12 @@ declare function hasArc(path: any): boolean;
 declare const _default: {
+    catmullRomToBezier: (crp: any, z: any) => any[];
+    fillPath: (source: any, target: any) => any;
+    fillPathByDiff: (source: any, target: any) => any;
+    formatPath: (fromPath: any, toPath: any) => any;
+    intersection: (path1: any, path2: any) => number | any[];
+    parsePathArray: (path: any) => any;
+    parsePathString: (pathString: string) => import("@antv/g-base/lib/types").PathCommand[];
+    pathToAbsolute: (pathArray: any) => any[];
+    pathToCurve: (path: any, path2?: any) => any[];
+    rectPath: (x: any, y: any, w: any, h: any, r?: any) => any[][];
     hasArc: typeof hasArc;
@@ -22,0 +32,0 @@ extractPolygons: typeof extractPolygons;

lib/util/path.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 /**
@@ -7,2 +8,3 @@ * @fileoverview path 的一些工具
  */
+var g_base_1 = require("@antv/g-base");
 var arc_params_1 = require("./arc-params");
@@ -80,3 +82,3 @@ var quadratic_1 = require("@antv/g-math/lib/quadratic");
         if (segments[lastStartMovePointIndex] &&
-            isSamePoint(currentPoint, segments[lastStartMovePointIndex].currentPoint)) {
+            util_1.isSamePoint(currentPoint, segments[lastStartMovePointIndex].currentPoint)) {
             segments[lastStartMovePointIndex].prePoint = segment.prePoint;
@@ -167,6 +169,2 @@ }
 }
-// 判断两个点是否重合
-function isSamePoint(point1, point2) {
-    return point1[0] === point2[0] && point1[1] === point2[1];
-}
 // 获取 L segment 的外尖角与内夹角的距离 + 二分之一线宽
@@ -294,9 +292,7 @@ function getExtraFromSegmentWithAngle(segment, lineWidth) {
 }
-exports.default = {
-    hasArc: hasArc,
+exports.default = tslib_1.__assign({ hasArc: hasArc,
     extractPolygons: extractPolygons,
     getSegments: getSegments,
     getPathBox: getPathBox,
-    isPointInStroke: isPointInStroke,
-};
+    isPointInStroke: isPointInStroke }, g_base_1.PathUtil);
 //# sourceMappingURL=path.js.map

lib/util/util.d.ts

@@ -23,2 +23,8 @@ export declare function getPixelRatio(): number;
 export declare function mergeRegion(region1: any, region2: any): any;
+/**
+ * 判断两个点是否重合，点坐标的格式为 [x, y]
+ * @param {Array} point1 第一个点
+ * @param {Array} point2 第二个点
+ */
+export declare function isSamePoint(point1: any, point2: any): boolean;
 export { default as isNil } from '@antv/util/lib/is-nil';
@@ -25,0 +31,0 @@ export { default as isString } from '@antv/util/lib/is-string';

lib/util/util.js

@@ -62,2 +62,11 @@ "use strict";
 exports.mergeRegion = mergeRegion;
+/**
+ * 判断两个点是否重合，点坐标的格式为 [x, y]
+ * @param {Array} point1 第一个点
+ * @param {Array} point2 第二个点
+ */
+function isSamePoint(point1, point2) {
+    return point1[0] === point2[0] && point1[1] === point2[1];
+}
+exports.isSamePoint = isSamePoint;
 var is_nil_1 = require("@antv/util/lib/is-nil");
@@ -64,0 +73,0 @@ exports.isNil = is_nil_1.default;

package.json

 {
   "name": "@antv/g-canvas",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A canvas library which providing 2d",
@@ -58,4 +58,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@antv/g-base": "^0.1.1",
-    "@antv/g-math": "^0.1.0-beta.4",
+    "@antv/g-base": "^0.2.0",
+    "@antv/g-math": "^0.1.0",
     "@antv/gl-matrix": "~2.7.1",
@@ -66,3 +66,3 @@ "@antv/path-util": "~2.0.3-beta.1",
   "__npminstall_done": false,
-  "gitHead": "6f54ee90b1e9b9eee155d55419e1059935d44ff3"
+  "gitHead": "6804098ea6cc26dadf16615e755d27430ae9f8fd"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1238255

increased by4.32%

Lines of code

6898

increased by8.6%

Dependency changes

• + Added@antv/g-base@0.2.0(transitive)

• - Removed@antv/g-base@0.1.1(transitive)

• Updated@antv/g-base@^0.2.0

• Updated@antv/g-math@^0.1.0