lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from konvajs/master

Browse Source 
update fork
This commit is contained in:
Namalee 2018-03-13 16:07:18 +01:00 committed by GitHub
commit 0730bb1da8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 871 additions and 504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -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. * new `Konva.Transformer` group that allow simple resize, and rotate of a shape.
* Add ability to remove event by callback `node.off('event', callback)`. * Add ability to remove event by callback `node.off('event', callback)`.
* new `Konva.Filters.Contrast`. * 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 `Konva.Text.ellipsis` to add '…' to text string if width is fixed and wrap is set to 'none'
* add gradients for strokes
## Changed ## Changed
@ -21,6 +22,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* Some typescript fixes * Some typescript fixes
* Pixelate filter 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] ## [1.7.6][2017-11-01]

14
konva.d.ts vendored
View File

@ -333,12 +333,12 @@ declare namespace Konva {
fillLinearGradientEndPointX?: number; fillLinearGradientEndPointX?: number;
fillLinearGradientEndPointY?: number; fillLinearGradientEndPointY?: number;
fillLinearGradientColorStops?: Array<number | string>; fillLinearGradientColorStops?: Array<number | string>;
fillLinearRadialStartPoint?: Vector2d; fillRadialGradientStartPoint?: Vector2d;
fillLinearRadialStartPointX?: number; fillRadialGradientStartPointX?: number;
fillLinearRadialStartPointY?: number; fillRadialGradientStartPointY?: number;
fillLinearRadialEndPoint?: Vector2d; fillRadialGradientEndPoint?: Vector2d;
fillLinearRadialEndPointX?: number; fillRadialGradientEndPointX?: number;
fillLinearRadialEndPointY?: number; fillRadialGradientEndPointY?: number;
fillRadialGradientStartRadius?: number; fillRadialGradientStartRadius?: number;
fillRadialGradientEndRadius?: number; fillRadialGradientEndRadius?: number;
fillRadialGradientColorStops?: Array<number | string>; fillRadialGradientColorStops?: Array<number | string>;
@ -363,6 +363,7 @@ declare namespace Konva {
shadowEnabled?: boolean; shadowEnabled?: boolean;
dash?: number[]; dash?: number[];
dashEnabled?: boolean; dashEnabled?: boolean;
perfectDrawEnabled?: boolean;
} }
class Shape extends Node { class Shape extends Node {
@ -752,6 +753,7 @@ declare namespace Konva {
cropWidth(cropWidth: number): this; cropWidth(cropWidth: number): this;
cropHeight(): number; cropHeight(): number;
cropHeight(cropHeight: number): this; cropHeight(cropHeight: number): this;
static fromURL(url: string, callback: (image: Konva.Image) => void): void;
} }
interface LineConfig extends ShapeConfig { interface LineConfig extends ShapeConfig {

625
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.7.6 * Konva JavaScript Framework v1.7.6
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT * Licensed under the MIT
* Date: Thu Mar 08 2018 * Date: Mon Mar 12 2018
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -1512,11 +1512,11 @@
]; ];
/** /**
* Canvas Context constructor * Canvas Context constructor
* @constructor * @constructor
* @abstract * @abstract
* @memberof Konva * @memberof Konva
*/ */
Konva.Context = function(canvas) { Konva.Context = function(canvas) {
this.init(canvas); this.init(canvas);
}; };
@ -1532,33 +1532,33 @@
} }
}, },
/** /**
* fill shape * fill shape
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Konva.Shape} shape * @param {Konva.Shape} shape
*/ */
fillShape: function(shape) { fillShape: function(shape) {
if (shape.getFillEnabled()) { if (shape.getFillEnabled()) {
this._fill(shape); this._fill(shape);
} }
}, },
/** /**
* stroke shape * stroke shape
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Konva.Shape} shape * @param {Konva.Shape} shape
*/ */
strokeShape: function(shape) { strokeShape: function(shape) {
if (shape.getStrokeEnabled()) { if (shape.getStrokeEnabled()) {
this._stroke(shape); this._stroke(shape);
} }
}, },
/** /**
* fill then stroke * fill then stroke
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Konva.Shape} shape * @param {Konva.Shape} shape
*/ */
fillStrokeShape: function(shape) { fillStrokeShape: function(shape) {
var fillEnabled = shape.getFillEnabled(); var fillEnabled = shape.getFillEnabled();
if (fillEnabled) { if (fillEnabled) {
@ -1569,14 +1569,14 @@
} }
}, },
/** /**
* get context trace if trace is enabled * get context trace if trace is enabled
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters * @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 * properties, and property values. If true, return relaxed context trace, which only returns method names and
* properites. * properites.
* @returns {String} * @returns {String}
*/ */
getTrace: function(relaxed) { getTrace: function(relaxed) {
var traceArr = this.traceArr, var traceArr = this.traceArr,
len = traceArr.length, len = traceArr.length,
@ -1618,15 +1618,16 @@
return str; return str;
}, },
/** /**
* clear trace if trace is enabled * clear trace if trace is enabled
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
*/ */
clearTrace: function() { clearTrace: function() {
this.traceArr = []; this.traceArr = [];
}, },
_trace: function(str) { _trace: function(str) {
var traceArr = this.traceArr, len; var traceArr = this.traceArr,
len;
traceArr.push(str); traceArr.push(str);
len = traceArr.length; len = traceArr.length;
@ -1636,33 +1637,33 @@
} }
}, },
/** /**
* reset canvas context transform * reset canvas context transform
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
*/ */
reset: function() { reset: function() {
var pixelRatio = this.getCanvas().getPixelRatio(); var pixelRatio = this.getCanvas().getPixelRatio();
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0); this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
}, },
/** /**
* get canvas * get canvas
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @returns {Konva.Canvas} * @returns {Konva.Canvas}
*/ */
getCanvas: function() { getCanvas: function() {
return this.canvas; return this.canvas;
}, },
/** /**
* clear canvas * clear canvas
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Object} [bounds] * @param {Object} [bounds]
* @param {Number} [bounds.x] * @param {Number} [bounds.x]
* @param {Number} [bounds.y] * @param {Number} [bounds.y]
* @param {Number} [bounds.width] * @param {Number} [bounds.width]
* @param {Number} [bounds.height] * @param {Number} [bounds.height]
*/ */
clear: function(bounds) { clear: function(bounds) {
var canvas = this.getCanvas(); var canvas = this.getCanvas();
@ -1754,7 +1755,8 @@
); );
}, },
drawImage: function() { drawImage: function() {
var a = arguments, _context = this._context; var a = arguments,
_context = this._context;
if (a.length === 3) { if (a.length === 3) {
_context.drawImage(a[0], a[1], a[2]); _context.drawImage(a[0], a[1], a[2]);
@ -1832,7 +1834,8 @@
this._context.scale(a[0], a[1]); this._context.scale(a[0], a[1]);
}, },
setLineDash: function() { setLineDash: function() {
var a = arguments, _context = this._context; var a = arguments,
_context = this._context;
// works for Chrome and IE11 // works for Chrome and IE11
if (this._context.setLineDash) { if (this._context.setLineDash) {
@ -1879,7 +1882,8 @@
// to prevent creating scope function at each loop // to prevent creating scope function at each loop
var func = function(methodName) { var func = function(methodName) {
var origMethod = that[methodName], ret; var origMethod = that[methodName],
ret;
that[methodName] = function() { that[methodName] = function() {
args = _simplifyArray(Array.prototype.slice.call(arguments, 0)); args = _simplifyArray(Array.prototype.slice.call(arguments, 0));
@ -2008,22 +2012,34 @@
}, },
_fill: function(shape) { _fill: function(shape) {
var hasColor = shape.fill(), var hasColor = shape.fill(),
hasPattern = shape.getFillPatternImage(),
hasLinearGradient = shape.getFillLinearGradientColorStops(),
hasRadialGradient = shape.getFillRadialGradientColorStops(),
fillPriority = shape.getFillPriority(); fillPriority = shape.getFillPriority();
// priority fills // priority fills
if (hasColor && fillPriority === 'color') { if (hasColor && fillPriority === 'color') {
this._fillColor(shape); this._fillColor(shape);
} else if (hasPattern && fillPriority === 'pattern') { return;
}
var hasPattern = shape.getFillPatternImage();
if (hasPattern && fillPriority === 'pattern') {
this._fillPattern(shape); this._fillPattern(shape);
} else if (hasLinearGradient && fillPriority === 'linear-gradient') { return;
}
var hasLinearGradient = shape.getFillLinearGradientColorStops();
if (hasLinearGradient && fillPriority === 'linear-gradient') {
this._fillLinearGradient(shape); this._fillLinearGradient(shape);
} else if (hasRadialGradient && fillPriority === 'radial-gradient') { return;
}
var hasRadialGradient = shape.getFillRadialGradientColorStops();
if (hasRadialGradient && fillPriority === 'radial-gradient') {
this._fillRadialGradient(shape); this._fillRadialGradient(shape);
} else if (hasColor) { return;
// now just try and fill with whatever is available }
// now just try and fill with whatever is available
if (hasColor) {
this._fillColor(shape); this._fillColor(shape);
} else if (hasPattern) { } else if (hasPattern) {
this._fillPattern(shape); this._fillPattern(shape);
@ -2033,6 +2049,20 @@
this._fillRadialGradient(shape); 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) { _stroke: function(shape) {
var dash = shape.dash(), var dash = shape.dash(),
// ignore strokeScaleEnabled for Text // ignore strokeScaleEnabled for Text
@ -2052,11 +2082,20 @@
} }
this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('lineWidth', shape.strokeWidth());
this.setAttr('strokeStyle', shape.stroke());
if (!shape.getShadowForStrokeEnabled()) { if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)'); 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); shape._strokeFunc(this);
if (!strokeScaleEnabled) { if (!strokeScaleEnabled) {
@ -2081,7 +2120,7 @@
this.setAttr('shadowColor', color); this.setAttr('shadowColor', color);
this.setAttr( this.setAttr(
'shadowBlur', '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('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY); this.setAttr('shadowOffsetY', offset.y * scaleY);
@ -2234,7 +2273,10 @@
}; };
}, },
addDeprecatedGetterSetter: function(constructor, attr, def, validator) { addDeprecatedGetterSetter: function(constructor, attr, def, validator) {
Konva.Util.error('Adding deprecated ' + attr);
var method = GET + Konva.Util._capitalize(attr); var method = GET + Konva.Util._capitalize(attr);
var message = var message =
attr + attr +
' property is deprecated and will be removed soon. Look at Konva change log for more information.'; ' property is deprecated and will be removed soon. Look at Konva change log for more information.';
@ -8411,7 +8453,12 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
hasStroke: function() { 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 * 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'); * 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); Konva.Factory.addGetterSetter(Konva.Shape, 'strokeWidth', 2);
/** /**
@ -9017,31 +9039,6 @@
* shape.shadowColor('rgba(0,255,0,0.5'); * 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'); Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
/** /**
@ -9185,31 +9182,6 @@
* shape.fill(null); * 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); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternX', 0);
/** /**
@ -9260,6 +9232,24 @@
* shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green'); * 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.Factory.addGetterSetter(
Konva.Shape, Konva.Shape,
'fillRadialGradientStartRadius', 'fillRadialGradientStartRadius',
@ -9480,6 +9470,7 @@
*/ */
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
/** /**
* get/set fill pattern offset x * get/set fill pattern offset x
* @name fillPatternOffsetX * @name fillPatternOffsetX
@ -9496,6 +9487,7 @@
*/ */
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
/** /**
* get/set fill pattern offset y * get/set fill pattern offset y
* @name fillPatternOffsetY * @name fillPatternOffsetY
@ -9537,6 +9529,7 @@
*/ */
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
/** /**
* get/set fill pattern scale x * get/set fill pattern scale x
* @name fillPatternScaleX * @name fillPatternScaleX
@ -9553,6 +9546,7 @@
*/ */
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
/** /**
* get/set fill pattern scale y * get/set fill pattern scale y
* @name fillPatternScaleY * @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.Factory.addGetterSetter(
Konva.Shape, Konva.Shape,
'fillLinearGradientStartPointX', 'fillLinearGradientStartPointX',
0 0
); );
/** /**
* get/set fill linear gradient start point x * get/set fill linear gradient start point x
* @name fillLinearGradientStartPointX * @name fillLinearGradientStartPointX
@ -9614,11 +9635,33 @@
* shape.fillLinearGradientStartPointX(20); * 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.Factory.addGetterSetter(
Konva.Shape, Konva.Shape,
'fillLinearGradientStartPointY', 'fillLinearGradientStartPointY',
0 0
); );
/** /**
* get/set fill linear gradient start point y * get/set fill linear gradient start point y
* @name fillLinearGradientStartPointY * @name fillLinearGradientStartPointY
@ -9634,6 +9677,26 @@
* shape.fillLinearGradientStartPointY(20); * 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.Factory.addComponentsGetterSetter(
Konva.Shape, Konva.Shape,
'fillLinearGradientEndPoint', '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); Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
/** /**
* get/set fill linear gradient end point x * get/set fill linear gradient end point x
@ -9676,6 +9765,26 @@
* shape.fillLinearGradientEndPointX(20); * 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); Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
/** /**
* get/set fill linear gradient end point y * get/set fill linear gradient end point y
@ -9692,6 +9801,26 @@
* shape.fillLinearGradientEndPointY(20); * 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.Factory.addComponentsGetterSetter(
Konva.Shape, Konva.Shape,
'fillRadialGradientStartPoint', 'fillRadialGradientStartPoint',
@ -12571,10 +12700,10 @@
// Node extenders // Node extenders
/** /**
* initiate drag and drop * initiate drag and drop
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.startDrag = function() { Konva.Node.prototype.startDrag = function() {
var dd = Konva.DD, var dd = Konva.DD,
stage = this.getStage(), stage = this.getStage(),
@ -12627,10 +12756,10 @@
}; };
/** /**
* stop drag and drop * stop drag and drop
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.stopDrag = function() { Konva.Node.prototype.stopDrag = function() {
var dd = Konva.DD, var dd = Konva.DD,
evt = {}; evt = {};
@ -12658,10 +12787,10 @@
}; };
/** /**
* determine if node is currently in drag and drop mode * determine if node is currently in drag and drop mode
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.isDragging = function() { Konva.Node.prototype.isDragging = function() {
var dd = Konva.DD; var dd = Konva.DD;
return !!(dd.node && dd.node._id === this._id && dd.isDragging); return !!(dd.node && dd.node._id === this._id && dd.isDragging);
@ -12730,46 +12859,48 @@
Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc'); Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc');
/** /**
* get/set drag bound function. This is used to override the default * get/set drag bound function. This is used to override the default
* drag and drop position * drag and drop position.
* @name dragBoundFunc * @name dragBoundFunc
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
* @param {Function} dragBoundFunc * @param {Function} dragBoundFunc
* @returns {Function} * @returns {Function}
* @example * @example
* // get drag bound function * // get drag bound function
* var dragBoundFunc = node.dragBoundFunc(); * var dragBoundFunc = node.dragBoundFunc();
* *
* // create vertical drag and drop * // create vertical drag and drop
* node.dragBoundFunc(function(pos){ * node.dragBoundFunc(function(pos){
* return { * // important pos - is absolute position of the node
* x: this.getAbsolutePosition().x, * // you should return absolute position too
* y: pos.y * return {
* }; * x: this.getAbsolutePosition().x,
* }); * y: pos.y
*/ * };
* });
*/
Konva.Factory.addGetter(Konva.Node, 'draggable', false); Konva.Factory.addGetter(Konva.Node, 'draggable', false);
Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable'); Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable');
/** /**
* get/set draggable flag * get/set draggable flag
* @name draggable * @name draggable
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
* @param {Boolean} draggable * @param {Boolean} draggable
* @returns {Boolean} * @returns {Boolean}
* @example * @example
* // get draggable flag * // get draggable flag
* var draggable = node.draggable(); * var draggable = node.draggable();
* *
* // enable drag and drop * // enable drag and drop
* node.draggable(true); * node.draggable(true);
* *
* // disable drag and drop * // disable drag and drop
* node.draggable(false); * node.draggable(false);
*/ */
if (Konva.isBrowser) { if (Konva.isBrowser) {
var html = Konva.document.documentElement; var html = Konva.document.documentElement;
@ -15760,14 +15891,14 @@
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Path constructor. * Path constructor.
* @author Jason Follas * @author Jason Follas
* @constructor * @constructor
* @memberof Konva * @memberof Konva
* @augments Konva.Shape * @augments Konva.Shape
* @param {Object} config * @param {Object} config
* @param {String} config.data SVG data string * @param {String} config.data SVG data string
* @param {String} [config.fill] fill color * @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image * @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX] * @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY] * @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 {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true
* @param {Array} [config.dash] * @param {Array} [config.dash]
* @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true * @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.y]
* @param {Number} [config.width] * @param {Number} [config.width]
* @param {Number} [config.height] * @param {Number} [config.height]
@ -15838,15 +15969,15 @@
* the entire stage by dragging any portion of the stage * the entire stage by dragging any portion of the stage
* @param {Number} [config.dragDistance] * @param {Number} [config.dragDistance]
* @param {Function} [config.dragBoundFunc] * @param {Function} [config.dragBoundFunc]
* @example * @example
* var path = new Konva.Path({ * var path = new Konva.Path({
* x: 240, * x: 240,
* y: 40, * 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', * 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', * fill: 'green',
* scale: 2 * scale: 2
* }); * });
*/ */
Konva.Path = function(config) { Konva.Path = function(config) {
this.___init(config); this.___init(config);
}; };
@ -16063,7 +16194,8 @@
}; };
}; };
Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) { 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 = { var pt = {
x: rx * Math.cos(theta), x: rx * Math.cos(theta),
y: ry * Math.sin(theta) y: ry * Math.sin(theta)
@ -16142,26 +16274,35 @@
// create array // create array
var arr = cs.split('|'); var arr = cs.split('|');
var ca = []; var ca = [];
var coords = [];
// init context point // init context point
var cpx = 0; var cpx = 0;
var cpy = 0; var cpy = 0;
var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
var match;
for (n = 1; n < arr.length; n++) { for (n = 1; n < arr.length; n++) {
var str = arr[n]; var str = arr[n];
var c = str.charAt(0); var c = str.charAt(0);
str = str.slice(1); str = str.slice(1);
// remove ,- for consistency
str = str.replace(new RegExp(',-', 'g'), '-'); coords.length = 0;
// add commas so that it's easy to split while ((match = re.exec(str))) {
str = str.replace(new RegExp('-', 'g'), ',-'); coords.push(match[0]);
str = str.replace(new RegExp('e,-', 'g'), 'e-');
var p = str.split(',');
if (p.length > 0 && p[0] === '') {
p.shift();
} }
// convert strings to floats
for (var i = 0; i < p.length; i++) { // while ((match = re.exec(str))) {
p[i] = parseFloat(p[i]); // 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) { while (p.length > 0) {
if (isNaN(p[0])) { if (isNaN(p[0])) {
// case for a trailing comma before next command // case for a trailing comma before next command
@ -16170,7 +16311,8 @@
var cmd = null; var cmd = null;
var points = []; var points = [];
var startX = cpx, startY = cpy; var startX = cpx,
startY = cpy;
// Move var from within the switch to up here (jshint) // Move var from within the switch to up here (jshint)
var prevCmd, ctlPtx, ctlPty; // Ss, Tt var prevCmd, ctlPtx, ctlPty; // Ss, Tt
var rx, ry, psi, fa, fs, x1, y1; // Aa var rx, ry, psi, fa, fs, x1, y1; // Aa
@ -16599,22 +16741,22 @@
Konva.Factory.addGetterSetter(Konva.Path, 'data'); Konva.Factory.addGetterSetter(Konva.Path, 'data');
/** /**
* set SVG path data string. This method * set SVG path data string. This method
* also automatically parses the data string * also automatically parses the data string
* into a data array. Currently supported SVG data: * 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 * M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
* @name setData * @name setData
* @method * @method
* @memberof Konva.Path.prototype * @memberof Konva.Path.prototype
* @param {String} SVG path command string * @param {String} SVG path command string
*/ */
/** /**
* get SVG path data string * get SVG path data string
* @name getData * @name getData
* @method * @method
* @memberof Konva.Path.prototype * @memberof Konva.Path.prototype
*/ */
Konva.Collection.mapMethods(Konva.Path); Konva.Collection.mapMethods(Konva.Path);
})(); })();
@ -18444,10 +18586,10 @@
// bindings // bindings
this.handleMouseMove = this.handleMouseMove.bind(this); this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleMouseUp = this.handleMouseUp.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 // update transformer data for certain attr changes
this.on(ATTR_CHANGE_LIST, this._update); this.on(ATTR_CHANGE_LIST, this.update);
if (!warningShowed) { if (!warningShowed) {
Konva.Util.warn( Konva.Util.warn(
@ -18462,10 +18604,10 @@
this.detach(); this.detach();
} }
this.setNode(node); this.setNode(node);
node.on('dragmove.resizer', this._update); node.on('dragmove.resizer', this.update);
node.on(TRANSFORM_CHANGE_STR, this._update); node.on(TRANSFORM_CHANGE_STR, this.update);
this._update(); this.update();
}, },
detach: function() { detach: function() {
@ -18601,6 +18743,9 @@
window.addEventListener('touchend', this.handleMouseUp); window.addEventListener('touchend', this.handleMouseUp);
this._transforming = true; this._transforming = true;
this.fire('transformstart');
this.getNode().fire('transformstart');
}, },
handleMouseMove: function(e) { handleMouseMove: function(e) {
@ -18809,10 +18954,10 @@
this.fire('transform'); this.fire('transform');
this.getNode().fire('transform'); this.getNode().fire('transform');
this._update(); this.update();
this.getLayer().batchDraw(); this.getLayer().batchDraw();
}, },
_update: function() { update: function() {
var attrs = this._getNodeRect(); var attrs = this._getNodeRect();
var x = attrs.x; var x = attrs.x;
var y = attrs.y; var y = attrs.y;

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

167
src/Context.js
View File

@ -63,11 +63,11 @@
]; ];
/** /**
* Canvas Context constructor * Canvas Context constructor
* @constructor * @constructor
* @abstract * @abstract
* @memberof Konva * @memberof Konva
*/ */
Konva.Context = function(canvas) { Konva.Context = function(canvas) {
this.init(canvas); this.init(canvas);
}; };
@ -83,33 +83,33 @@
} }
}, },
/** /**
* fill shape * fill shape
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Konva.Shape} shape * @param {Konva.Shape} shape
*/ */
fillShape: function(shape) { fillShape: function(shape) {
if (shape.getFillEnabled()) { if (shape.getFillEnabled()) {
this._fill(shape); this._fill(shape);
} }
}, },
/** /**
* stroke shape * stroke shape
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Konva.Shape} shape * @param {Konva.Shape} shape
*/ */
strokeShape: function(shape) { strokeShape: function(shape) {
if (shape.getStrokeEnabled()) { if (shape.getStrokeEnabled()) {
this._stroke(shape); this._stroke(shape);
} }
}, },
/** /**
* fill then stroke * fill then stroke
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Konva.Shape} shape * @param {Konva.Shape} shape
*/ */
fillStrokeShape: function(shape) { fillStrokeShape: function(shape) {
var fillEnabled = shape.getFillEnabled(); var fillEnabled = shape.getFillEnabled();
if (fillEnabled) { if (fillEnabled) {
@ -120,14 +120,14 @@
} }
}, },
/** /**
* get context trace if trace is enabled * get context trace if trace is enabled
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters * @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 * properties, and property values. If true, return relaxed context trace, which only returns method names and
* properites. * properites.
* @returns {String} * @returns {String}
*/ */
getTrace: function(relaxed) { getTrace: function(relaxed) {
var traceArr = this.traceArr, var traceArr = this.traceArr,
len = traceArr.length, len = traceArr.length,
@ -169,15 +169,16 @@
return str; return str;
}, },
/** /**
* clear trace if trace is enabled * clear trace if trace is enabled
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
*/ */
clearTrace: function() { clearTrace: function() {
this.traceArr = []; this.traceArr = [];
}, },
_trace: function(str) { _trace: function(str) {
var traceArr = this.traceArr, len; var traceArr = this.traceArr,
len;
traceArr.push(str); traceArr.push(str);
len = traceArr.length; len = traceArr.length;
@ -187,33 +188,33 @@
} }
}, },
/** /**
* reset canvas context transform * reset canvas context transform
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
*/ */
reset: function() { reset: function() {
var pixelRatio = this.getCanvas().getPixelRatio(); var pixelRatio = this.getCanvas().getPixelRatio();
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0); this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
}, },
/** /**
* get canvas * get canvas
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @returns {Konva.Canvas} * @returns {Konva.Canvas}
*/ */
getCanvas: function() { getCanvas: function() {
return this.canvas; return this.canvas;
}, },
/** /**
* clear canvas * clear canvas
* @method * @method
* @memberof Konva.Context.prototype * @memberof Konva.Context.prototype
* @param {Object} [bounds] * @param {Object} [bounds]
* @param {Number} [bounds.x] * @param {Number} [bounds.x]
* @param {Number} [bounds.y] * @param {Number} [bounds.y]
* @param {Number} [bounds.width] * @param {Number} [bounds.width]
* @param {Number} [bounds.height] * @param {Number} [bounds.height]
*/ */
clear: function(bounds) { clear: function(bounds) {
var canvas = this.getCanvas(); var canvas = this.getCanvas();
@ -305,7 +306,8 @@
); );
}, },
drawImage: function() { drawImage: function() {
var a = arguments, _context = this._context; var a = arguments,
_context = this._context;
if (a.length === 3) { if (a.length === 3) {
_context.drawImage(a[0], a[1], a[2]); _context.drawImage(a[0], a[1], a[2]);
@ -383,7 +385,8 @@
this._context.scale(a[0], a[1]); this._context.scale(a[0], a[1]);
}, },
setLineDash: function() { setLineDash: function() {
var a = arguments, _context = this._context; var a = arguments,
_context = this._context;
// works for Chrome and IE11 // works for Chrome and IE11
if (this._context.setLineDash) { if (this._context.setLineDash) {
@ -430,7 +433,8 @@
// to prevent creating scope function at each loop // to prevent creating scope function at each loop
var func = function(methodName) { var func = function(methodName) {
var origMethod = that[methodName], ret; var origMethod = that[methodName],
ret;
that[methodName] = function() { that[methodName] = function() {
args = _simplifyArray(Array.prototype.slice.call(arguments, 0)); args = _simplifyArray(Array.prototype.slice.call(arguments, 0));
@ -559,22 +563,34 @@
}, },
_fill: function(shape) { _fill: function(shape) {
var hasColor = shape.fill(), var hasColor = shape.fill(),
hasPattern = shape.getFillPatternImage(),
hasLinearGradient = shape.getFillLinearGradientColorStops(),
hasRadialGradient = shape.getFillRadialGradientColorStops(),
fillPriority = shape.getFillPriority(); fillPriority = shape.getFillPriority();
// priority fills // priority fills
if (hasColor && fillPriority === 'color') { if (hasColor && fillPriority === 'color') {
this._fillColor(shape); this._fillColor(shape);
} else if (hasPattern && fillPriority === 'pattern') { return;
}
var hasPattern = shape.getFillPatternImage();
if (hasPattern && fillPriority === 'pattern') {
this._fillPattern(shape); this._fillPattern(shape);
} else if (hasLinearGradient && fillPriority === 'linear-gradient') { return;
}
var hasLinearGradient = shape.getFillLinearGradientColorStops();
if (hasLinearGradient && fillPriority === 'linear-gradient') {
this._fillLinearGradient(shape); this._fillLinearGradient(shape);
} else if (hasRadialGradient && fillPriority === 'radial-gradient') { return;
}
var hasRadialGradient = shape.getFillRadialGradientColorStops();
if (hasRadialGradient && fillPriority === 'radial-gradient') {
this._fillRadialGradient(shape); this._fillRadialGradient(shape);
} else if (hasColor) { return;
// now just try and fill with whatever is available }
// now just try and fill with whatever is available
if (hasColor) {
this._fillColor(shape); this._fillColor(shape);
} else if (hasPattern) { } else if (hasPattern) {
this._fillPattern(shape); this._fillPattern(shape);
@ -584,6 +600,20 @@
this._fillRadialGradient(shape); 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) { _stroke: function(shape) {
var dash = shape.dash(), var dash = shape.dash(),
// ignore strokeScaleEnabled for Text // ignore strokeScaleEnabled for Text
@ -603,11 +633,20 @@
} }
this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('lineWidth', shape.strokeWidth());
this.setAttr('strokeStyle', shape.stroke());
if (!shape.getShadowForStrokeEnabled()) { if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)'); 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); shape._strokeFunc(this);
if (!strokeScaleEnabled) { if (!strokeScaleEnabled) {
@ -632,7 +671,7 @@
this.setAttr('shadowColor', color); this.setAttr('shadowColor', color);
this.setAttr( this.setAttr(
'shadowBlur', '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('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY); this.setAttr('shadowOffsetY', offset.y * scaleY);

96
src/DragAndDrop.js
View File

@ -114,10 +114,10 @@
// Node extenders // Node extenders
/** /**
* initiate drag and drop * initiate drag and drop
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.startDrag = function() { Konva.Node.prototype.startDrag = function() {
var dd = Konva.DD, var dd = Konva.DD,
stage = this.getStage(), stage = this.getStage(),
@ -170,10 +170,10 @@
}; };
/** /**
* stop drag and drop * stop drag and drop
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.stopDrag = function() { Konva.Node.prototype.stopDrag = function() {
var dd = Konva.DD, var dd = Konva.DD,
evt = {}; evt = {};
@ -201,10 +201,10 @@
}; };
/** /**
* determine if node is currently in drag and drop mode * determine if node is currently in drag and drop mode
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
*/ */
Konva.Node.prototype.isDragging = function() { Konva.Node.prototype.isDragging = function() {
var dd = Konva.DD; var dd = Konva.DD;
return !!(dd.node && dd.node._id === this._id && dd.isDragging); return !!(dd.node && dd.node._id === this._id && dd.isDragging);
@ -273,46 +273,48 @@
Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc'); Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc');
/** /**
* get/set drag bound function. This is used to override the default * get/set drag bound function. This is used to override the default
* drag and drop position * drag and drop position.
* @name dragBoundFunc * @name dragBoundFunc
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
* @param {Function} dragBoundFunc * @param {Function} dragBoundFunc
* @returns {Function} * @returns {Function}
* @example * @example
* // get drag bound function * // get drag bound function
* var dragBoundFunc = node.dragBoundFunc(); * var dragBoundFunc = node.dragBoundFunc();
* *
* // create vertical drag and drop * // create vertical drag and drop
* node.dragBoundFunc(function(pos){ * node.dragBoundFunc(function(pos){
* return { * // important pos - is absolute position of the node
* x: this.getAbsolutePosition().x, * // you should return absolute position too
* y: pos.y * return {
* }; * x: this.getAbsolutePosition().x,
* }); * y: pos.y
*/ * };
* });
*/
Konva.Factory.addGetter(Konva.Node, 'draggable', false); Konva.Factory.addGetter(Konva.Node, 'draggable', false);
Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable'); Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable');
/** /**
* get/set draggable flag * get/set draggable flag
* @name draggable * @name draggable
* @method * @method
* @memberof Konva.Node.prototype * @memberof Konva.Node.prototype
* @param {Boolean} draggable * @param {Boolean} draggable
* @returns {Boolean} * @returns {Boolean}
* @example * @example
* // get draggable flag * // get draggable flag
* var draggable = node.draggable(); * var draggable = node.draggable();
* *
* // enable drag and drop * // enable drag and drop
* node.draggable(true); * node.draggable(true);
* *
* // disable drag and drop * // disable drag and drop
* node.draggable(false); * node.draggable(false);
*/ */
if (Konva.isBrowser) { if (Konva.isBrowser) {
var html = Konva.document.documentElement; var html = Konva.document.documentElement;

3
src/Factory.js
View File

@ -104,7 +104,10 @@
}; };
}, },
addDeprecatedGetterSetter: function(constructor, attr, def, validator) { addDeprecatedGetterSetter: function(constructor, attr, def, validator) {
Konva.Util.error('Adding deprecated ' + attr);
var method = GET + Konva.Util._capitalize(attr); var method = GET + Konva.Util._capitalize(attr);
var message = var message =
attr + attr +
' property is deprecated and will be removed soon. Look at Konva change log for more information.'; ' property is deprecated and will be removed soon. Look at Konva change log for more information.';

239
src/Shape.js
View File

@ -173,7 +173,12 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
hasStroke: function() { 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 * 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'); * 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); Konva.Factory.addGetterSetter(Konva.Shape, 'strokeWidth', 2);
/** /**
@ -779,31 +759,6 @@
* shape.shadowColor('rgba(0,255,0,0.5'); * 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'); Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
/** /**
@ -947,31 +902,6 @@
* shape.fill(null); * 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); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternX', 0);
/** /**
@ -1022,6 +952,24 @@
* shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green'); * 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.Factory.addGetterSetter(
Konva.Shape, Konva.Shape,
'fillRadialGradientStartRadius', 'fillRadialGradientStartRadius',
@ -1242,6 +1190,7 @@
*/ */
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
/** /**
* get/set fill pattern offset x * get/set fill pattern offset x
* @name fillPatternOffsetX * @name fillPatternOffsetX
@ -1258,6 +1207,7 @@
*/ */
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
/** /**
* get/set fill pattern offset y * get/set fill pattern offset y
* @name fillPatternOffsetY * @name fillPatternOffsetY
@ -1299,6 +1249,7 @@
*/ */
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
/** /**
* get/set fill pattern scale x * get/set fill pattern scale x
* @name fillPatternScaleX * @name fillPatternScaleX
@ -1315,6 +1266,7 @@
*/ */
Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1); Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
/** /**
* get/set fill pattern scale y * get/set fill pattern scale y
* @name fillPatternScaleY * @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.Factory.addGetterSetter(
Konva.Shape, Konva.Shape,
'fillLinearGradientStartPointX', 'fillLinearGradientStartPointX',
0 0
); );
/** /**
* get/set fill linear gradient start point x * get/set fill linear gradient start point x
* @name fillLinearGradientStartPointX * @name fillLinearGradientStartPointX
@ -1376,11 +1355,33 @@
* shape.fillLinearGradientStartPointX(20); * 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.Factory.addGetterSetter(
Konva.Shape, Konva.Shape,
'fillLinearGradientStartPointY', 'fillLinearGradientStartPointY',
0 0
); );
/** /**
* get/set fill linear gradient start point y * get/set fill linear gradient start point y
* @name fillLinearGradientStartPointY * @name fillLinearGradientStartPointY
@ -1396,6 +1397,26 @@
* shape.fillLinearGradientStartPointY(20); * 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.Factory.addComponentsGetterSetter(
Konva.Shape, Konva.Shape,
'fillLinearGradientEndPoint', '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); Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
/** /**
* get/set fill linear gradient end point x * get/set fill linear gradient end point x
@ -1438,6 +1485,26 @@
* shape.fillLinearGradientEndPointX(20); * 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); Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
/** /**
* get/set fill linear gradient end point y * get/set fill linear gradient end point y
@ -1454,6 +1521,26 @@
* shape.fillLinearGradientEndPointY(20); * 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.Factory.addComponentsGetterSetter(
Konva.Shape, Konva.Shape,
'fillRadialGradientStartPoint', 'fillRadialGradientStartPoint',

101
src/shapes/Path.js
View File

@ -2,24 +2,24 @@
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Path constructor. * Path constructor.
* @author Jason Follas * @author Jason Follas
* @constructor * @constructor
* @memberof Konva * @memberof Konva
* @augments Konva.Shape * @augments Konva.Shape
* @param {Object} config * @param {Object} config
* @param {String} config.data SVG data string * @param {String} config.data SVG data string
* @@shapeParams * @@shapeParams
* @@nodeParams * @@nodeParams
* @example * @example
* var path = new Konva.Path({ * var path = new Konva.Path({
* x: 240, * x: 240,
* y: 40, * 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', * 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', * fill: 'green',
* scale: 2 * scale: 2
* }); * });
*/ */
Konva.Path = function(config) { Konva.Path = function(config) {
this.___init(config); this.___init(config);
}; };
@ -236,7 +236,8 @@
}; };
}; };
Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) { 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 = { var pt = {
x: rx * Math.cos(theta), x: rx * Math.cos(theta),
y: ry * Math.sin(theta) y: ry * Math.sin(theta)
@ -315,26 +316,35 @@
// create array // create array
var arr = cs.split('|'); var arr = cs.split('|');
var ca = []; var ca = [];
var coords = [];
// init context point // init context point
var cpx = 0; var cpx = 0;
var cpy = 0; var cpy = 0;
var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
var match;
for (n = 1; n < arr.length; n++) { for (n = 1; n < arr.length; n++) {
var str = arr[n]; var str = arr[n];
var c = str.charAt(0); var c = str.charAt(0);
str = str.slice(1); str = str.slice(1);
// remove ,- for consistency
str = str.replace(new RegExp(',-', 'g'), '-'); coords.length = 0;
// add commas so that it's easy to split while ((match = re.exec(str))) {
str = str.replace(new RegExp('-', 'g'), ',-'); coords.push(match[0]);
str = str.replace(new RegExp('e,-', 'g'), 'e-');
var p = str.split(',');
if (p.length > 0 && p[0] === '') {
p.shift();
} }
// convert strings to floats
for (var i = 0; i < p.length; i++) { // while ((match = re.exec(str))) {
p[i] = parseFloat(p[i]); // 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) { while (p.length > 0) {
if (isNaN(p[0])) { if (isNaN(p[0])) {
// case for a trailing comma before next command // case for a trailing comma before next command
@ -343,7 +353,8 @@
var cmd = null; var cmd = null;
var points = []; var points = [];
var startX = cpx, startY = cpy; var startX = cpx,
startY = cpy;
// Move var from within the switch to up here (jshint) // Move var from within the switch to up here (jshint)
var prevCmd, ctlPtx, ctlPty; // Ss, Tt var prevCmd, ctlPtx, ctlPty; // Ss, Tt
var rx, ry, psi, fa, fs, x1, y1; // Aa var rx, ry, psi, fa, fs, x1, y1; // Aa
@ -772,22 +783,22 @@
Konva.Factory.addGetterSetter(Konva.Path, 'data'); Konva.Factory.addGetterSetter(Konva.Path, 'data');
/** /**
* set SVG path data string. This method * set SVG path data string. This method
* also automatically parses the data string * also automatically parses the data string
* into a data array. Currently supported SVG data: * 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 * M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
* @name setData * @name setData
* @method * @method
* @memberof Konva.Path.prototype * @memberof Konva.Path.prototype
* @param {String} SVG path command string * @param {String} SVG path command string
*/ */
/** /**
* get SVG path data string * get SVG path data string
* @name getData * @name getData
* @method * @method
* @memberof Konva.Path.prototype * @memberof Konva.Path.prototype
*/ */
Konva.Collection.mapMethods(Konva.Path); Konva.Collection.mapMethods(Konva.Path);
})(); })();

17
src/shapes/Transformer.js
View File

@ -103,10 +103,10 @@
// bindings // bindings
this.handleMouseMove = this.handleMouseMove.bind(this); this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleMouseUp = this.handleMouseUp.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 // update transformer data for certain attr changes
this.on(ATTR_CHANGE_LIST, this._update); this.on(ATTR_CHANGE_LIST, this.update);
if (!warningShowed) { if (!warningShowed) {
Konva.Util.warn( Konva.Util.warn(
@ -121,10 +121,10 @@
this.detach(); this.detach();
} }
this.setNode(node); this.setNode(node);
node.on('dragmove.resizer', this._update); node.on('dragmove.resizer', this.update);
node.on(TRANSFORM_CHANGE_STR, this._update); node.on(TRANSFORM_CHANGE_STR, this.update);
this._update(); this.update();
}, },
detach: function() { detach: function() {
@ -260,6 +260,9 @@
window.addEventListener('touchend', this.handleMouseUp); window.addEventListener('touchend', this.handleMouseUp);
this._transforming = true; this._transforming = true;
this.fire('transformstart');
this.getNode().fire('transformstart');
}, },
handleMouseMove: function(e) { handleMouseMove: function(e) {
@ -468,10 +471,10 @@
this.fire('transform'); this.fire('transform');
this.getNode().fire('transform'); this.getNode().fire('transform');
this._update(); this.update();
this.getLayer().batchDraw(); this.getLayer().batchDraw();
}, },
_update: function() { update: function() {
var attrs = this._getNodeRect(); var attrs = this._getNodeRect();
var x = attrs.x; var x = attrs.x;
var y = attrs.y; var y = attrs.y;

6
test/unit/Node-cache-test.js
View File

@ -725,10 +725,10 @@ suite('Caching', function() {
group.cache(); group.cache();
stage.draw(); stage.draw();
cloneAndCompareLayer(layer, 150); cloneAndCompareLayer(layer, 200);
}); });
test('test group with opacir', function() { test('test group with opacity', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);
@ -756,7 +756,7 @@ suite('Caching', function() {
group.cache(); group.cache();
stage.draw(); stage.draw();
cloneAndCompareLayer(layer, 150); cloneAndCompareLayer(layer, 210);
}); });
test('cache group with rectangle with fill and opacity', function() { test('cache group with rectangle with fill and opacity', function() {

58
test/unit/Shape-test.js
View File

@ -279,9 +279,7 @@ suite('Shape', function() {
}); });
// ====================================================== // ======================================================
test('set image fill to color then image then linear gradient then back to image', function( test('set image fill to color then image then linear gradient then back to image', function(done) {
done
) {
var imageObj = new Image(); var imageObj = new Image();
imageObj.onload = function() { imageObj.onload = function() {
var stage = addStage(); var stage = addStage();
@ -341,6 +339,48 @@ suite('Shape', function() {
imageObj.src = 'assets/darth-vader.jpg'; 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() { test('test enablers and disablers', function() {
var stage = addStage(); var stage = addStage();
@ -464,7 +504,7 @@ suite('Shape', function() {
context.shadowOffsetY = 10 * canvas.ratio; context.shadowOffsetY = 10 * canvas.ratio;
context.fill(); context.fill();
compareLayerAndCanvas(layer, canvas, 10); compareLayerAndCanvas(layer, canvas, 30);
var trace = layer.getContext().getTrace(); var trace = layer.getContext().getTrace();
@ -989,7 +1029,10 @@ suite('Shape', function() {
assert.equal(rect.getY(), 50); assert.equal(rect.getY(), 50);
var trace = layer.getHitCanvas().getContext().getTrace(true); var trace = layer
.getHitCanvas()
.getContext()
.getTrace(true);
assert.equal( assert.equal(
trace, trace,
'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();' 'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();'
@ -1244,16 +1287,15 @@ suite('Shape', function() {
context.lineWidth = 10; context.lineWidth = 10;
context.fill(); context.fill();
context.shadowColor = 'rgba(0,0,0, 0)'; context.shadowColor = 'rgba(0,0,0,0)';
context.stroke(); context.stroke();
compareLayerAndCanvas(layer, canvas, 10); compareLayerAndCanvas(layer, canvas, 10);
var trace = layer.getContext().getTrace(); var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal( assert.equal(
trace, 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();'
); );
}); });

35
test/unit/shapes/Path-test.js
View File

File diff suppressed because one or more lines are too long