mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
Namalee
GitHub
commit
0730bb1da8
@ -10,8 +10,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
* new `Konva.Transformer` group that allow simple resize, and rotate of a shape.
|
||||
* Add ability to remove event by callback `node.off('event', callback)`.
|
||||
* new `Konva.Filters.Contrast`.
|
||||
* new `Konva.Util.haveIntersection()` to detect collusion
|
||||
* new `Konva.Util.haveIntersection()` to detect simple collusion
|
||||
* add `Konva.Text.ellipsis` to add '…' to text string if width is fixed and wrap is set to 'none'
|
||||
* add gradients for strokes
|
||||
|
||||
## Changed
|
||||
|
||||
@ -21,6 +22,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
* Some typescript fixes
|
||||
* Pixelate filter fixes
|
||||
* Fixes for path data parsing
|
||||
|
||||
## Removed
|
||||
|
||||
* Some deprecated methods are removed. If previous version was working without deprecation warnings for you, this one will work fine too.
|
||||
|
||||
## [1.7.6][2017-11-01]
|
||||
|
||||
|
||||
14
konva.d.ts
vendored
14
konva.d.ts
vendored
@ -333,12 +333,12 @@ declare namespace Konva {
|
||||
fillLinearGradientEndPointX?: number;
|
||||
fillLinearGradientEndPointY?: number;
|
||||
fillLinearGradientColorStops?: Array<number | string>;
|
||||
fillLinearRadialStartPoint?: Vector2d;
|
||||
fillLinearRadialStartPointX?: number;
|
||||
fillLinearRadialStartPointY?: number;
|
||||
fillLinearRadialEndPoint?: Vector2d;
|
||||
fillLinearRadialEndPointX?: number;
|
||||
fillLinearRadialEndPointY?: number;
|
||||
fillRadialGradientStartPoint?: Vector2d;
|
||||
fillRadialGradientStartPointX?: number;
|
||||
fillRadialGradientStartPointY?: number;
|
||||
fillRadialGradientEndPoint?: Vector2d;
|
||||
fillRadialGradientEndPointX?: number;
|
||||
fillRadialGradientEndPointY?: number;
|
||||
fillRadialGradientStartRadius?: number;
|
||||
fillRadialGradientEndRadius?: number;
|
||||
fillRadialGradientColorStops?: Array<number | string>;
|
||||
@ -363,6 +363,7 @@ declare namespace Konva {
|
||||
shadowEnabled?: boolean;
|
||||
dash?: number[];
|
||||
dashEnabled?: boolean;
|
||||
perfectDrawEnabled?: boolean;
|
||||
}
|
||||
|
||||
class Shape extends Node {
|
||||
@ -752,6 +753,7 @@ declare namespace Konva {
|
||||
cropWidth(cropWidth: number): this;
|
||||
cropHeight(): number;
|
||||
cropHeight(cropHeight: number): this;
|
||||
static fromURL(url: string, callback: (image: Konva.Image) => void): void;
|
||||
}
|
||||
|
||||
interface LineConfig extends ShapeConfig {
|
||||
|
||||
625
konva.js
625
konva.js
@ -2,7 +2,7 @@
|
||||
* Konva JavaScript Framework v1.7.6
|
||||
* http://konvajs.github.io/
|
||||
* Licensed under the MIT
|
||||
* Date: Thu Mar 08 2018
|
||||
* Date: Mon Mar 12 2018
|
||||
*
|
||||
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
|
||||
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
|
||||
@ -1512,11 +1512,11 @@
|
||||
];
|
||||
|
||||
/**
|
||||
* Canvas Context constructor
|
||||
* @constructor
|
||||
* @abstract
|
||||
* @memberof Konva
|
||||
*/
|
||||
* Canvas Context constructor
|
||||
* @constructor
|
||||
* @abstract
|
||||
* @memberof Konva
|
||||
*/
|
||||
Konva.Context = function(canvas) {
|
||||
this.init(canvas);
|
||||
};
|
||||
@ -1532,33 +1532,33 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* fill shape
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
* fill shape
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
fillShape: function(shape) {
|
||||
if (shape.getFillEnabled()) {
|
||||
this._fill(shape);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* stroke shape
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
* stroke shape
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
strokeShape: function(shape) {
|
||||
if (shape.getStrokeEnabled()) {
|
||||
this._stroke(shape);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* fill then stroke
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
* fill then stroke
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
fillStrokeShape: function(shape) {
|
||||
var fillEnabled = shape.getFillEnabled();
|
||||
if (fillEnabled) {
|
||||
@ -1569,14 +1569,14 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* get context trace if trace is enabled
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
|
||||
* properties, and property values. If true, return relaxed context trace, which only returns method names and
|
||||
* properites.
|
||||
* @returns {String}
|
||||
*/
|
||||
* get context trace if trace is enabled
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
|
||||
* properties, and property values. If true, return relaxed context trace, which only returns method names and
|
||||
* properites.
|
||||
* @returns {String}
|
||||
*/
|
||||
getTrace: function(relaxed) {
|
||||
var traceArr = this.traceArr,
|
||||
len = traceArr.length,
|
||||
@ -1618,15 +1618,16 @@
|
||||
return str;
|
||||
},
|
||||
/**
|
||||
* clear trace if trace is enabled
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
*/
|
||||
* clear trace if trace is enabled
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
*/
|
||||
clearTrace: function() {
|
||||
this.traceArr = [];
|
||||
},
|
||||
_trace: function(str) {
|
||||
var traceArr = this.traceArr, len;
|
||||
var traceArr = this.traceArr,
|
||||
len;
|
||||
|
||||
traceArr.push(str);
|
||||
len = traceArr.length;
|
||||
@ -1636,33 +1637,33 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* reset canvas context transform
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
*/
|
||||
* reset canvas context transform
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
*/
|
||||
reset: function() {
|
||||
var pixelRatio = this.getCanvas().getPixelRatio();
|
||||
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
|
||||
},
|
||||
/**
|
||||
* get canvas
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @returns {Konva.Canvas}
|
||||
*/
|
||||
* get canvas
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @returns {Konva.Canvas}
|
||||
*/
|
||||
getCanvas: function() {
|
||||
return this.canvas;
|
||||
},
|
||||
/**
|
||||
* clear canvas
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Object} [bounds]
|
||||
* @param {Number} [bounds.x]
|
||||
* @param {Number} [bounds.y]
|
||||
* @param {Number} [bounds.width]
|
||||
* @param {Number} [bounds.height]
|
||||
*/
|
||||
* clear canvas
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Object} [bounds]
|
||||
* @param {Number} [bounds.x]
|
||||
* @param {Number} [bounds.y]
|
||||
* @param {Number} [bounds.width]
|
||||
* @param {Number} [bounds.height]
|
||||
*/
|
||||
clear: function(bounds) {
|
||||
var canvas = this.getCanvas();
|
||||
|
||||
@ -1754,7 +1755,8 @@
|
||||
);
|
||||
},
|
||||
drawImage: function() {
|
||||
var a = arguments, _context = this._context;
|
||||
var a = arguments,
|
||||
_context = this._context;
|
||||
|
||||
if (a.length === 3) {
|
||||
_context.drawImage(a[0], a[1], a[2]);
|
||||
@ -1832,7 +1834,8 @@
|
||||
this._context.scale(a[0], a[1]);
|
||||
},
|
||||
setLineDash: function() {
|
||||
var a = arguments, _context = this._context;
|
||||
var a = arguments,
|
||||
_context = this._context;
|
||||
|
||||
// works for Chrome and IE11
|
||||
if (this._context.setLineDash) {
|
||||
@ -1879,7 +1882,8 @@
|
||||
|
||||
// to prevent creating scope function at each loop
|
||||
var func = function(methodName) {
|
||||
var origMethod = that[methodName], ret;
|
||||
var origMethod = that[methodName],
|
||||
ret;
|
||||
|
||||
that[methodName] = function() {
|
||||
args = _simplifyArray(Array.prototype.slice.call(arguments, 0));
|
||||
@ -2008,22 +2012,34 @@
|
||||
},
|
||||
_fill: function(shape) {
|
||||
var hasColor = shape.fill(),
|
||||
hasPattern = shape.getFillPatternImage(),
|
||||
hasLinearGradient = shape.getFillLinearGradientColorStops(),
|
||||
hasRadialGradient = shape.getFillRadialGradientColorStops(),
|
||||
fillPriority = shape.getFillPriority();
|
||||
|
||||
// priority fills
|
||||
if (hasColor && fillPriority === 'color') {
|
||||
this._fillColor(shape);
|
||||
} else if (hasPattern && fillPriority === 'pattern') {
|
||||
return;
|
||||
}
|
||||
|
||||
var hasPattern = shape.getFillPatternImage();
|
||||
if (hasPattern && fillPriority === 'pattern') {
|
||||
this._fillPattern(shape);
|
||||
} else if (hasLinearGradient && fillPriority === 'linear-gradient') {
|
||||
return;
|
||||
}
|
||||
|
||||
var hasLinearGradient = shape.getFillLinearGradientColorStops();
|
||||
if (hasLinearGradient && fillPriority === 'linear-gradient') {
|
||||
this._fillLinearGradient(shape);
|
||||
} else if (hasRadialGradient && fillPriority === 'radial-gradient') {
|
||||
return;
|
||||
}
|
||||
|
||||
var hasRadialGradient = shape.getFillRadialGradientColorStops();
|
||||
if (hasRadialGradient && fillPriority === 'radial-gradient') {
|
||||
this._fillRadialGradient(shape);
|
||||
} else if (hasColor) {
|
||||
// now just try and fill with whatever is available
|
||||
return;
|
||||
}
|
||||
|
||||
// now just try and fill with whatever is available
|
||||
if (hasColor) {
|
||||
this._fillColor(shape);
|
||||
} else if (hasPattern) {
|
||||
this._fillPattern(shape);
|
||||
@ -2033,6 +2049,20 @@
|
||||
this._fillRadialGradient(shape);
|
||||
}
|
||||
},
|
||||
_strokeLinearGradient: function(shape) {
|
||||
var start = shape.getStrokeLinearGradientStartPoint(),
|
||||
end = shape.getStrokeLinearGradientEndPoint(),
|
||||
colorStops = shape.getStrokeLinearGradientColorStops(),
|
||||
grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
|
||||
|
||||
if (colorStops) {
|
||||
// build color stops
|
||||
for (var n = 0; n < colorStops.length; n += 2) {
|
||||
grd.addColorStop(colorStops[n], colorStops[n + 1]);
|
||||
}
|
||||
this.setAttr('strokeStyle', grd);
|
||||
}
|
||||
},
|
||||
_stroke: function(shape) {
|
||||
var dash = shape.dash(),
|
||||
// ignore strokeScaleEnabled for Text
|
||||
@ -2052,11 +2082,20 @@
|
||||
}
|
||||
|
||||
this.setAttr('lineWidth', shape.strokeWidth());
|
||||
this.setAttr('strokeStyle', shape.stroke());
|
||||
|
||||
if (!shape.getShadowForStrokeEnabled()) {
|
||||
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
|
||||
}
|
||||
|
||||
// TODO - do we need to make like a fill function?
|
||||
|
||||
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
|
||||
if (hasLinearGradient) {
|
||||
this._strokeLinearGradient(shape);
|
||||
} else {
|
||||
this.setAttr('strokeStyle', shape.stroke());
|
||||
}
|
||||
|
||||
shape._strokeFunc(this);
|
||||
|
||||
if (!strokeScaleEnabled) {
|
||||
@ -2081,7 +2120,7 @@
|
||||
this.setAttr('shadowColor', color);
|
||||
this.setAttr(
|
||||
'shadowBlur',
|
||||
blur * ratio * Math.min(Math.abs(scaleX), Math.abs(scaleY))
|
||||
blur * Math.min(Math.abs(scaleX), Math.abs(scaleY))
|
||||
);
|
||||
this.setAttr('shadowOffsetX', offset.x * scaleX);
|
||||
this.setAttr('shadowOffsetY', offset.y * scaleY);
|
||||
@ -2234,7 +2273,10 @@
|
||||
};
|
||||
},
|
||||
addDeprecatedGetterSetter: function(constructor, attr, def, validator) {
|
||||
Konva.Util.error('Adding deprecated ' + attr);
|
||||
|
||||
var method = GET + Konva.Util._capitalize(attr);
|
||||
|
||||
var message =
|
||||
attr +
|
||||
' property is deprecated and will be removed soon. Look at Konva change log for more information.';
|
||||
@ -8411,7 +8453,12 @@
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
hasStroke: function() {
|
||||
return this.strokeEnabled() && !!this.stroke();
|
||||
return (
|
||||
this.strokeEnabled() &&
|
||||
!!(this.stroke() || this.getStrokeLinearGradientColorStops())
|
||||
// TODO: do we need radial gradient
|
||||
// this.getStrokeRadialGradientColorStops()
|
||||
);
|
||||
},
|
||||
/**
|
||||
* determines if point is in the shape, regardless if other shapes are on top of it. Note: because
|
||||
@ -8777,31 +8824,6 @@
|
||||
* shape.stroke('rgba(0,255,0,0.5');
|
||||
*/
|
||||
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeRed',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeGreen',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeBlue',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeAlpha',
|
||||
1,
|
||||
Konva.Validators.alphaComponent
|
||||
);
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeWidth', 2);
|
||||
|
||||
/**
|
||||
@ -9017,31 +9039,6 @@
|
||||
* shape.shadowColor('rgba(0,255,0,0.5');
|
||||
*/
|
||||
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'shadowRed',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'shadowGreen',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'shadowBlue',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'shadowAlpha',
|
||||
1,
|
||||
Konva.Validators.alphaComponent
|
||||
);
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
|
||||
|
||||
/**
|
||||
@ -9185,31 +9182,6 @@
|
||||
* shape.fill(null);
|
||||
*/
|
||||
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillRed',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillGreen',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillBlue',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillAlpha',
|
||||
1,
|
||||
Konva.Validators.alphaComponent
|
||||
);
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternX', 0);
|
||||
|
||||
/**
|
||||
@ -9260,6 +9232,24 @@
|
||||
* shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientColorStops');
|
||||
|
||||
/**
|
||||
* get/set stroke linear gradient color stops
|
||||
* @name strokeLinearGradientColorStops
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Array} colorStops
|
||||
* @returns {Array} colorStops
|
||||
* @example
|
||||
* // get stroke linear gradient color stops
|
||||
* var colorStops = shape.strokeLinearGradientColorStops();
|
||||
*
|
||||
* // create a linear gradient that starts with red, changes to blue
|
||||
* // halfway through, and then changes to green
|
||||
* shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillRadialGradientStartRadius',
|
||||
@ -9480,6 +9470,7 @@
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
|
||||
|
||||
/**
|
||||
* get/set fill pattern offset x
|
||||
* @name fillPatternOffsetX
|
||||
@ -9496,6 +9487,7 @@
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
|
||||
|
||||
/**
|
||||
* get/set fill pattern offset y
|
||||
* @name fillPatternOffsetY
|
||||
@ -9537,6 +9529,7 @@
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
|
||||
|
||||
/**
|
||||
* get/set fill pattern scale x
|
||||
* @name fillPatternScaleX
|
||||
@ -9553,6 +9546,7 @@
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
|
||||
|
||||
/**
|
||||
* get/set fill pattern scale y
|
||||
* @name fillPatternScaleY
|
||||
@ -9594,11 +9588,38 @@
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addComponentsGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientStartPoint',
|
||||
['x', 'y']
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set stroke linear gradient start point
|
||||
* @name strokeLinearGradientStartPoint
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Object} startPoint
|
||||
* @param {Number} startPoint.x
|
||||
* @param {Number} startPoint.y
|
||||
* @returns {Object}
|
||||
* @example
|
||||
* // get stroke linear gradient start point
|
||||
* var startPoint = shape.strokeLinearGradientStartPoint();
|
||||
*
|
||||
* // set stroke linear gradient start point
|
||||
* shape.strokeLinearGradientStartPoint({
|
||||
* x: 20
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillLinearGradientStartPointX',
|
||||
0
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set fill linear gradient start point x
|
||||
* @name fillLinearGradientStartPointX
|
||||
@ -9614,11 +9635,33 @@
|
||||
* shape.fillLinearGradientStartPointX(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientStartPointX',
|
||||
0
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set stroke linear gradient start point x
|
||||
* @name linearLinearGradientStartPointX
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Number} x
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get stroke linear gradient start point x
|
||||
* var startPointX = shape.strokeLinearGradientStartPointX();
|
||||
*
|
||||
* // set stroke linear gradient start point x
|
||||
* shape.strokeLinearGradientStartPointX(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillLinearGradientStartPointY',
|
||||
0
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set fill linear gradient start point y
|
||||
* @name fillLinearGradientStartPointY
|
||||
@ -9634,6 +9677,26 @@
|
||||
* shape.fillLinearGradientStartPointY(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientStartPointY',
|
||||
0
|
||||
);
|
||||
/**
|
||||
* get/set stroke linear gradient start point y
|
||||
* @name strokeLinearGradientStartPointY
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Number} y
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get stroke linear gradient start point y
|
||||
* var startPointY = shape.strokeLinearGradientStartPointY();
|
||||
*
|
||||
* // set stroke linear gradient start point y
|
||||
* shape.strokeLinearGradientStartPointY(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addComponentsGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillLinearGradientEndPoint',
|
||||
@ -9660,6 +9723,32 @@
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addComponentsGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientEndPoint',
|
||||
['x', 'y']
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set stroke linear gradient end point
|
||||
* @name strokeLinearGradientEndPoint
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Object} endPoint
|
||||
* @param {Number} endPoint.x
|
||||
* @param {Number} endPoint.y
|
||||
* @returns {Object}
|
||||
* @example
|
||||
* // get stroke linear gradient end point
|
||||
* var endPoint = shape.strokeLinearGradientEndPoint();
|
||||
*
|
||||
* // set stroke linear gradient end point
|
||||
* shape.strokeLinearGradientEndPoint({
|
||||
* x: 20
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
|
||||
/**
|
||||
* get/set fill linear gradient end point x
|
||||
@ -9676,6 +9765,26 @@
|
||||
* shape.fillLinearGradientEndPointX(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientEndPointX',
|
||||
0
|
||||
);
|
||||
/**
|
||||
* get/set fill linear gradient end point x
|
||||
* @name strokeLinearGradientEndPointX
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Number} x
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get stroke linear gradient end point x
|
||||
* var endPointX = shape.strokeLinearGradientEndPointX();
|
||||
*
|
||||
* // set stroke linear gradient end point x
|
||||
* shape.strokeLinearGradientEndPointX(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
|
||||
/**
|
||||
* get/set fill linear gradient end point y
|
||||
@ -9692,6 +9801,26 @@
|
||||
* shape.fillLinearGradientEndPointY(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientEndPointY',
|
||||
0
|
||||
);
|
||||
/**
|
||||
* get/set stroke linear gradient end point y
|
||||
* @name strokeLinearGradientEndPointY
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Number} y
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get stroke linear gradient end point y
|
||||
* var endPointY = shape.strokeLinearGradientEndPointY();
|
||||
*
|
||||
* // set stroke linear gradient end point y
|
||||
* shape.strokeLinearGradientEndPointY(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addComponentsGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillRadialGradientStartPoint',
|
||||
@ -12571,10 +12700,10 @@
|
||||
// Node extenders
|
||||
|
||||
/**
|
||||
* initiate drag and drop
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
* initiate drag and drop
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
Konva.Node.prototype.startDrag = function() {
|
||||
var dd = Konva.DD,
|
||||
stage = this.getStage(),
|
||||
@ -12627,10 +12756,10 @@
|
||||
};
|
||||
|
||||
/**
|
||||
* stop drag and drop
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
* stop drag and drop
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
Konva.Node.prototype.stopDrag = function() {
|
||||
var dd = Konva.DD,
|
||||
evt = {};
|
||||
@ -12658,10 +12787,10 @@
|
||||
};
|
||||
|
||||
/**
|
||||
* determine if node is currently in drag and drop mode
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
* determine if node is currently in drag and drop mode
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
Konva.Node.prototype.isDragging = function() {
|
||||
var dd = Konva.DD;
|
||||
return !!(dd.node && dd.node._id === this._id && dd.isDragging);
|
||||
@ -12730,46 +12859,48 @@
|
||||
Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc');
|
||||
|
||||
/**
|
||||
* get/set drag bound function. This is used to override the default
|
||||
* drag and drop position
|
||||
* @name dragBoundFunc
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
* @param {Function} dragBoundFunc
|
||||
* @returns {Function}
|
||||
* @example
|
||||
* // get drag bound function
|
||||
* var dragBoundFunc = node.dragBoundFunc();
|
||||
*
|
||||
* // create vertical drag and drop
|
||||
* node.dragBoundFunc(function(pos){
|
||||
* return {
|
||||
* x: this.getAbsolutePosition().x,
|
||||
* y: pos.y
|
||||
* };
|
||||
* });
|
||||
*/
|
||||
* get/set drag bound function. This is used to override the default
|
||||
* drag and drop position.
|
||||
* @name dragBoundFunc
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
* @param {Function} dragBoundFunc
|
||||
* @returns {Function}
|
||||
* @example
|
||||
* // get drag bound function
|
||||
* var dragBoundFunc = node.dragBoundFunc();
|
||||
*
|
||||
* // create vertical drag and drop
|
||||
* node.dragBoundFunc(function(pos){
|
||||
* // important pos - is absolute position of the node
|
||||
* // you should return absolute position too
|
||||
* return {
|
||||
* x: this.getAbsolutePosition().x,
|
||||
* y: pos.y
|
||||
* };
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetter(Konva.Node, 'draggable', false);
|
||||
Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable');
|
||||
|
||||
/**
|
||||
* get/set draggable flag
|
||||
* @name draggable
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
* @param {Boolean} draggable
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get draggable flag
|
||||
* var draggable = node.draggable();
|
||||
*
|
||||
* // enable drag and drop
|
||||
* node.draggable(true);
|
||||
*
|
||||
* // disable drag and drop
|
||||
* node.draggable(false);
|
||||
*/
|
||||
* get/set draggable flag
|
||||
* @name draggable
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
* @param {Boolean} draggable
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get draggable flag
|
||||
* var draggable = node.draggable();
|
||||
*
|
||||
* // enable drag and drop
|
||||
* node.draggable(true);
|
||||
*
|
||||
* // disable drag and drop
|
||||
* node.draggable(false);
|
||||
*/
|
||||
|
||||
if (Konva.isBrowser) {
|
||||
var html = Konva.document.documentElement;
|
||||
@ -15760,14 +15891,14 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* Path constructor.
|
||||
* @author Jason Follas
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Shape
|
||||
* @param {Object} config
|
||||
* @param {String} config.data SVG data string
|
||||
* @param {String} [config.fill] fill color
|
||||
* Path constructor.
|
||||
* @author Jason Follas
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Shape
|
||||
* @param {Object} config
|
||||
* @param {String} config.data SVG data string
|
||||
* @param {String} [config.fill] fill color
|
||||
* @param {Image} [config.fillPatternImage] fill pattern image
|
||||
* @param {Number} [config.fillPatternX]
|
||||
* @param {Number} [config.fillPatternY]
|
||||
@ -15818,7 +15949,7 @@
|
||||
* @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true
|
||||
* @param {Array} [config.dash]
|
||||
* @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true
|
||||
* @param {Number} [config.x]
|
||||
* @param {Number} [config.x]
|
||||
* @param {Number} [config.y]
|
||||
* @param {Number} [config.width]
|
||||
* @param {Number} [config.height]
|
||||
@ -15838,15 +15969,15 @@
|
||||
* the entire stage by dragging any portion of the stage
|
||||
* @param {Number} [config.dragDistance]
|
||||
* @param {Function} [config.dragBoundFunc]
|
||||
* @example
|
||||
* var path = new Konva.Path({
|
||||
* x: 240,
|
||||
* y: 40,
|
||||
* data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
|
||||
* fill: 'green',
|
||||
* scale: 2
|
||||
* });
|
||||
*/
|
||||
* @example
|
||||
* var path = new Konva.Path({
|
||||
* x: 240,
|
||||
* y: 40,
|
||||
* data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
|
||||
* fill: 'green',
|
||||
* scale: 2
|
||||
* });
|
||||
*/
|
||||
Konva.Path = function(config) {
|
||||
this.___init(config);
|
||||
};
|
||||
@ -16063,7 +16194,8 @@
|
||||
};
|
||||
};
|
||||
Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) {
|
||||
var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
|
||||
var cosPsi = Math.cos(psi),
|
||||
sinPsi = Math.sin(psi);
|
||||
var pt = {
|
||||
x: rx * Math.cos(theta),
|
||||
y: ry * Math.sin(theta)
|
||||
@ -16142,26 +16274,35 @@
|
||||
// create array
|
||||
var arr = cs.split('|');
|
||||
var ca = [];
|
||||
var coords = [];
|
||||
// init context point
|
||||
var cpx = 0;
|
||||
var cpy = 0;
|
||||
|
||||
var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
|
||||
var match;
|
||||
for (n = 1; n < arr.length; n++) {
|
||||
var str = arr[n];
|
||||
var c = str.charAt(0);
|
||||
str = str.slice(1);
|
||||
// remove ,- for consistency
|
||||
str = str.replace(new RegExp(',-', 'g'), '-');
|
||||
// add commas so that it's easy to split
|
||||
str = str.replace(new RegExp('-', 'g'), ',-');
|
||||
str = str.replace(new RegExp('e,-', 'g'), 'e-');
|
||||
var p = str.split(',');
|
||||
if (p.length > 0 && p[0] === '') {
|
||||
p.shift();
|
||||
|
||||
coords.length = 0;
|
||||
while ((match = re.exec(str))) {
|
||||
coords.push(match[0]);
|
||||
}
|
||||
// convert strings to floats
|
||||
for (var i = 0; i < p.length; i++) {
|
||||
p[i] = parseFloat(p[i]);
|
||||
|
||||
// while ((match = re.exec(str))) {
|
||||
// coords.push(match[0]);
|
||||
// }
|
||||
var p = [];
|
||||
|
||||
for (var j = 0, jlen = coords.length; j < jlen; j++) {
|
||||
var parsed = parseFloat(coords[j]);
|
||||
if (!isNaN(parsed)) {
|
||||
p.push(parsed);
|
||||
}
|
||||
}
|
||||
|
||||
while (p.length > 0) {
|
||||
if (isNaN(p[0])) {
|
||||
// case for a trailing comma before next command
|
||||
@ -16170,7 +16311,8 @@
|
||||
|
||||
var cmd = null;
|
||||
var points = [];
|
||||
var startX = cpx, startY = cpy;
|
||||
var startX = cpx,
|
||||
startY = cpy;
|
||||
// Move var from within the switch to up here (jshint)
|
||||
var prevCmd, ctlPtx, ctlPty; // Ss, Tt
|
||||
var rx, ry, psi, fa, fs, x1, y1; // Aa
|
||||
@ -16599,22 +16741,22 @@
|
||||
Konva.Factory.addGetterSetter(Konva.Path, 'data');
|
||||
|
||||
/**
|
||||
* set SVG path data string. This method
|
||||
* also automatically parses the data string
|
||||
* into a data array. Currently supported SVG data:
|
||||
* M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
|
||||
* @name setData
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
* @param {String} SVG path command string
|
||||
*/
|
||||
* set SVG path data string. This method
|
||||
* also automatically parses the data string
|
||||
* into a data array. Currently supported SVG data:
|
||||
* M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
|
||||
* @name setData
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
* @param {String} SVG path command string
|
||||
*/
|
||||
|
||||
/**
|
||||
* get SVG path data string
|
||||
* @name getData
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
*/
|
||||
* get SVG path data string
|
||||
* @name getData
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
*/
|
||||
|
||||
Konva.Collection.mapMethods(Konva.Path);
|
||||
})();
|
||||
@ -18444,10 +18586,10 @@
|
||||
// bindings
|
||||
this.handleMouseMove = this.handleMouseMove.bind(this);
|
||||
this.handleMouseUp = this.handleMouseUp.bind(this);
|
||||
this._update = this._update.bind(this);
|
||||
this.update = this.update.bind(this);
|
||||
|
||||
// update transformer data for certain attr changes
|
||||
this.on(ATTR_CHANGE_LIST, this._update);
|
||||
this.on(ATTR_CHANGE_LIST, this.update);
|
||||
|
||||
if (!warningShowed) {
|
||||
Konva.Util.warn(
|
||||
@ -18462,10 +18604,10 @@
|
||||
this.detach();
|
||||
}
|
||||
this.setNode(node);
|
||||
node.on('dragmove.resizer', this._update);
|
||||
node.on(TRANSFORM_CHANGE_STR, this._update);
|
||||
node.on('dragmove.resizer', this.update);
|
||||
node.on(TRANSFORM_CHANGE_STR, this.update);
|
||||
|
||||
this._update();
|
||||
this.update();
|
||||
},
|
||||
|
||||
detach: function() {
|
||||
@ -18601,6 +18743,9 @@
|
||||
window.addEventListener('touchend', this.handleMouseUp);
|
||||
|
||||
this._transforming = true;
|
||||
|
||||
this.fire('transformstart');
|
||||
this.getNode().fire('transformstart');
|
||||
},
|
||||
|
||||
handleMouseMove: function(e) {
|
||||
@ -18809,10 +18954,10 @@
|
||||
|
||||
this.fire('transform');
|
||||
this.getNode().fire('transform');
|
||||
this._update();
|
||||
this.update();
|
||||
this.getLayer().batchDraw();
|
||||
},
|
||||
_update: function() {
|
||||
update: function() {
|
||||
var attrs = this._getNodeRect();
|
||||
var x = attrs.x;
|
||||
var y = attrs.y;
|
||||
|
||||
6
konva.min.js
vendored
6
konva.min.js
vendored
File diff suppressed because one or more lines are too long
167
src/Context.js
167
src/Context.js
@ -63,11 +63,11 @@
|
||||
];
|
||||
|
||||
/**
|
||||
* Canvas Context constructor
|
||||
* @constructor
|
||||
* @abstract
|
||||
* @memberof Konva
|
||||
*/
|
||||
* Canvas Context constructor
|
||||
* @constructor
|
||||
* @abstract
|
||||
* @memberof Konva
|
||||
*/
|
||||
Konva.Context = function(canvas) {
|
||||
this.init(canvas);
|
||||
};
|
||||
@ -83,33 +83,33 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* fill shape
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
* fill shape
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
fillShape: function(shape) {
|
||||
if (shape.getFillEnabled()) {
|
||||
this._fill(shape);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* stroke shape
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
* stroke shape
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
strokeShape: function(shape) {
|
||||
if (shape.getStrokeEnabled()) {
|
||||
this._stroke(shape);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* fill then stroke
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
* fill then stroke
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Konva.Shape} shape
|
||||
*/
|
||||
fillStrokeShape: function(shape) {
|
||||
var fillEnabled = shape.getFillEnabled();
|
||||
if (fillEnabled) {
|
||||
@ -120,14 +120,14 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* get context trace if trace is enabled
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
|
||||
* properties, and property values. If true, return relaxed context trace, which only returns method names and
|
||||
* properites.
|
||||
* @returns {String}
|
||||
*/
|
||||
* get context trace if trace is enabled
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
|
||||
* properties, and property values. If true, return relaxed context trace, which only returns method names and
|
||||
* properites.
|
||||
* @returns {String}
|
||||
*/
|
||||
getTrace: function(relaxed) {
|
||||
var traceArr = this.traceArr,
|
||||
len = traceArr.length,
|
||||
@ -169,15 +169,16 @@
|
||||
return str;
|
||||
},
|
||||
/**
|
||||
* clear trace if trace is enabled
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
*/
|
||||
* clear trace if trace is enabled
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
*/
|
||||
clearTrace: function() {
|
||||
this.traceArr = [];
|
||||
},
|
||||
_trace: function(str) {
|
||||
var traceArr = this.traceArr, len;
|
||||
var traceArr = this.traceArr,
|
||||
len;
|
||||
|
||||
traceArr.push(str);
|
||||
len = traceArr.length;
|
||||
@ -187,33 +188,33 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* reset canvas context transform
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
*/
|
||||
* reset canvas context transform
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
*/
|
||||
reset: function() {
|
||||
var pixelRatio = this.getCanvas().getPixelRatio();
|
||||
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
|
||||
},
|
||||
/**
|
||||
* get canvas
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @returns {Konva.Canvas}
|
||||
*/
|
||||
* get canvas
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @returns {Konva.Canvas}
|
||||
*/
|
||||
getCanvas: function() {
|
||||
return this.canvas;
|
||||
},
|
||||
/**
|
||||
* clear canvas
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Object} [bounds]
|
||||
* @param {Number} [bounds.x]
|
||||
* @param {Number} [bounds.y]
|
||||
* @param {Number} [bounds.width]
|
||||
* @param {Number} [bounds.height]
|
||||
*/
|
||||
* clear canvas
|
||||
* @method
|
||||
* @memberof Konva.Context.prototype
|
||||
* @param {Object} [bounds]
|
||||
* @param {Number} [bounds.x]
|
||||
* @param {Number} [bounds.y]
|
||||
* @param {Number} [bounds.width]
|
||||
* @param {Number} [bounds.height]
|
||||
*/
|
||||
clear: function(bounds) {
|
||||
var canvas = this.getCanvas();
|
||||
|
||||
@ -305,7 +306,8 @@
|
||||
);
|
||||
},
|
||||
drawImage: function() {
|
||||
var a = arguments, _context = this._context;
|
||||
var a = arguments,
|
||||
_context = this._context;
|
||||
|
||||
if (a.length === 3) {
|
||||
_context.drawImage(a[0], a[1], a[2]);
|
||||
@ -383,7 +385,8 @@
|
||||
this._context.scale(a[0], a[1]);
|
||||
},
|
||||
setLineDash: function() {
|
||||
var a = arguments, _context = this._context;
|
||||
var a = arguments,
|
||||
_context = this._context;
|
||||
|
||||
// works for Chrome and IE11
|
||||
if (this._context.setLineDash) {
|
||||
@ -430,7 +433,8 @@
|
||||
|
||||
// to prevent creating scope function at each loop
|
||||
var func = function(methodName) {
|
||||
var origMethod = that[methodName], ret;
|
||||
var origMethod = that[methodName],
|
||||
ret;
|
||||
|
||||
that[methodName] = function() {
|
||||
args = _simplifyArray(Array.prototype.slice.call(arguments, 0));
|
||||
@ -559,22 +563,34 @@
|
||||
},
|
||||
_fill: function(shape) {
|
||||
var hasColor = shape.fill(),
|
||||
hasPattern = shape.getFillPatternImage(),
|
||||
hasLinearGradient = shape.getFillLinearGradientColorStops(),
|
||||
hasRadialGradient = shape.getFillRadialGradientColorStops(),
|
||||
fillPriority = shape.getFillPriority();
|
||||
|
||||
// priority fills
|
||||
if (hasColor && fillPriority === 'color') {
|
||||
this._fillColor(shape);
|
||||
} else if (hasPattern && fillPriority === 'pattern') {
|
||||
return;
|
||||
}
|
||||
|
||||
var hasPattern = shape.getFillPatternImage();
|
||||
if (hasPattern && fillPriority === 'pattern') {
|
||||
this._fillPattern(shape);
|
||||
} else if (hasLinearGradient && fillPriority === 'linear-gradient') {
|
||||
return;
|
||||
}
|
||||
|
||||
var hasLinearGradient = shape.getFillLinearGradientColorStops();
|
||||
if (hasLinearGradient && fillPriority === 'linear-gradient') {
|
||||
this._fillLinearGradient(shape);
|
||||
} else if (hasRadialGradient && fillPriority === 'radial-gradient') {
|
||||
return;
|
||||
}
|
||||
|
||||
var hasRadialGradient = shape.getFillRadialGradientColorStops();
|
||||
if (hasRadialGradient && fillPriority === 'radial-gradient') {
|
||||
this._fillRadialGradient(shape);
|
||||
} else if (hasColor) {
|
||||
// now just try and fill with whatever is available
|
||||
return;
|
||||
}
|
||||
|
||||
// now just try and fill with whatever is available
|
||||
if (hasColor) {
|
||||
this._fillColor(shape);
|
||||
} else if (hasPattern) {
|
||||
this._fillPattern(shape);
|
||||
@ -584,6 +600,20 @@
|
||||
this._fillRadialGradient(shape);
|
||||
}
|
||||
},
|
||||
_strokeLinearGradient: function(shape) {
|
||||
var start = shape.getStrokeLinearGradientStartPoint(),
|
||||
end = shape.getStrokeLinearGradientEndPoint(),
|
||||
colorStops = shape.getStrokeLinearGradientColorStops(),
|
||||
grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
|
||||
|
||||
if (colorStops) {
|
||||
// build color stops
|
||||
for (var n = 0; n < colorStops.length; n += 2) {
|
||||
grd.addColorStop(colorStops[n], colorStops[n + 1]);
|
||||
}
|
||||
this.setAttr('strokeStyle', grd);
|
||||
}
|
||||
},
|
||||
_stroke: function(shape) {
|
||||
var dash = shape.dash(),
|
||||
// ignore strokeScaleEnabled for Text
|
||||
@ -603,11 +633,20 @@
|
||||
}
|
||||
|
||||
this.setAttr('lineWidth', shape.strokeWidth());
|
||||
this.setAttr('strokeStyle', shape.stroke());
|
||||
|
||||
if (!shape.getShadowForStrokeEnabled()) {
|
||||
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
|
||||
}
|
||||
|
||||
// TODO - do we need to make like a fill function?
|
||||
|
||||
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
|
||||
if (hasLinearGradient) {
|
||||
this._strokeLinearGradient(shape);
|
||||
} else {
|
||||
this.setAttr('strokeStyle', shape.stroke());
|
||||
}
|
||||
|
||||
shape._strokeFunc(this);
|
||||
|
||||
if (!strokeScaleEnabled) {
|
||||
@ -632,7 +671,7 @@
|
||||
this.setAttr('shadowColor', color);
|
||||
this.setAttr(
|
||||
'shadowBlur',
|
||||
blur * ratio * Math.min(Math.abs(scaleX), Math.abs(scaleY))
|
||||
blur * Math.min(Math.abs(scaleX), Math.abs(scaleY))
|
||||
);
|
||||
this.setAttr('shadowOffsetX', offset.x * scaleX);
|
||||
this.setAttr('shadowOffsetY', offset.y * scaleY);
|
||||
|
||||
@ -114,10 +114,10 @@
|
||||
// Node extenders
|
||||
|
||||
/**
|
||||
* initiate drag and drop
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
* initiate drag and drop
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
Konva.Node.prototype.startDrag = function() {
|
||||
var dd = Konva.DD,
|
||||
stage = this.getStage(),
|
||||
@ -170,10 +170,10 @@
|
||||
};
|
||||
|
||||
/**
|
||||
* stop drag and drop
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
* stop drag and drop
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
Konva.Node.prototype.stopDrag = function() {
|
||||
var dd = Konva.DD,
|
||||
evt = {};
|
||||
@ -201,10 +201,10 @@
|
||||
};
|
||||
|
||||
/**
|
||||
* determine if node is currently in drag and drop mode
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
* determine if node is currently in drag and drop mode
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
*/
|
||||
Konva.Node.prototype.isDragging = function() {
|
||||
var dd = Konva.DD;
|
||||
return !!(dd.node && dd.node._id === this._id && dd.isDragging);
|
||||
@ -273,46 +273,48 @@
|
||||
Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc');
|
||||
|
||||
/**
|
||||
* get/set drag bound function. This is used to override the default
|
||||
* drag and drop position
|
||||
* @name dragBoundFunc
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
* @param {Function} dragBoundFunc
|
||||
* @returns {Function}
|
||||
* @example
|
||||
* // get drag bound function
|
||||
* var dragBoundFunc = node.dragBoundFunc();
|
||||
*
|
||||
* // create vertical drag and drop
|
||||
* node.dragBoundFunc(function(pos){
|
||||
* return {
|
||||
* x: this.getAbsolutePosition().x,
|
||||
* y: pos.y
|
||||
* };
|
||||
* });
|
||||
*/
|
||||
* get/set drag bound function. This is used to override the default
|
||||
* drag and drop position.
|
||||
* @name dragBoundFunc
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
* @param {Function} dragBoundFunc
|
||||
* @returns {Function}
|
||||
* @example
|
||||
* // get drag bound function
|
||||
* var dragBoundFunc = node.dragBoundFunc();
|
||||
*
|
||||
* // create vertical drag and drop
|
||||
* node.dragBoundFunc(function(pos){
|
||||
* // important pos - is absolute position of the node
|
||||
* // you should return absolute position too
|
||||
* return {
|
||||
* x: this.getAbsolutePosition().x,
|
||||
* y: pos.y
|
||||
* };
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetter(Konva.Node, 'draggable', false);
|
||||
Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable');
|
||||
|
||||
/**
|
||||
* get/set draggable flag
|
||||
* @name draggable
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
* @param {Boolean} draggable
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get draggable flag
|
||||
* var draggable = node.draggable();
|
||||
*
|
||||
* // enable drag and drop
|
||||
* node.draggable(true);
|
||||
*
|
||||
* // disable drag and drop
|
||||
* node.draggable(false);
|
||||
*/
|
||||
* get/set draggable flag
|
||||
* @name draggable
|
||||
* @method
|
||||
* @memberof Konva.Node.prototype
|
||||
* @param {Boolean} draggable
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get draggable flag
|
||||
* var draggable = node.draggable();
|
||||
*
|
||||
* // enable drag and drop
|
||||
* node.draggable(true);
|
||||
*
|
||||
* // disable drag and drop
|
||||
* node.draggable(false);
|
||||
*/
|
||||
|
||||
if (Konva.isBrowser) {
|
||||
var html = Konva.document.documentElement;
|
||||
|
||||
@ -104,7 +104,10 @@
|
||||
};
|
||||
},
|
||||
addDeprecatedGetterSetter: function(constructor, attr, def, validator) {
|
||||
Konva.Util.error('Adding deprecated ' + attr);
|
||||
|
||||
var method = GET + Konva.Util._capitalize(attr);
|
||||
|
||||
var message =
|
||||
attr +
|
||||
' property is deprecated and will be removed soon. Look at Konva change log for more information.';
|
||||
|
||||
239
src/Shape.js
239
src/Shape.js
@ -173,7 +173,12 @@
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
hasStroke: function() {
|
||||
return this.strokeEnabled() && !!this.stroke();
|
||||
return (
|
||||
this.strokeEnabled() &&
|
||||
!!(this.stroke() || this.getStrokeLinearGradientColorStops())
|
||||
// TODO: do we need radial gradient
|
||||
// this.getStrokeRadialGradientColorStops()
|
||||
);
|
||||
},
|
||||
/**
|
||||
* determines if point is in the shape, regardless if other shapes are on top of it. Note: because
|
||||
@ -539,31 +544,6 @@
|
||||
* shape.stroke('rgba(0,255,0,0.5');
|
||||
*/
|
||||
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeRed',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeGreen',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeBlue',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeAlpha',
|
||||
1,
|
||||
Konva.Validators.alphaComponent
|
||||
);
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeWidth', 2);
|
||||
|
||||
/**
|
||||
@ -779,31 +759,6 @@
|
||||
* shape.shadowColor('rgba(0,255,0,0.5');
|
||||
*/
|
||||
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'shadowRed',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'shadowGreen',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'shadowBlue',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'shadowAlpha',
|
||||
1,
|
||||
Konva.Validators.alphaComponent
|
||||
);
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
|
||||
|
||||
/**
|
||||
@ -947,31 +902,6 @@
|
||||
* shape.fill(null);
|
||||
*/
|
||||
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillRed',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillGreen',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillBlue',
|
||||
0,
|
||||
Konva.Validators.RGBComponent
|
||||
);
|
||||
Konva.Factory.addDeprecatedGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillAlpha',
|
||||
1,
|
||||
Konva.Validators.alphaComponent
|
||||
);
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternX', 0);
|
||||
|
||||
/**
|
||||
@ -1022,6 +952,24 @@
|
||||
* shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientColorStops');
|
||||
|
||||
/**
|
||||
* get/set stroke linear gradient color stops
|
||||
* @name strokeLinearGradientColorStops
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Array} colorStops
|
||||
* @returns {Array} colorStops
|
||||
* @example
|
||||
* // get stroke linear gradient color stops
|
||||
* var colorStops = shape.strokeLinearGradientColorStops();
|
||||
*
|
||||
* // create a linear gradient that starts with red, changes to blue
|
||||
* // halfway through, and then changes to green
|
||||
* shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillRadialGradientStartRadius',
|
||||
@ -1242,6 +1190,7 @@
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
|
||||
|
||||
/**
|
||||
* get/set fill pattern offset x
|
||||
* @name fillPatternOffsetX
|
||||
@ -1258,6 +1207,7 @@
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
|
||||
|
||||
/**
|
||||
* get/set fill pattern offset y
|
||||
* @name fillPatternOffsetY
|
||||
@ -1299,6 +1249,7 @@
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
|
||||
|
||||
/**
|
||||
* get/set fill pattern scale x
|
||||
* @name fillPatternScaleX
|
||||
@ -1315,6 +1266,7 @@
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
|
||||
|
||||
/**
|
||||
* get/set fill pattern scale y
|
||||
* @name fillPatternScaleY
|
||||
@ -1356,11 +1308,38 @@
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addComponentsGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientStartPoint',
|
||||
['x', 'y']
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set stroke linear gradient start point
|
||||
* @name strokeLinearGradientStartPoint
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Object} startPoint
|
||||
* @param {Number} startPoint.x
|
||||
* @param {Number} startPoint.y
|
||||
* @returns {Object}
|
||||
* @example
|
||||
* // get stroke linear gradient start point
|
||||
* var startPoint = shape.strokeLinearGradientStartPoint();
|
||||
*
|
||||
* // set stroke linear gradient start point
|
||||
* shape.strokeLinearGradientStartPoint({
|
||||
* x: 20
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillLinearGradientStartPointX',
|
||||
0
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set fill linear gradient start point x
|
||||
* @name fillLinearGradientStartPointX
|
||||
@ -1376,11 +1355,33 @@
|
||||
* shape.fillLinearGradientStartPointX(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientStartPointX',
|
||||
0
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set stroke linear gradient start point x
|
||||
* @name linearLinearGradientStartPointX
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Number} x
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get stroke linear gradient start point x
|
||||
* var startPointX = shape.strokeLinearGradientStartPointX();
|
||||
*
|
||||
* // set stroke linear gradient start point x
|
||||
* shape.strokeLinearGradientStartPointX(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillLinearGradientStartPointY',
|
||||
0
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set fill linear gradient start point y
|
||||
* @name fillLinearGradientStartPointY
|
||||
@ -1396,6 +1397,26 @@
|
||||
* shape.fillLinearGradientStartPointY(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientStartPointY',
|
||||
0
|
||||
);
|
||||
/**
|
||||
* get/set stroke linear gradient start point y
|
||||
* @name strokeLinearGradientStartPointY
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Number} y
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get stroke linear gradient start point y
|
||||
* var startPointY = shape.strokeLinearGradientStartPointY();
|
||||
*
|
||||
* // set stroke linear gradient start point y
|
||||
* shape.strokeLinearGradientStartPointY(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addComponentsGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillLinearGradientEndPoint',
|
||||
@ -1422,6 +1443,32 @@
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addComponentsGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientEndPoint',
|
||||
['x', 'y']
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set stroke linear gradient end point
|
||||
* @name strokeLinearGradientEndPoint
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Object} endPoint
|
||||
* @param {Number} endPoint.x
|
||||
* @param {Number} endPoint.y
|
||||
* @returns {Object}
|
||||
* @example
|
||||
* // get stroke linear gradient end point
|
||||
* var endPoint = shape.strokeLinearGradientEndPoint();
|
||||
*
|
||||
* // set stroke linear gradient end point
|
||||
* shape.strokeLinearGradientEndPoint({
|
||||
* x: 20
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
|
||||
/**
|
||||
* get/set fill linear gradient end point x
|
||||
@ -1438,6 +1485,26 @@
|
||||
* shape.fillLinearGradientEndPointX(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientEndPointX',
|
||||
0
|
||||
);
|
||||
/**
|
||||
* get/set fill linear gradient end point x
|
||||
* @name strokeLinearGradientEndPointX
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Number} x
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get stroke linear gradient end point x
|
||||
* var endPointX = shape.strokeLinearGradientEndPointX();
|
||||
*
|
||||
* // set stroke linear gradient end point x
|
||||
* shape.strokeLinearGradientEndPointX(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
|
||||
/**
|
||||
* get/set fill linear gradient end point y
|
||||
@ -1454,6 +1521,26 @@
|
||||
* shape.fillLinearGradientEndPointY(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(
|
||||
Konva.Shape,
|
||||
'strokeLinearGradientEndPointY',
|
||||
0
|
||||
);
|
||||
/**
|
||||
* get/set stroke linear gradient end point y
|
||||
* @name strokeLinearGradientEndPointY
|
||||
* @method
|
||||
* @memberof Konva.Shape.prototype
|
||||
* @param {Number} y
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get stroke linear gradient end point y
|
||||
* var endPointY = shape.strokeLinearGradientEndPointY();
|
||||
*
|
||||
* // set stroke linear gradient end point y
|
||||
* shape.strokeLinearGradientEndPointY(20);
|
||||
*/
|
||||
|
||||
Konva.Factory.addComponentsGetterSetter(
|
||||
Konva.Shape,
|
||||
'fillRadialGradientStartPoint',
|
||||
|
||||
@ -2,24 +2,24 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* Path constructor.
|
||||
* @author Jason Follas
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Shape
|
||||
* @param {Object} config
|
||||
* @param {String} config.data SVG data string
|
||||
* @@shapeParams
|
||||
* @@nodeParams
|
||||
* @example
|
||||
* var path = new Konva.Path({
|
||||
* x: 240,
|
||||
* y: 40,
|
||||
* data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
|
||||
* fill: 'green',
|
||||
* scale: 2
|
||||
* });
|
||||
*/
|
||||
* Path constructor.
|
||||
* @author Jason Follas
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Shape
|
||||
* @param {Object} config
|
||||
* @param {String} config.data SVG data string
|
||||
* @@shapeParams
|
||||
* @@nodeParams
|
||||
* @example
|
||||
* var path = new Konva.Path({
|
||||
* x: 240,
|
||||
* y: 40,
|
||||
* data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
|
||||
* fill: 'green',
|
||||
* scale: 2
|
||||
* });
|
||||
*/
|
||||
Konva.Path = function(config) {
|
||||
this.___init(config);
|
||||
};
|
||||
@ -236,7 +236,8 @@
|
||||
};
|
||||
};
|
||||
Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) {
|
||||
var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
|
||||
var cosPsi = Math.cos(psi),
|
||||
sinPsi = Math.sin(psi);
|
||||
var pt = {
|
||||
x: rx * Math.cos(theta),
|
||||
y: ry * Math.sin(theta)
|
||||
@ -315,26 +316,35 @@
|
||||
// create array
|
||||
var arr = cs.split('|');
|
||||
var ca = [];
|
||||
var coords = [];
|
||||
// init context point
|
||||
var cpx = 0;
|
||||
var cpy = 0;
|
||||
|
||||
var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
|
||||
var match;
|
||||
for (n = 1; n < arr.length; n++) {
|
||||
var str = arr[n];
|
||||
var c = str.charAt(0);
|
||||
str = str.slice(1);
|
||||
// remove ,- for consistency
|
||||
str = str.replace(new RegExp(',-', 'g'), '-');
|
||||
// add commas so that it's easy to split
|
||||
str = str.replace(new RegExp('-', 'g'), ',-');
|
||||
str = str.replace(new RegExp('e,-', 'g'), 'e-');
|
||||
var p = str.split(',');
|
||||
if (p.length > 0 && p[0] === '') {
|
||||
p.shift();
|
||||
|
||||
coords.length = 0;
|
||||
while ((match = re.exec(str))) {
|
||||
coords.push(match[0]);
|
||||
}
|
||||
// convert strings to floats
|
||||
for (var i = 0; i < p.length; i++) {
|
||||
p[i] = parseFloat(p[i]);
|
||||
|
||||
// while ((match = re.exec(str))) {
|
||||
// coords.push(match[0]);
|
||||
// }
|
||||
var p = [];
|
||||
|
||||
for (var j = 0, jlen = coords.length; j < jlen; j++) {
|
||||
var parsed = parseFloat(coords[j]);
|
||||
if (!isNaN(parsed)) {
|
||||
p.push(parsed);
|
||||
}
|
||||
}
|
||||
|
||||
while (p.length > 0) {
|
||||
if (isNaN(p[0])) {
|
||||
// case for a trailing comma before next command
|
||||
@ -343,7 +353,8 @@
|
||||
|
||||
var cmd = null;
|
||||
var points = [];
|
||||
var startX = cpx, startY = cpy;
|
||||
var startX = cpx,
|
||||
startY = cpy;
|
||||
// Move var from within the switch to up here (jshint)
|
||||
var prevCmd, ctlPtx, ctlPty; // Ss, Tt
|
||||
var rx, ry, psi, fa, fs, x1, y1; // Aa
|
||||
@ -772,22 +783,22 @@
|
||||
Konva.Factory.addGetterSetter(Konva.Path, 'data');
|
||||
|
||||
/**
|
||||
* set SVG path data string. This method
|
||||
* also automatically parses the data string
|
||||
* into a data array. Currently supported SVG data:
|
||||
* M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
|
||||
* @name setData
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
* @param {String} SVG path command string
|
||||
*/
|
||||
* set SVG path data string. This method
|
||||
* also automatically parses the data string
|
||||
* into a data array. Currently supported SVG data:
|
||||
* M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
|
||||
* @name setData
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
* @param {String} SVG path command string
|
||||
*/
|
||||
|
||||
/**
|
||||
* get SVG path data string
|
||||
* @name getData
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
*/
|
||||
* get SVG path data string
|
||||
* @name getData
|
||||
* @method
|
||||
* @memberof Konva.Path.prototype
|
||||
*/
|
||||
|
||||
Konva.Collection.mapMethods(Konva.Path);
|
||||
})();
|
||||
|
||||
@ -103,10 +103,10 @@
|
||||
// bindings
|
||||
this.handleMouseMove = this.handleMouseMove.bind(this);
|
||||
this.handleMouseUp = this.handleMouseUp.bind(this);
|
||||
this._update = this._update.bind(this);
|
||||
this.update = this.update.bind(this);
|
||||
|
||||
// update transformer data for certain attr changes
|
||||
this.on(ATTR_CHANGE_LIST, this._update);
|
||||
this.on(ATTR_CHANGE_LIST, this.update);
|
||||
|
||||
if (!warningShowed) {
|
||||
Konva.Util.warn(
|
||||
@ -121,10 +121,10 @@
|
||||
this.detach();
|
||||
}
|
||||
this.setNode(node);
|
||||
node.on('dragmove.resizer', this._update);
|
||||
node.on(TRANSFORM_CHANGE_STR, this._update);
|
||||
node.on('dragmove.resizer', this.update);
|
||||
node.on(TRANSFORM_CHANGE_STR, this.update);
|
||||
|
||||
this._update();
|
||||
this.update();
|
||||
},
|
||||
|
||||
detach: function() {
|
||||
@ -260,6 +260,9 @@
|
||||
window.addEventListener('touchend', this.handleMouseUp);
|
||||
|
||||
this._transforming = true;
|
||||
|
||||
this.fire('transformstart');
|
||||
this.getNode().fire('transformstart');
|
||||
},
|
||||
|
||||
handleMouseMove: function(e) {
|
||||
@ -468,10 +471,10 @@
|
||||
|
||||
this.fire('transform');
|
||||
this.getNode().fire('transform');
|
||||
this._update();
|
||||
this.update();
|
||||
this.getLayer().batchDraw();
|
||||
},
|
||||
_update: function() {
|
||||
update: function() {
|
||||
var attrs = this._getNodeRect();
|
||||
var x = attrs.x;
|
||||
var y = attrs.y;
|
||||
|
||||
@ -725,10 +725,10 @@ suite('Caching', function() {
|
||||
group.cache();
|
||||
stage.draw();
|
||||
|
||||
cloneAndCompareLayer(layer, 150);
|
||||
cloneAndCompareLayer(layer, 200);
|
||||
});
|
||||
|
||||
test('test group with opacir', function() {
|
||||
test('test group with opacity', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
@ -756,7 +756,7 @@ suite('Caching', function() {
|
||||
group.cache();
|
||||
stage.draw();
|
||||
|
||||
cloneAndCompareLayer(layer, 150);
|
||||
cloneAndCompareLayer(layer, 210);
|
||||
});
|
||||
|
||||
test('cache group with rectangle with fill and opacity', function() {
|
||||
|
||||
@ -279,9 +279,7 @@ suite('Shape', function() {
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('set image fill to color then image then linear gradient then back to image', function(
|
||||
done
|
||||
) {
|
||||
test('set image fill to color then image then linear gradient then back to image', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
@ -341,6 +339,48 @@ suite('Shape', function() {
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
test('stroke gradient', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer({
|
||||
scaleY: 1.5
|
||||
});
|
||||
|
||||
var shape = new Konva.Rect({
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fillLinearGradientColorStops: [0, 'yellow', 0.5, 'red', 1, 'white'],
|
||||
fillLinearGradientStartPoint: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
scaleX: 3,
|
||||
fillLinearGradientEndPoint: {
|
||||
x: 100,
|
||||
y: 100
|
||||
},
|
||||
strokeLinearGradientColorStops: [0, 'red', 0.5, 'blue', 1, 'green'],
|
||||
strokeLinearGradientStartPoint: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
strokeLinearGradientEndPoint: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
layer.add(shape);
|
||||
stage.add(layer);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
|
||||
assert.equal(
|
||||
trace,
|
||||
'clearRect(0,0,578,200);save();transform(3,0,0,1.5,10,15);beginPath();rect(0,0,100,100);closePath();createLinearGradient(0,0,100,100);fillStyle=[object CanvasGradient];fill();lineWidth=2;createLinearGradient(0,0,100,100);strokeStyle=[object CanvasGradient];stroke();restore();'
|
||||
);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('test enablers and disablers', function() {
|
||||
var stage = addStage();
|
||||
@ -464,7 +504,7 @@ suite('Shape', function() {
|
||||
context.shadowOffsetY = 10 * canvas.ratio;
|
||||
context.fill();
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
compareLayerAndCanvas(layer, canvas, 30);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
|
||||
@ -989,7 +1029,10 @@ suite('Shape', function() {
|
||||
|
||||
assert.equal(rect.getY(), 50);
|
||||
|
||||
var trace = layer.getHitCanvas().getContext().getTrace(true);
|
||||
var trace = layer
|
||||
.getHitCanvas()
|
||||
.getContext()
|
||||
.getTrace(true);
|
||||
assert.equal(
|
||||
trace,
|
||||
'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();'
|
||||
@ -1244,16 +1287,15 @@ suite('Shape', function() {
|
||||
context.lineWidth = 10;
|
||||
context.fill();
|
||||
|
||||
context.shadowColor = 'rgba(0,0,0, 0)';
|
||||
context.shadowColor = 'rgba(0,0,0,0)';
|
||||
context.stroke();
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(
|
||||
trace,
|
||||
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;shadowColor=rgba(0,0,0,0);stroke();restore();restore();'
|
||||
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;shadowColor=rgba(0,0,0,0);strokeStyle=black;stroke();restore();restore();'
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user