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.
* 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
View File

@ -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 {

367
konva.js
View File

@ -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)
@ -1626,7 +1626,8 @@
this.traceArr = [];
},
_trace: function(str) {
var traceArr = this.traceArr, len;
var traceArr = this.traceArr,
len;
traceArr.push(str);
len = traceArr.length;
@ -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) {
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',
@ -12731,7 +12860,7 @@
/**
* get/set drag bound function. This is used to override the default
* drag and drop position
* drag and drop position.
* @name dragBoundFunc
* @method
* @memberof Konva.Node.prototype
@ -12743,6 +12872,8 @@
*
* // 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
@ -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
@ -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
View File

File diff suppressed because one or more lines are too long

65
src/Context.js
View File

@ -177,7 +177,8 @@
this.traceArr = [];
},
_trace: function(str) {
var traceArr = this.traceArr, len;
var traceArr = this.traceArr,
len;
traceArr.push(str);
len = traceArr.length;
@ -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) {
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);

4
src/DragAndDrop.js
View File

@ -274,7 +274,7 @@
/**
* get/set drag bound function. This is used to override the default
* drag and drop position
* drag and drop position.
* @name dragBoundFunc
* @method
* @memberof Konva.Node.prototype
@ -286,6 +286,8 @@
*
* // 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

3
src/Factory.js
View File

@ -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
View File

@ -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',

37
src/shapes/Path.js
View File

@ -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

17
src/shapes/Transformer.js
View File

@ -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;

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

@ -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() {

56
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(
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();'
@ -1250,10 +1293,9 @@ suite('Shape', function() {
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();'
);
});

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

File diff suppressed because one or more lines are too long