lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1103 from ethanruiyu/master

Browse Source 
add pointerAtEnding to Arrow
This commit is contained in:
Anton Lavrenov
2021-05-03 10:41:32 -05:00
committed by GitHub
parent 84b938f136 d731edf37a
commit 5f8870b387
1 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/shapes/Arrow.ts
View File

@@ -12,6 +12,7 @@ export interface ArrowConfig extends LineConfig {
pointerLength?: number; pointerLength?: number;
pointerWidth?: number; pointerWidth?: number;
pointerAtBeginning?: boolean; pointerAtBeginning?: boolean;
pointerAtEnding?: boolean;
} }
/** /**
@@ -25,7 +26,8 @@ export interface ArrowConfig extends LineConfig {
* The default is 0 * The default is 0
* @param {Number} config.pointerLength Arrow pointer length. Default value is 10. * @param {Number} config.pointerLength Arrow pointer length. Default value is 10.
* @param {Number} config.pointerWidth Arrow pointer width. Default value is 10. * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10.
* @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on both sides?. Default false. * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on beginning position?. Default false.
* @param {Boolean} config.pointerAtEnding Do we need to draw pointer on ending position?. Default true.
* @@shapeParams * @@shapeParams
* @@nodeParams * @@nodeParams
* @example * @example
@@ -64,15 +66,17 @@ export class Arrow extends Line<ArrowConfig> {
var length = this.pointerLength(); var length = this.pointerLength();
var width = this.pointerWidth(); var width = this.pointerWidth();
ctx.save(); if (this.pointerAtEnding()) {
ctx.beginPath(); ctx.save();
ctx.translate(points[n - 2], points[n - 1]); ctx.beginPath();
ctx.rotate(radians); ctx.translate(points[n - 2], points[n - 1]);
ctx.moveTo(0, 0); ctx.rotate(radians);
ctx.lineTo(-length, width / 2); ctx.moveTo(0, 0);
ctx.lineTo(-length, -width / 2); ctx.lineTo(-length, width / 2);
ctx.closePath(); ctx.lineTo(-length, -width / 2);
ctx.restore(); ctx.closePath();
ctx.restore();
}
if (this.pointerAtBeginning()) { if (this.pointerAtBeginning()) {
ctx.save(); ctx.save();
@@ -125,6 +129,7 @@ export class Arrow extends Line<ArrowConfig> {
pointerLength: GetSet<number, this>; pointerLength: GetSet<number, this>;
pointerWidth: GetSet<number, this>; pointerWidth: GetSet<number, this>;
pointerAtEnding: GetSet<boolean, this>;
pointerAtBeginning: GetSet<boolean, this>; pointerAtBeginning: GetSet<boolean, this>;
} }
@@ -177,4 +182,19 @@ Factory.addGetterSetter(Arrow, 'pointerWidth', 10, getNumberValidator());
*/ */
Factory.addGetterSetter(Arrow, 'pointerAtBeginning', false); Factory.addGetterSetter(Arrow, 'pointerAtBeginning', false);
Collection.mapMethods(Arrow); /**
* get/set pointerAtEnding
* @name Konva.Arrow#pointerAtEnding
* @method
* @param {Number} Should pointer displayed at ending of arrow. The default is true.
* @returns {Boolean}
* @example
* // get value
* var pointerAtEnding = line.pointerAtEnding();
*
* // set value
* line.pointerAtEnding(false);
*/
Factory.addGetterSetter(Arrow, 'pointerAtEnding', true);
Collection.mapMethods(Arrow);