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

return this from several methods. close #111

Browse Source
This commit is contained in:
Anton Lavrenov 2015-12-22 17:19:33 +07:00
parent 694abb9815
commit 2a514ee580
9 changed files with 269 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

483
konva.js
View File

@ -3,7 +3,7 @@
* Konva JavaScript Framework v0.11.0
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Sun Nov 22 2015
* Date: Tue Dec 22 2015
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@ -2666,7 +2666,8 @@ var Konva = {};
* var newVal = evt.newVal;
* });
*
* // also event delegation works
* // get event targets
* // with event delegations
* layer.on('click', 'Group', function(evt) {
* var shape = evt.target;
* var group = evtn.currentTarger;
@ -2763,16 +2764,20 @@ var Konva = {};
evt: evt
};
this.fire(evt.type, e);
return this;
},
addEventListener: function(type, handler) {
// we have to pass native event to handler
this.on(type, function(evt){
handler.call(this, evt.evt);
});
return this;
},
removeEventListener: function(type) {
this.off(type);
return this;
},
// like node.on
_delegate: function(event, selector, handler) {
var stopNode = this;
this.on(event, function(evt) {
@ -2824,6 +2829,7 @@ var Konva = {};
Konva._removeName(this.getName(), this._id);
this.remove();
return this;
},
/**
* get attr
@ -3449,6 +3455,7 @@ var Konva = {};
}
return res.concat(parent._findMatchers(selector, stopNode));
},
// is current node match passed selector?
_isMatch: function(selector) {
var selectorArr = selector.replace(/ /g, '').split(','),
len = selectorArr.length,
@ -3908,6 +3915,7 @@ var Konva = {};
names.splice(index, 1);
this.setName(names.join(' '));
}
return this;
},
/**
* set attr
@ -4527,33 +4535,33 @@ var Konva = {};
Konva.Collection.mapMethods(Konva.Node);
})(Konva);
(function() {
'use strict';
/**
* Grayscale Filter
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Grayscale]);
*/
Konva.Filters.Grayscale = function(imageData) {
var data = imageData.data,
len = data.length,
i, brightness;
for(i = 0; i < len; i += 4) {
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red
data[i] = brightness;
// green
data[i + 1] = brightness;
// blue
data[i + 2] = brightness;
}
};
})();
(function() {
'use strict';
/**
* Grayscale Filter
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Grayscale]);
*/
Konva.Filters.Grayscale = function(imageData) {
var data = imageData.data,
len = data.length,
i, brightness;
for(i = 0; i < len; i += 4) {
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red
data[i] = brightness;
// green
data[i + 1] = brightness;
// blue
data[i + 2] = brightness;
}
};
})();
(function() {
'use strict';
@ -4596,32 +4604,32 @@ var Konva = {};
})();
(function() {
'use strict';
/**
* Invert Filter
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Invert]);
*/
Konva.Filters.Invert = function(imageData) {
var data = imageData.data,
len = data.length,
i;
for(i = 0; i < len; i += 4) {
// red
data[i] = 255 - data[i];
// green
data[i + 1] = 255 - data[i + 1];
// blue
data[i + 2] = 255 - data[i + 2];
}
};
})();
(function() {
'use strict';
/**
* Invert Filter
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Invert]);
*/
Konva.Filters.Invert = function(imageData) {
var data = imageData.data,
len = data.length,
i;
for(i = 0; i < len; i += 4) {
// red
data[i] = 255 - data[i];
// green
data[i + 1] = 255 - data[i + 1];
// blue
data[i + 2] = 255 - data[i + 2];
}
};
})();
/*
the Gauss filter
@ -5906,181 +5914,181 @@ var Konva = {};
*/
})();
(function () {
'use strict';
(function () {
'use strict';
/**
* Noise Filter. Randomly adds or substracts to the color channels
* @function
* @name Noise
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Noise]);
* node.noise(0.8);
*/
Konva.Filters.Noise = function (imageData) {
var amount = this.noise() * 255,
data = imageData.data,
nPixels = data.length,
half = amount / 2,
i;
for (i = 0; i < nPixels; i += 4) {
data[i + 0] += half - 2 * half * Math.random();
data[i + 1] += half - 2 * half * Math.random();
data[i + 2] += half - 2 * half * Math.random();
}
};
Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter);
/**
* get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
* @name noise
* @method
* @memberof Konva.Node.prototype
* @param {Number} noise
* @returns {Number}
*/
})();
/**
* Noise Filter. Randomly adds or substracts to the color channels
* @function
* @name Noise
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Noise]);
* node.noise(0.8);
*/
Konva.Filters.Noise = function (imageData) {
var amount = this.noise() * 255,
data = imageData.data,
nPixels = data.length,
half = amount / 2,
i;
/*eslint-disable max-depth */
(function () {
'use strict';
/**
* Pixelate Filter. Averages groups of pixels and redraws
* them as larger pixels
* @function
* @name Pixelate
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Pixelate]);
* node.pixelSize(10);
*/
Konva.Filters.Pixelate = function (imageData) {
var pixelSize = Math.ceil(this.pixelSize()),
width = imageData.width,
height = imageData.height,
x, y, i,
//pixelsPerBin = pixelSize * pixelSize,
red, green, blue, alpha,
nBinsX = Math.ceil(width / pixelSize),
nBinsY = Math.ceil(height / pixelSize),
xBinStart, xBinEnd, yBinStart, yBinEnd,
xBin, yBin, pixelsInBin;
imageData = imageData.data;
for (xBin = 0; xBin < nBinsX; xBin += 1) {
for (yBin = 0; yBin < nBinsY; yBin += 1) {
// Initialize the color accumlators to 0
red = 0;
green = 0;
blue = 0;
alpha = 0;
// Determine which pixels are included in this bin
xBinStart = xBin * pixelSize;
xBinEnd = xBinStart + pixelSize;
yBinStart = yBin * pixelSize;
yBinEnd = yBinStart + pixelSize;
// Add all of the pixels to this bin!
pixelsInBin = 0;
for (x = xBinStart; x < xBinEnd; x += 1) {
if( x >= width ){ continue; }
for (y = yBinStart; y < yBinEnd; y += 1) {
if( y >= height ){ continue; }
i = (width * y + x) * 4;
red += imageData[i + 0];
green += imageData[i + 1];
blue += imageData[i + 2];
alpha += imageData[i + 3];
pixelsInBin += 1;
}
}
// Make sure the channels are between 0-255
red = red / pixelsInBin;
green = green / pixelsInBin;
blue = blue / pixelsInBin;
// Draw this bin
for (x = xBinStart; x < xBinEnd; x += 1) {
if( x >= width ){ continue; }
for (y = yBinStart; y < yBinEnd; y += 1) {
if( y >= height ){ continue; }
i = (width * y + x) * 4;
imageData[i + 0] = red;
imageData[i + 1] = green;
imageData[i + 2] = blue;
imageData[i + 3] = alpha;
}
}
}
}
};
Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter);
/**
* get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
* @name pixelSize
* @method
* @memberof Konva.Node.prototype
* @param {Integer} pixelSize
* @returns {Integer}
*/
})();
for (i = 0; i < nPixels; i += 4) {
data[i + 0] += half - 2 * half * Math.random();
data[i + 1] += half - 2 * half * Math.random();
data[i + 2] += half - 2 * half * Math.random();
}
};
Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter);
/**
* get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
* @name noise
* @method
* @memberof Konva.Node.prototype
* @param {Number} noise
* @returns {Number}
*/
})();
/*eslint-disable max-depth */
(function () {
'use strict';
/**
* Pixelate Filter. Averages groups of pixels and redraws
* them as larger pixels
* @function
* @name Pixelate
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Pixelate]);
* node.pixelSize(10);
*/
Konva.Filters.Pixelate = function (imageData) {
var pixelSize = Math.ceil(this.pixelSize()),
width = imageData.width,
height = imageData.height,
x, y, i,
//pixelsPerBin = pixelSize * pixelSize,
red, green, blue, alpha,
nBinsX = Math.ceil(width / pixelSize),
nBinsY = Math.ceil(height / pixelSize),
xBinStart, xBinEnd, yBinStart, yBinEnd,
xBin, yBin, pixelsInBin;
imageData = imageData.data;
for (xBin = 0; xBin < nBinsX; xBin += 1) {
for (yBin = 0; yBin < nBinsY; yBin += 1) {
// Initialize the color accumlators to 0
red = 0;
green = 0;
blue = 0;
alpha = 0;
// Determine which pixels are included in this bin
xBinStart = xBin * pixelSize;
xBinEnd = xBinStart + pixelSize;
yBinStart = yBin * pixelSize;
yBinEnd = yBinStart + pixelSize;
// Add all of the pixels to this bin!
pixelsInBin = 0;
for (x = xBinStart; x < xBinEnd; x += 1) {
if( x >= width ){ continue; }
for (y = yBinStart; y < yBinEnd; y += 1) {
if( y >= height ){ continue; }
i = (width * y + x) * 4;
red += imageData[i + 0];
green += imageData[i + 1];
blue += imageData[i + 2];
alpha += imageData[i + 3];
pixelsInBin += 1;
}
}
// Make sure the channels are between 0-255
red = red / pixelsInBin;
green = green / pixelsInBin;
blue = blue / pixelsInBin;
// Draw this bin
for (x = xBinStart; x < xBinEnd; x += 1) {
if( x >= width ){ continue; }
for (y = yBinStart; y < yBinEnd; y += 1) {
if( y >= height ){ continue; }
i = (width * y + x) * 4;
imageData[i + 0] = red;
imageData[i + 1] = green;
imageData[i + 2] = blue;
imageData[i + 3] = alpha;
}
}
}
}
};
Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter);
/**
* get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
* @name pixelSize
* @method
* @memberof Konva.Node.prototype
* @param {Integer} pixelSize
* @returns {Integer}
*/
})();
(function () {
'use strict';
/**
* Threshold Filter. Pushes any value above the mid point to
* the max and any value below the mid point to the min.
* This affects the alpha channel.
* @function
* @name Threshold
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Threshold]);
* node.threshold(0.1);
*/
Konva.Filters.Threshold = function (imageData) {
var level = this.threshold() * 255,
data = imageData.data,
len = data.length,
i;
for (i = 0; i < len; i += 1) {
data[i] = data[i] < level ? 0 : 255;
}
};
Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter);
/**
* get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
* @name threshold
* @method
* @memberof Konva.Node.prototype
* @param {Number} threshold
* @returns {Number}
*/
})();
(function () {
'use strict';
/**
* Threshold Filter. Pushes any value above the mid point to
* the max and any value below the mid point to the min.
* This affects the alpha channel.
* @function
* @name Threshold
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Threshold]);
* node.threshold(0.1);
*/
Konva.Filters.Threshold = function (imageData) {
var level = this.threshold() * 255,
data = imageData.data,
len = data.length,
i;
for (i = 0; i < len; i += 1) {
data[i] = data[i] < level ? 0 : 255;
}
};
Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter);
/**
* get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
* @name threshold
* @method
* @memberof Konva.Node.prototype
* @param {Number} threshold
* @returns {Number}
*/
})();
(function() {
'use strict';
@ -6614,6 +6622,7 @@ var Konva = {};
}
// then destroy self
Konva.Node.prototype.destroy.call(this);
return this;
},
/**
* return a {@link Konva.Collection} of nodes that match the selector. Use '#' for id selections
@ -7259,6 +7268,7 @@ var Konva = {};
destroy: function() {
Konva.Node.prototype.destroy.call(this);
delete Konva.shapes[this.colorKey];
return this;
},
_useBufferCanvas: function(caching) {
return !caching && (this.perfectDrawEnabled() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage()) ||
@ -8708,6 +8718,7 @@ var Konva = {};
if (index > -1) {
Konva.stages.splice(index, 1);
}
return this;
},
/**
* get pointer position which can be a touch position or mouse position
@ -9175,7 +9186,6 @@ var Konva = {};
x = evt.clientX - contentPosition.left;
y = evt.clientY - contentPosition.top;
}
if (x !== null && y !== null) {
this.pointerPos = {
x: x,
@ -9385,16 +9395,17 @@ var Konva = {};
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.appendChild(this.getCanvas()._canvas);
}
return this;
},
// extend Node.prototype.moveUp
moveUp: function() {
var moved = Konva.Node.prototype.moveUp.call(this);
if (!moved){
return;
return this;
}
var stage = this.getStage();
if(!stage) {
return;
return this;
}
stage.content.removeChild(this.getCanvas()._canvas);
@ -9403,6 +9414,7 @@ var Konva = {};
} else {
stage.content.appendChild(this.getCanvas()._canvas);
}
return this;
},
// extend Node.prototype.moveDown
moveDown: function() {
@ -9414,6 +9426,7 @@ var Konva = {};
stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
}
}
return this;
},
// extend Node.prototype.moveToBottom
moveToBottom: function() {
@ -9425,6 +9438,7 @@ var Konva = {};
stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
}
}
return this;
},
getLayer: function() {
return this;
@ -9444,6 +9458,7 @@ var Konva = {};
},
setSize: function(width, height) {
this.canvas.setSize(width, height);
return this;
},
/**
* get/set width of layer.getter return width of stage. setter doing nothing.
@ -9771,6 +9786,7 @@ var Konva = {};
setSize: function(width, height) {
Konva.BaseLayer.prototype.setSize.call(this, width, height);
this.hitCanvas.setSize(width, height);
return this;
}
});
Konva.Util.extend(Konva.Layer, Konva.BaseLayer);
@ -10212,11 +10228,6 @@ var Konva = {};
}
};
var moveTo = Konva.Node.prototype.moveTo;
Konva.Node.prototype.moveTo = function(container) {
moveTo.call(this, container);
};
/**
* batch draw
* @method

12
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
src/Animation.js
View File

@ -268,11 +268,6 @@
}
};
var moveTo = Konva.Node.prototype.moveTo;
Konva.Node.prototype.moveTo = function(container) {
moveTo.call(this, container);
};
/**
* batch draw
* @method

9
src/BaseLayer.js
View File

@ -98,16 +98,17 @@
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.appendChild(this.getCanvas()._canvas);
}
return this;
},
// extend Node.prototype.moveUp
moveUp: function() {
var moved = Konva.Node.prototype.moveUp.call(this);
if (!moved){
return;
return this;
}
var stage = this.getStage();
if(!stage) {
return;
return this;
}
stage.content.removeChild(this.getCanvas()._canvas);
@ -116,6 +117,7 @@
} else {
stage.content.appendChild(this.getCanvas()._canvas);
}
return this;
},
// extend Node.prototype.moveDown
moveDown: function() {
@ -127,6 +129,7 @@
stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
}
}
return this;
},
// extend Node.prototype.moveToBottom
moveToBottom: function() {
@ -138,6 +141,7 @@
stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
}
}
return this;
},
getLayer: function() {
return this;
@ -157,6 +161,7 @@
},
setSize: function(width, height) {
this.canvas.setSize(width, height);
return this;
},
/**
* get/set width of layer.getter return width of stage. setter doing nothing.

1
src/Container.js
View File

@ -141,6 +141,7 @@
}
// then destroy self
Konva.Node.prototype.destroy.call(this);
return this;
},
/**
* return a {@link Konva.Collection} of nodes that match the selector. Use '#' for id selections

1
src/Layer.js
View File

@ -230,6 +230,7 @@
setSize: function(width, height) {
Konva.BaseLayer.prototype.setSize.call(this, width, height);
this.hitCanvas.setSize(width, height);
return this;
}
});
Konva.Util.extend(Konva.Layer, Konva.BaseLayer);

5
src/Node.js
View File

@ -516,15 +516,18 @@
evt: evt
};
this.fire(evt.type, e);
return this;
},
addEventListener: function(type, handler) {
// we have to pass native event to handler
this.on(type, function(evt){
handler.call(this, evt.evt);
});
return this;
},
removeEventListener: function(type) {
this.off(type);
return this;
},
// like node.on
_delegate: function(event, selector, handler) {
@ -578,6 +581,7 @@
Konva._removeName(this.getName(), this._id);
this.remove();
return this;
},
/**
* get attr
@ -1663,6 +1667,7 @@
names.splice(index, 1);
this.setName(names.join(' '));
}
return this;
},
/**
* set attr

1
src/Shape.js
View File

@ -171,6 +171,7 @@
destroy: function() {
Konva.Node.prototype.destroy.call(this);
delete Konva.shapes[this.colorKey];
return this;
},
_useBufferCanvas: function(caching) {
return !caching && (this.perfectDrawEnabled() && (this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage()) ||

2
src/Stage.js
View File

@ -186,6 +186,7 @@
if (index > -1) {
Konva.stages.splice(index, 1);
}
return this;
},
/**
* get pointer position which can be a touch position or mouse position
@ -653,7 +654,6 @@
x = evt.clientX - contentPosition.left;
y = evt.clientY - contentPosition.top;
}
if (x !== null && y !== null) {
this.pointerPos = {
x: x,