@antv/g-canvas - npm Package Compare versions

Comparing version 0.3.29 to 0.4.0

esm/shape/line.d.ts

@@ -17,2 +17,5 @@ import ShapeBase from './base';
     };
+    initAttrs(attrs: any): void;
+    onAttrChange(name: string, value: any, originValue: any): void;
+    setArrow(): void;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
@@ -19,0 +22,0 @@ createPath(context: any): void;

esm/shape/line.js

@@ -19,2 +19,21 @@ import { __assign, __extends } from "tslib";
     };
+    Line.prototype.initAttrs = function (attrs) {
+        this.setArrow();
+    };
+    // 更新属性时，检测是否更改了箭头
+    Line.prototype.onAttrChange = function (name, value, originValue) {
+        _super.prototype.onAttrChange.call(this, name, value, originValue);
+        // 由于箭头的绘制依赖于 line 的诸多 attrs，因此这里不再对每个 attr 进行判断，attr 每次变化都会影响箭头的更新
+        this.setArrow();
+    };
+    Line.prototype.setArrow = function () {
+        var attrs = this.attr();
+        var x1 = attrs.x1, y1 = attrs.y1, x2 = attrs.x2, y2 = attrs.y2, startArrow = attrs.startArrow, endArrow = attrs.endArrow;
+        if (startArrow) {
+            ArrowUtil.addStartArrow(this, attrs, x2, y2, x1, y1);
+        }
+        if (endArrow) {
+            ArrowUtil.addEndArrow(this, attrs, x1, y1, x2, y2);
+        }
+    };
     Line.prototype.isInStrokeOrPath = function (x, y, isStroke, isFill, lineWidth) {
@@ -50,9 +69,9 @@ if (!isStroke || !lineWidth) {
     Line.prototype.afterDrawPath = function (context) {
-        var attrs = this.attr();
-        var x1 = attrs.x1, y1 = attrs.y1, x2 = attrs.x2, y2 = attrs.y2;
-        if (attrs.startArrow) {
-            ArrowUtil.addStartArrow(context, attrs, x2, y2, x1, y1);
+        var startArrowShape = this.get('startArrowShape');
+        var endArrowShape = this.get('endArrowShape');
+        if (startArrowShape) {
+            startArrowShape.draw(context);
         }
-        if (attrs.endArrow) {
-            ArrowUtil.addEndArrow(context, attrs, x1, y1, x2, y2);
+        if (endArrowShape) {
+            endArrowShape.draw(context);
         }
@@ -59,0 +78,0 @@ };

esm/shape/path.d.ts

@@ -19,6 +19,7 @@ /**
     initAttrs(attrs: any): void;
+    onAttrChange(name: string, value: any, originValue: any): void;
     _setPathArr(path: any): void;
     getSegments(): any;
+    setArrow(): void;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
-    onAttrChange(name: string, value: any, originValue: any): void;
     createPath(context: any): void;
@@ -25,0 +26,0 @@ afterDrawPath(context: CanvasRenderingContext2D): void;

esm/shape/path.js

@@ -35,3 +35,13 @@ import { __assign, __extends } from "tslib";
         this._setPathArr(attrs.path);
+        this.setArrow();
     };
+    // 更新属性时，检测是否更改了 path
+    Path.prototype.onAttrChange = function (name, value, originValue) {
+        _super.prototype.onAttrChange.call(this, name, value, originValue);
+        if (name === 'path') {
+            this._setPathArr(value);
+        }
+        // 由于箭头的绘制依赖于 line 的诸多 attrs，因此这里不再对每个 attr 进行判断，attr 每次变化都会影响箭头的更新
+        this.setArrow();
+    };
     // 将 path 转换成绝对路径
@@ -59,2 +69,14 @@ Path.prototype._setPathArr = function (path) {
     };
+    Path.prototype.setArrow = function () {
+        var attrs = this.attr();
+        var startArrow = attrs.startArrow, endArrow = attrs.endArrow;
+        if (startArrow) {
+            var tangent = this.getStartTangent();
+            ArrowUtil.addStartArrow(this, attrs, tangent[0][0], tangent[0][1], tangent[1][0], tangent[1][1]);
+        }
+        if (endArrow) {
+            var tangent = this.getEndTangent();
+            ArrowUtil.addEndArrow(this, attrs, tangent[0][0], tangent[0][1], tangent[1][0], tangent[1][1]);
+        }
+    };
     Path.prototype.isInStrokeOrPath = function (x, y, isStroke, isFill, lineWidth) {
@@ -81,9 +103,2 @@ var segments = this.getSegments();
     };
-    // 更新属性时，检测是否更改了 path
-    Path.prototype.onAttrChange = function (name, value, originValue) {
-        _super.prototype.onAttrChange.call(this, name, value, originValue);
-        if (name === 'path') {
-            this._setPathArr(value);
-        }
-    };
     Path.prototype.createPath = function (context) {
@@ -95,11 +110,9 @@ var attrs = this.attr();
     Path.prototype.afterDrawPath = function (context) {
-        var attrs = this.attr();
-        var startArrow = attrs.startArrow, endArrow = attrs.endArrow;
-        if (startArrow) {
-            var tangent = this.getStartTangent();
-            ArrowUtil.addStartArrow(context, attrs, tangent[0][0], tangent[0][1], tangent[1][0], tangent[1][1]);
+        var startArrowShape = this.get('startArrowShape');
+        var endArrowShape = this.get('endArrowShape');
+        if (startArrowShape) {
+            startArrowShape.draw(context);
         }
-        if (endArrow) {
-            var tangent = this.getEndTangent();
-            ArrowUtil.addEndArrow(context, attrs, tangent[0][0], tangent[0][1], tangent[1][0], tangent[1][1]);
+        if (endArrowShape) {
+            endArrowShape.draw(context);
         }
@@ -106,0 +119,0 @@ };

esm/shape/polyline.d.ts

@@ -18,4 +18,6 @@ /**
     };
+    initAttrs(attrs: any): void;
     onAttrChange(name: string, value: any, originValue: any): void;
     _resetCache(): void;
+    setArrow(): void;
     isFill(): boolean;
@@ -22,0 +24,0 @@ isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;

esm/shape/polyline.js

@@ -17,5 +17,9 @@ import { __assign, __extends } from "tslib";
     };
+    PolyLine.prototype.initAttrs = function (attrs) {
+        this.setArrow();
+    };
     // 更新属性时，检测是否更改了 points
     PolyLine.prototype.onAttrChange = function (name, value, originValue) {
         _super.prototype.onAttrChange.call(this, name, value, originValue);
+        this.setArrow();
         if (['points'].indexOf(name) !== -1) {
@@ -29,2 +33,17 @@ this._resetCache();
     };
+    PolyLine.prototype.setArrow = function () {
+        var attrs = this.attr();
+        var _a = this.attrs, points = _a.points, startArrow = _a.startArrow, endArrow = _a.endArrow;
+        var length = points.length;
+        var x1 = points[0][0];
+        var y1 = points[0][1];
+        var x2 = points[length - 1][0];
+        var y2 = points[length - 1][1];
+        if (startArrow) {
+            ArrowUtil.addStartArrow(this, attrs, points[1][0], points[1][1], x1, y1);
+        }
+        if (endArrow) {
+            ArrowUtil.addEndArrow(this, attrs, points[length - 2][0], points[length - 2][1], x2, y2);
+        }
+    };
     // 不允许 fill
@@ -76,14 +95,9 @@ PolyLine.prototype.isFill = function () {
     PolyLine.prototype.afterDrawPath = function (context) {
-        var attrs = this.attr();
-        var _a = this.attrs, points = _a.points, startArrow = _a.startArrow, endArrow = _a.endArrow;
-        var length = points.length;
-        var x1 = points[0][0];
-        var y1 = points[0][1];
-        var x2 = points[length - 1][0];
-        var y2 = points[length - 1][1];
-        if (startArrow) {
-            ArrowUtil.addStartArrow(context, attrs, points[1][0], points[1][1], x1, y1);
+        var startArrowShape = this.get('startArrowShape');
+        var endArrowShape = this.get('endArrowShape');
+        if (startArrowShape) {
+            startArrowShape.draw(context);
         }
-        if (endArrow) {
-            ArrowUtil.addEndArrow(context, attrs, points[length - 2][0], points[length - 2][1], x2, y2);
+        if (endArrowShape) {
+            endArrowShape.draw(context);
         }
@@ -90,0 +104,0 @@ };

esm/util/arrow.d.ts

@@ -19,3 +19,3 @@ /**
  * 绘制起始箭头
- * @param {CanvasRenderingContext2D} ctx 绘图上下文
+ * @param {IShape} shape 图形
  * @param {ShapeAttrs} attrs shape 的绘图属性
@@ -27,6 +27,6 @@ * @param {number} x1 起始点 x
  */
-export declare function addStartArrow(ctx: any, attrs: any, x1: any, y1: any, x2: any, y2: any): void;
+export declare function addStartArrow(shape: any, attrs: any, x1: any, y1: any, x2: any, y2: any): void;
 /**
  * 绘制结束箭头
- * @param {CanvasRenderingContext2D} ctx 绘图上下文
+ * @param {IShape} shape 图形
  * @param {ShapeAttrs} attrs shape 的绘图属性
@@ -38,2 +38,2 @@ * @param {number} x1 起始点 x
  */
-export declare function addEndArrow(ctx: any, attrs: any, x1: any, y1: any, x2: any, y2: any): void;
+export declare function addEndArrow(shape: any, attrs: any, x1: any, y1: any, x2: any, y2: any): void;

esm/util/arrow.js

 import { __assign, __rest } from "tslib";
 import { Path } from '../shape';
-var PI = Math.PI;
 var sin = Math.sin;
 var cos = Math.cos;
-var atan2 = Math.atan2;
-var DEFAULT_LENGTH = 10;
-var DEFAULT_ANGLE = PI / 3;
-function _addArrow(ctx, attrs, x1, y1, x2, y2, isStart) {
-    var leftX;
-    var leftY;
-    var rightX;
-    var rightY;
-    var offsetX;
-    var offsetY;
-    var angle;
-    var arrowLength = attrs.arrowLength || DEFAULT_LENGTH;
-    var arrowAngle = attrs.arrowAngle ? (attrs.arrowAngle * PI) / 180 : DEFAULT_ANGLE; // 转换为弧
-    // Calculate angle
-    angle = atan2(y1 - y2, x1 - x2);
-    /* // Adjust angle correctly
-    angle -= PI;*/
-    // Calculate offset to place arrow at edge of path
-    offsetX = Math.abs(attrs.lineWidth * cos(angle)) / 2;
-    offsetY = Math.abs(attrs.lineWidth * sin(angle)) / 2;
-    if (isStart) {
-        offsetX = -offsetX;
-        offsetY = -offsetY;
-    }
-    // Calculate coordinates for left half of arrow
-    leftX = x2 + arrowLength * cos(angle + arrowAngle / 2);
-    leftY = y2 + arrowLength * sin(angle + arrowAngle / 2);
-    // Calculate coordinates for right half of arrow
-    rightX = x2 + arrowLength * cos(angle - arrowAngle / 2);
-    rightY = y2 + arrowLength * sin(angle - arrowAngle / 2);
-    ctx.beginPath();
-    // Draw left half of arrow
-    ctx.moveTo(leftX - offsetX, leftY - offsetY);
-    ctx.lineTo(x2 - offsetX, y2 - offsetY);
-    // Draw right half of arrow
-    ctx.lineTo(rightX - offsetX, rightY - offsetY);
-    // Visually connect arrow to path
-    ctx.moveTo(x2 - offsetX, y2 - offsetY);
-    ctx.lineTo(x2 + offsetX, y2 + offsetY);
-    // Move back to end of path
-    ctx.moveTo(x2, y2);
-    ctx.stroke();
+function _addDefaultArrow(shape, attrs, x1, y1, x2, y2, isStart) {
+    var stroke = attrs.stroke, lineWidth = attrs.lineWidth;
+    var x = x1 - x2;
+    var y = y1 - y2;
+    var rad = Math.atan2(y, x);
+    var arrowShape = new Path({
+        type: 'path',
+        canvas: shape.get('canvas'),
+        isArrowShape: true,
+        attrs: {
+            // 默认箭头的边长为 10，夹角为 60 度
+            path: "M" + 10 * Math.cos(Math.PI / 6) + "," + 10 * Math.sin(Math.PI / 6) + " L0,0 L" + 10 * Math.cos(Math.PI / 6) + ",-" + 10 *
+                Math.sin(Math.PI / 6),
+            // 使用 shape stroke 值
+            stroke: stroke,
+            lineWidth: lineWidth,
+        },
+    });
+    arrowShape.translate(x2, y2);
+    arrowShape.rotateAtPoint(x2, y2, rad);
+    shape.set(isStart ? 'startArrowShape' : 'endArrowShape', arrowShape);
 }
-function _addCustomizedArrow(ctx, attrs, x1, y1, x2, y2, isStart) {
-    var startArrow = attrs.startArrow, endArrow = attrs.endArrow, fill = attrs.fill, stroke = attrs.stroke;
+/**
+ * 箭头 path 的设置要求
+ * 1. 箭头顶点坐标需要为 (0, 0)
+ * 2. 箭头夹角的中心分割线需要与 X 轴正方向对齐
+ */
+function _addCustomizedArrow(shape, attrs, x1, y1, x2, y2, isStart) {
+    var startArrow = attrs.startArrow, endArrow = attrs.endArrow, stroke = attrs.stroke, lineWidth = attrs.lineWidth;
     var arrowAttrs = isStart ? startArrow : endArrow;
-    var d = arrowAttrs.d, arrowFill = arrowAttrs.fill, arrowStroke = arrowAttrs.stroke, restAttrs = __rest(arrowAttrs, ["d", "fill", "stroke"]);
-    var x = x2 - x1;
-    var y = y2 - y1;
+    var d = arrowAttrs.d, arrowFill = arrowAttrs.fill, arrowStroke = arrowAttrs.stroke, arrowLineWidth = arrowAttrs.lineWidth, restAttrs = __rest(arrowAttrs, ["d", "fill", "stroke", "lineWidth"]);
+    var x = x1 - x2;
+    var y = y1 - y2;
     var rad = Math.atan2(y, x);
@@ -62,11 +45,11 @@ if (d) {
         type: 'path',
+        canvas: shape.get('canvas'),
+        isArrowShape: true,
         attrs: __assign(__assign({}, restAttrs), { 
-            // 支持单独设置箭头的 fill 和 stroke，若为空则使用 shape 的值
-            fill: arrowFill || fill || stroke, stroke: arrowStroke || stroke }),
+            // 支持单独设置箭头的 stroke，若为空则使用 shape 的值
+            stroke: arrowStroke || stroke, lineWidth: arrowLineWidth || lineWidth }),
     });
-    ctx.save();
-    ctx.translate(x2, y2);
-    ctx.rotate(rad);
-    arrowShape.draw(ctx);
-    ctx.restore();
+    arrowShape.translate(x2, y2);
+    arrowShape.rotateAtPoint(x2, y2, rad);
+    shape.set(isStart ? 'startArrowShape' : 'endArrowShape', arrowShape);
 }
@@ -94,3 +77,3 @@ /**
  * 绘制起始箭头
- * @param {CanvasRenderingContext2D} ctx 绘图上下文
+ * @param {IShape} shape 图形
  * @param {ShapeAttrs} attrs shape 的绘图属性
@@ -102,13 +85,16 @@ * @param {number} x1 起始点 x
  */
-export function addStartArrow(ctx, attrs, x1, y1, x2, y2) {
+export function addStartArrow(shape, attrs, x1, y1, x2, y2) {
     if (typeof attrs.startArrow === 'object') {
-        _addCustomizedArrow(ctx, attrs, x1, y1, x2, y2, true);
+        _addCustomizedArrow(shape, attrs, x1, y1, x2, y2, true);
     }
     else if (attrs.startArrow) {
-        _addArrow(ctx, attrs, x1, y1, x2, y2, true);
+        _addDefaultArrow(shape, attrs, x1, y1, x2, y2, true);
     }
+    else {
+        shape.set('startArrowShape', null);
+    }
 }
 /**
  * 绘制结束箭头
- * @param {CanvasRenderingContext2D} ctx 绘图上下文
+ * @param {IShape} shape 图形
  * @param {ShapeAttrs} attrs shape 的绘图属性
@@ -120,10 +106,13 @@ * @param {number} x1 起始点 x
  */
-export function addEndArrow(ctx, attrs, x1, y1, x2, y2) {
+export function addEndArrow(shape, attrs, x1, y1, x2, y2) {
     if (typeof attrs.endArrow === 'object') {
-        _addCustomizedArrow(ctx, attrs, x1, y1, x2, y2, false);
+        _addCustomizedArrow(shape, attrs, x1, y1, x2, y2, false);
     }
     else if (attrs.endArrow) {
-        _addArrow(ctx, attrs, x1, y1, x2, y2, false);
+        _addDefaultArrow(shape, attrs, x1, y1, x2, y2, false);
     }
+    else {
+        shape.set('startArrowShape', null);
+    }
 }
 //# sourceMappingURL=arrow.js.map

lib/shape/line.d.ts

@@ -17,2 +17,5 @@ import ShapeBase from './base';
     };
+    initAttrs(attrs: any): void;
+    onAttrChange(name: string, value: any, originValue: any): void;
+    setArrow(): void;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
@@ -19,0 +22,0 @@ createPath(context: any): void;

lib/shape/line.js

@@ -21,2 +21,21 @@ "use strict";
     };
+    Line.prototype.initAttrs = function (attrs) {
+        this.setArrow();
+    };
+    // 更新属性时，检测是否更改了箭头
+    Line.prototype.onAttrChange = function (name, value, originValue) {
+        _super.prototype.onAttrChange.call(this, name, value, originValue);
+        // 由于箭头的绘制依赖于 line 的诸多 attrs，因此这里不再对每个 attr 进行判断，attr 每次变化都会影响箭头的更新
+        this.setArrow();
+    };
+    Line.prototype.setArrow = function () {
+        var attrs = this.attr();
+        var x1 = attrs.x1, y1 = attrs.y1, x2 = attrs.x2, y2 = attrs.y2, startArrow = attrs.startArrow, endArrow = attrs.endArrow;
+        if (startArrow) {
+            ArrowUtil.addStartArrow(this, attrs, x2, y2, x1, y1);
+        }
+        if (endArrow) {
+            ArrowUtil.addEndArrow(this, attrs, x1, y1, x2, y2);
+        }
+    };
     Line.prototype.isInStrokeOrPath = function (x, y, isStroke, isFill, lineWidth) {
@@ -52,9 +71,9 @@ if (!isStroke || !lineWidth) {
     Line.prototype.afterDrawPath = function (context) {
-        var attrs = this.attr();
-        var x1 = attrs.x1, y1 = attrs.y1, x2 = attrs.x2, y2 = attrs.y2;
-        if (attrs.startArrow) {
-            ArrowUtil.addStartArrow(context, attrs, x2, y2, x1, y1);
+        var startArrowShape = this.get('startArrowShape');
+        var endArrowShape = this.get('endArrowShape');
+        if (startArrowShape) {
+            startArrowShape.draw(context);
         }
-        if (attrs.endArrow) {
-            ArrowUtil.addEndArrow(context, attrs, x1, y1, x2, y2);
+        if (endArrowShape) {
+            endArrowShape.draw(context);
         }
@@ -61,0 +80,0 @@ };

lib/shape/path.d.ts

@@ -19,6 +19,7 @@ /**
     initAttrs(attrs: any): void;
+    onAttrChange(name: string, value: any, originValue: any): void;
     _setPathArr(path: any): void;
     getSegments(): any;
+    setArrow(): void;
     isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;
-    onAttrChange(name: string, value: any, originValue: any): void;
     createPath(context: any): void;
@@ -25,0 +26,0 @@ afterDrawPath(context: CanvasRenderingContext2D): void;

lib/shape/path.js

@@ -37,3 +37,13 @@ "use strict";
         this._setPathArr(attrs.path);
+        this.setArrow();
     };
+    // 更新属性时，检测是否更改了 path
+    Path.prototype.onAttrChange = function (name, value, originValue) {
+        _super.prototype.onAttrChange.call(this, name, value, originValue);
+        if (name === 'path') {
+            this._setPathArr(value);
+        }
+        // 由于箭头的绘制依赖于 line 的诸多 attrs，因此这里不再对每个 attr 进行判断，attr 每次变化都会影响箭头的更新
+        this.setArrow();
+    };
     // 将 path 转换成绝对路径
@@ -61,2 +71,14 @@ Path.prototype._setPathArr = function (path) {
     };
+    Path.prototype.setArrow = function () {
+        var attrs = this.attr();
+        var startArrow = attrs.startArrow, endArrow = attrs.endArrow;
+        if (startArrow) {
+            var tangent = this.getStartTangent();
+            ArrowUtil.addStartArrow(this, attrs, tangent[0][0], tangent[0][1], tangent[1][0], tangent[1][1]);
+        }
+        if (endArrow) {
+            var tangent = this.getEndTangent();
+            ArrowUtil.addEndArrow(this, attrs, tangent[0][0], tangent[0][1], tangent[1][0], tangent[1][1]);
+        }
+    };
     Path.prototype.isInStrokeOrPath = function (x, y, isStroke, isFill, lineWidth) {
@@ -83,9 +105,2 @@ var segments = this.getSegments();
     };
-    // 更新属性时，检测是否更改了 path
-    Path.prototype.onAttrChange = function (name, value, originValue) {
-        _super.prototype.onAttrChange.call(this, name, value, originValue);
-        if (name === 'path') {
-            this._setPathArr(value);
-        }
-    };
     Path.prototype.createPath = function (context) {
@@ -97,11 +112,9 @@ var attrs = this.attr();
     Path.prototype.afterDrawPath = function (context) {
-        var attrs = this.attr();
-        var startArrow = attrs.startArrow, endArrow = attrs.endArrow;
-        if (startArrow) {
-            var tangent = this.getStartTangent();
-            ArrowUtil.addStartArrow(context, attrs, tangent[0][0], tangent[0][1], tangent[1][0], tangent[1][1]);
+        var startArrowShape = this.get('startArrowShape');
+        var endArrowShape = this.get('endArrowShape');
+        if (startArrowShape) {
+            startArrowShape.draw(context);
         }
-        if (endArrow) {
-            var tangent = this.getEndTangent();
-            ArrowUtil.addEndArrow(context, attrs, tangent[0][0], tangent[0][1], tangent[1][0], tangent[1][1]);
+        if (endArrowShape) {
+            endArrowShape.draw(context);
         }
@@ -108,0 +121,0 @@ };

lib/shape/polyline.d.ts

@@ -18,4 +18,6 @@ /**
     };
+    initAttrs(attrs: any): void;
     onAttrChange(name: string, value: any, originValue: any): void;
     _resetCache(): void;
+    setArrow(): void;
     isFill(): boolean;
@@ -22,0 +24,0 @@ isInStrokeOrPath(x: any, y: any, isStroke: any, isFill: any, lineWidth: any): boolean;

lib/shape/polyline.js

@@ -19,5 +19,9 @@ "use strict";
     };
+    PolyLine.prototype.initAttrs = function (attrs) {
+        this.setArrow();
+    };
     // 更新属性时，检测是否更改了 points
     PolyLine.prototype.onAttrChange = function (name, value, originValue) {
         _super.prototype.onAttrChange.call(this, name, value, originValue);
+        this.setArrow();
         if (['points'].indexOf(name) !== -1) {
@@ -31,2 +35,17 @@ this._resetCache();
     };
+    PolyLine.prototype.setArrow = function () {
+        var attrs = this.attr();
+        var _a = this.attrs, points = _a.points, startArrow = _a.startArrow, endArrow = _a.endArrow;
+        var length = points.length;
+        var x1 = points[0][0];
+        var y1 = points[0][1];
+        var x2 = points[length - 1][0];
+        var y2 = points[length - 1][1];
+        if (startArrow) {
+            ArrowUtil.addStartArrow(this, attrs, points[1][0], points[1][1], x1, y1);
+        }
+        if (endArrow) {
+            ArrowUtil.addEndArrow(this, attrs, points[length - 2][0], points[length - 2][1], x2, y2);
+        }
+    };
     // 不允许 fill
@@ -78,14 +97,9 @@ PolyLine.prototype.isFill = function () {
     PolyLine.prototype.afterDrawPath = function (context) {
-        var attrs = this.attr();
-        var _a = this.attrs, points = _a.points, startArrow = _a.startArrow, endArrow = _a.endArrow;
-        var length = points.length;
-        var x1 = points[0][0];
-        var y1 = points[0][1];
-        var x2 = points[length - 1][0];
-        var y2 = points[length - 1][1];
-        if (startArrow) {
-            ArrowUtil.addStartArrow(context, attrs, points[1][0], points[1][1], x1, y1);
+        var startArrowShape = this.get('startArrowShape');
+        var endArrowShape = this.get('endArrowShape');
+        if (startArrowShape) {
+            startArrowShape.draw(context);
         }
-        if (endArrow) {
-            ArrowUtil.addEndArrow(context, attrs, points[length - 2][0], points[length - 2][1], x2, y2);
+        if (endArrowShape) {
+            endArrowShape.draw(context);
         }
@@ -92,0 +106,0 @@ };

lib/util/arrow.d.ts

@@ -19,3 +19,3 @@ /**
  * 绘制起始箭头
- * @param {CanvasRenderingContext2D} ctx 绘图上下文
+ * @param {IShape} shape 图形
  * @param {ShapeAttrs} attrs shape 的绘图属性
@@ -27,6 +27,6 @@ * @param {number} x1 起始点 x
  */
-export declare function addStartArrow(ctx: any, attrs: any, x1: any, y1: any, x2: any, y2: any): void;
+export declare function addStartArrow(shape: any, attrs: any, x1: any, y1: any, x2: any, y2: any): void;
 /**
  * 绘制结束箭头
- * @param {CanvasRenderingContext2D} ctx 绘图上下文
+ * @param {IShape} shape 图形
  * @param {ShapeAttrs} attrs shape 的绘图属性
@@ -38,2 +38,2 @@ * @param {number} x1 起始点 x
  */
-export declare function addEndArrow(ctx: any, attrs: any, x1: any, y1: any, x2: any, y2: any): void;
+export declare function addEndArrow(shape: any, attrs: any, x1: any, y1: any, x2: any, y2: any): void;

lib/util/arrow.js

@@ -5,54 +5,37 @@ "use strict";
 var shape_1 = require("../shape");
-var PI = Math.PI;
 var sin = Math.sin;
 var cos = Math.cos;
-var atan2 = Math.atan2;
-var DEFAULT_LENGTH = 10;
-var DEFAULT_ANGLE = PI / 3;
-function _addArrow(ctx, attrs, x1, y1, x2, y2, isStart) {
-    var leftX;
-    var leftY;
-    var rightX;
-    var rightY;
-    var offsetX;
-    var offsetY;
-    var angle;
-    var arrowLength = attrs.arrowLength || DEFAULT_LENGTH;
-    var arrowAngle = attrs.arrowAngle ? (attrs.arrowAngle * PI) / 180 : DEFAULT_ANGLE; // 转换为弧
-    // Calculate angle
-    angle = atan2(y1 - y2, x1 - x2);
-    /* // Adjust angle correctly
-    angle -= PI;*/
-    // Calculate offset to place arrow at edge of path
-    offsetX = Math.abs(attrs.lineWidth * cos(angle)) / 2;
-    offsetY = Math.abs(attrs.lineWidth * sin(angle)) / 2;
-    if (isStart) {
-        offsetX = -offsetX;
-        offsetY = -offsetY;
-    }
-    // Calculate coordinates for left half of arrow
-    leftX = x2 + arrowLength * cos(angle + arrowAngle / 2);
-    leftY = y2 + arrowLength * sin(angle + arrowAngle / 2);
-    // Calculate coordinates for right half of arrow
-    rightX = x2 + arrowLength * cos(angle - arrowAngle / 2);
-    rightY = y2 + arrowLength * sin(angle - arrowAngle / 2);
-    ctx.beginPath();
-    // Draw left half of arrow
-    ctx.moveTo(leftX - offsetX, leftY - offsetY);
-    ctx.lineTo(x2 - offsetX, y2 - offsetY);
-    // Draw right half of arrow
-    ctx.lineTo(rightX - offsetX, rightY - offsetY);
-    // Visually connect arrow to path
-    ctx.moveTo(x2 - offsetX, y2 - offsetY);
-    ctx.lineTo(x2 + offsetX, y2 + offsetY);
-    // Move back to end of path
-    ctx.moveTo(x2, y2);
-    ctx.stroke();
+function _addDefaultArrow(shape, attrs, x1, y1, x2, y2, isStart) {
+    var stroke = attrs.stroke, lineWidth = attrs.lineWidth;
+    var x = x1 - x2;
+    var y = y1 - y2;
+    var rad = Math.atan2(y, x);
+    var arrowShape = new shape_1.Path({
+        type: 'path',
+        canvas: shape.get('canvas'),
+        isArrowShape: true,
+        attrs: {
+            // 默认箭头的边长为 10，夹角为 60 度
+            path: "M" + 10 * Math.cos(Math.PI / 6) + "," + 10 * Math.sin(Math.PI / 6) + " L0,0 L" + 10 * Math.cos(Math.PI / 6) + ",-" + 10 *
+                Math.sin(Math.PI / 6),
+            // 使用 shape stroke 值
+            stroke: stroke,
+            lineWidth: lineWidth,
+        },
+    });
+    arrowShape.translate(x2, y2);
+    arrowShape.rotateAtPoint(x2, y2, rad);
+    shape.set(isStart ? 'startArrowShape' : 'endArrowShape', arrowShape);
 }
-function _addCustomizedArrow(ctx, attrs, x1, y1, x2, y2, isStart) {
-    var startArrow = attrs.startArrow, endArrow = attrs.endArrow, fill = attrs.fill, stroke = attrs.stroke;
+/**
+ * 箭头 path 的设置要求
+ * 1. 箭头顶点坐标需要为 (0, 0)
+ * 2. 箭头夹角的中心分割线需要与 X 轴正方向对齐
+ */
+function _addCustomizedArrow(shape, attrs, x1, y1, x2, y2, isStart) {
+    var startArrow = attrs.startArrow, endArrow = attrs.endArrow, stroke = attrs.stroke, lineWidth = attrs.lineWidth;
     var arrowAttrs = isStart ? startArrow : endArrow;
-    var d = arrowAttrs.d, arrowFill = arrowAttrs.fill, arrowStroke = arrowAttrs.stroke, restAttrs = tslib_1.__rest(arrowAttrs, ["d", "fill", "stroke"]);
-    var x = x2 - x1;
-    var y = y2 - y1;
+    var d = arrowAttrs.d, arrowFill = arrowAttrs.fill, arrowStroke = arrowAttrs.stroke, arrowLineWidth = arrowAttrs.lineWidth, restAttrs = tslib_1.__rest(arrowAttrs, ["d", "fill", "stroke", "lineWidth"]);
+    var x = x1 - x2;
+    var y = y1 - y2;
     var rad = Math.atan2(y, x);
@@ -65,11 +48,11 @@ if (d) {
         type: 'path',
+        canvas: shape.get('canvas'),
+        isArrowShape: true,
         attrs: tslib_1.__assign(tslib_1.__assign({}, restAttrs), { 
-            // 支持单独设置箭头的 fill 和 stroke，若为空则使用 shape 的值
-            fill: arrowFill || fill || stroke, stroke: arrowStroke || stroke }),
+            // 支持单独设置箭头的 stroke，若为空则使用 shape 的值
+            stroke: arrowStroke || stroke, lineWidth: arrowLineWidth || lineWidth }),
     });
-    ctx.save();
-    ctx.translate(x2, y2);
-    ctx.rotate(rad);
-    arrowShape.draw(ctx);
-    ctx.restore();
+    arrowShape.translate(x2, y2);
+    arrowShape.rotateAtPoint(x2, y2, rad);
+    shape.set(isStart ? 'startArrowShape' : 'endArrowShape', arrowShape);
 }
@@ -98,3 +81,3 @@ /**
  * 绘制起始箭头
- * @param {CanvasRenderingContext2D} ctx 绘图上下文
+ * @param {IShape} shape 图形
  * @param {ShapeAttrs} attrs shape 的绘图属性
@@ -106,9 +89,12 @@ * @param {number} x1 起始点 x
  */
-function addStartArrow(ctx, attrs, x1, y1, x2, y2) {
+function addStartArrow(shape, attrs, x1, y1, x2, y2) {
     if (typeof attrs.startArrow === 'object') {
-        _addCustomizedArrow(ctx, attrs, x1, y1, x2, y2, true);
+        _addCustomizedArrow(shape, attrs, x1, y1, x2, y2, true);
     }
     else if (attrs.startArrow) {
-        _addArrow(ctx, attrs, x1, y1, x2, y2, true);
+        _addDefaultArrow(shape, attrs, x1, y1, x2, y2, true);
     }
+    else {
+        shape.set('startArrowShape', null);
+    }
 }
@@ -118,3 +104,3 @@ exports.addStartArrow = addStartArrow;
  * 绘制结束箭头
- * @param {CanvasRenderingContext2D} ctx 绘图上下文
+ * @param {IShape} shape 图形
  * @param {ShapeAttrs} attrs shape 的绘图属性
@@ -126,11 +112,14 @@ * @param {number} x1 起始点 x
  */
-function addEndArrow(ctx, attrs, x1, y1, x2, y2) {
+function addEndArrow(shape, attrs, x1, y1, x2, y2) {
     if (typeof attrs.endArrow === 'object') {
-        _addCustomizedArrow(ctx, attrs, x1, y1, x2, y2, false);
+        _addCustomizedArrow(shape, attrs, x1, y1, x2, y2, false);
     }
     else if (attrs.endArrow) {
-        _addArrow(ctx, attrs, x1, y1, x2, y2, false);
+        _addDefaultArrow(shape, attrs, x1, y1, x2, y2, false);
     }
+    else {
+        shape.set('startArrowShape', null);
+    }
 }
 exports.addEndArrow = addEndArrow;
 //# sourceMappingURL=arrow.js.map

package.json

 {
   "name": "@antv/g-canvas",
-  "version": "0.3.29",
+  "version": "0.4.0",
   "description": "A canvas library which providing 2d",
@@ -58,3 +58,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@antv/g-base": "^0.3.29",
+    "@antv/g-base": "^0.4.0",
     "@antv/g-math": "^0.1.1",
@@ -66,3 +66,3 @@ "@antv/gl-matrix": "~2.7.1",
   "__npminstall_done": false,
-  "gitHead": "11c566cefb2b10a1a6ecc342cf29b8f8f0706008"
+  "gitHead": "95487b1e5ded41f5db351a622adf12659f564d8b"
 }

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

1366358

increased by0.94%

Lines of code

7188

increased by1.25%

Dependency changes

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

• + Added@antv/matrix-util@3.1.0-beta.3(transitive)

• + Addeddetect-browser@5.3.0(transitive)

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

• - Removed@antv/matrix-util@2.0.7(transitive)

• - Removedtslib@1.14.1(transitive)

• Updated@antv/g-base@^0.4.0