(function() {
'use strict';
/**
* Arrow constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Array} config.points
* @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* The default is 0
* @param {Number} config.pointerLength
* @param {Number} config.pointerWidth
* @@shapeParams
* @@nodeParams
* @example
* var line = new Konva.Line({
* points: [73, 70, 340, 23, 450, 60, 500, 20],
* stroke: 'red',
* tension: 1,
* pointerLength : 10,
* pointerWidth : 12
* });
*/
Konva.Arrow = function(config) {
this.____init(config);
};
Konva.Arrow.prototype = {
____init: function(config) {
// call super constructor
Konva.Line.call(this, config);
this.className = 'Arrow';
},
_sceneFunc: function(ctx) {
Konva.Line.prototype._sceneFunc.apply(this, arguments);
var PI2 = Math.PI * 2;
var points = this.points();
var n = points.length;
var dx = points[n - 2] - points[n - 4];
var dy = points[n - 1] - points[n - 3];
var radians = (Math.atan2(dy, dx) + PI2) % PI2;
var length = this.pointerLength();
var width = this.pointerWidth();
ctx.save();
ctx.beginPath();
ctx.translate(points[n - 2], points[n - 1]);
ctx.rotate(radians);
ctx.moveTo(0, 0);
ctx.lineTo(-length, width / 2);
ctx.lineTo(-length, -width / 2);
ctx.closePath();
ctx.restore();
if (this.pointerAtBeginning()) {
ctx.save();
ctx.translate(points[0], points[1]);
dx = points[2] - points[0];
dy = points[3] - points[1];
ctx.rotate((Math.atan2(-dy, -dx) + PI2) % PI2);
ctx.moveTo(0, 0);
ctx.lineTo(-length, width / 2);
ctx.lineTo(-length, -width / 2);
ctx.closePath();
ctx.restore();
}
ctx.fillStrokeShape(this);
}
};
Konva.Util.extend(Konva.Arrow, Konva.Line);
/**
* get/set pointerLength
* @name pointerLength
* @method
* @memberof Konva.Arrow.prototype
* @param {Number} Length of pointer of arrow.
* The default is 10.
* @returns {Number}
* @example
* // get tension
* var pointerLength = line.pointerLength();
*
* // set tension
* line.pointerLength(15);
*/
Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerLength', 10);
/**
* get/set pointerWidth
* @name pointerWidth
* @method
* @memberof Konva.Arrow.prototype
* @param {Number} Width of pointer of arrow.
* The default is 10.
* @returns {Number}
* @example
* // get tension
* var pointerWidth = line.pointerWidth();
*
* // set tension
* line.pointerWidth(15);
*/
Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerWidth', 10);
/**
* get/set pointerAtBeginning
* @name pointerAtBeginning
* @method
* @memberof Konva.Arrow.prototype
* @param {Number} Should pointer displayed at beginning of arrow.
* The default is false.
* @returns {Boolean}
* @example
* // get tension
* var pointerAtBeginning = line.pointerAtBeginning();
*
* // set tension
* line.pointerAtBeginning(true);
*/
Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerAtBeginning', false);
Konva.Collection.mapMethods(Konva.Arrow);
})();