lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-12-29 02:03:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

container selector

Browse Source
This commit is contained in:
ningyi.zny
2016-02-26 22:21:49 +08:00
parent 8b23ae64df
commit 29a48662b4
2 changed files with 255 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

472
konva.js
View File

@@ -3,7 +3,7 @@
* Konva JavaScript Framework v0.11.1 * Konva JavaScript Framework v0.11.1
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Fri Feb 05 2016 * Date: Fri Feb 26 2016
* *
* 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 - 2015 by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -4565,33 +4565,33 @@
Konva.Collection.mapMethods(Konva.Node); Konva.Collection.mapMethods(Konva.Node);
})(Konva); })(Konva);
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Grayscale Filter * Grayscale Filter
* @function * @function
* @memberof Konva.Filters * @memberof Konva.Filters
* @param {Object} imageData * @param {Object} imageData
* @example * @example
* node.cache(); * node.cache();
* node.filters([Konva.Filters.Grayscale]); * node.filters([Konva.Filters.Grayscale]);
*/ */
Konva.Filters.Grayscale = function(imageData) { Konva.Filters.Grayscale = function(imageData) {
var data = imageData.data, var data = imageData.data,
len = data.length, len = data.length,
i, brightness; i, brightness;
for(i = 0; i < len; i += 4) { for(i = 0; i < len; i += 4) {
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red // red
data[i] = brightness; data[i] = brightness;
// green // green
data[i + 1] = brightness; data[i + 1] = brightness;
// blue // blue
data[i + 2] = brightness; data[i + 2] = brightness;
} }
}; };
})(); })();
(function() { (function() {
'use strict'; 'use strict';
@@ -4634,32 +4634,32 @@
})(); })();
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Invert Filter * Invert Filter
* @function * @function
* @memberof Konva.Filters * @memberof Konva.Filters
* @param {Object} imageData * @param {Object} imageData
* @example * @example
* node.cache(); * node.cache();
* node.filters([Konva.Filters.Invert]); * node.filters([Konva.Filters.Invert]);
*/ */
Konva.Filters.Invert = function(imageData) { Konva.Filters.Invert = function(imageData) {
var data = imageData.data, var data = imageData.data,
len = data.length, len = data.length,
i; i;
for(i = 0; i < len; i += 4) { for(i = 0; i < len; i += 4) {
// red // red
data[i] = 255 - data[i]; data[i] = 255 - data[i];
// green // green
data[i + 1] = 255 - data[i + 1]; data[i + 1] = 255 - data[i + 1];
// blue // blue
data[i + 2] = 255 - data[i + 2]; data[i + 2] = 255 - data[i + 2];
} }
}; };
})(); })();
/* /*
the Gauss filter the Gauss filter
@@ -5944,181 +5944,181 @@
*/ */
})(); })();
(function () { (function () {
'use strict'; '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}
*/
})();
/*eslint-disable max-depth */ /**
(function () { * Noise Filter. Randomly adds or substracts to the color channels
'use strict'; * @function
/** * @name Noise
* Pixelate Filter. Averages groups of pixels and redraws * @memberof Konva.Filters
* them as larger pixels * @param {Object} imageData
* @function * @author ippo615
* @name Pixelate * @example
* @memberof Konva.Filters * node.cache();
* @param {Object} imageData * node.filters([Konva.Filters.Noise]);
* @author ippo615 * node.noise(0.8);
* @example */
* node.cache(); Konva.Filters.Noise = function (imageData) {
* node.filters([Konva.Filters.Pixelate]); var amount = this.noise() * 255,
* node.pixelSize(10); data = imageData.data,
*/ nPixels = data.length,
half = amount / 2,
Konva.Filters.Pixelate = function (imageData) { i;
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 () { for (i = 0; i < nPixels; i += 4) {
'use strict'; data[i + 0] += half - 2 * half * Math.random();
/** data[i + 1] += half - 2 * half * Math.random();
* Threshold Filter. Pushes any value above the mid point to data[i + 2] += half - 2 * half * Math.random();
* the max and any value below the mid point to the min. }
* This affects the alpha channel. };
* @function
* @name Threshold Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter);
* @memberof Konva.Filters
* @param {Object} imageData /**
* @author ippo615 * get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
* @example * @name noise
* node.cache(); * @method
* node.filters([Konva.Filters.Threshold]); * @memberof Konva.Node.prototype
* node.threshold(0.1); * @param {Number} noise
*/ * @returns {Number}
*/
Konva.Filters.Threshold = function (imageData) { })();
var level = this.threshold() * 255,
data = imageData.data, /*eslint-disable max-depth */
len = data.length, (function () {
i; 'use strict';
/**
for (i = 0; i < len; i += 1) { * Pixelate Filter. Averages groups of pixels and redraws
data[i] = data[i] < level ? 0 : 255; * them as larger pixels
} * @function
}; * @name Pixelate
* @memberof Konva.Filters
Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter); * @param {Object} imageData
* @author ippo615
/** * @example
* get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter. * node.cache();
* @name threshold * node.filters([Konva.Filters.Pixelate]);
* @method * node.pixelSize(10);
* @memberof Konva.Node.prototype */
* @param {Number} threshold
* @returns {Number} 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() { (function() {
'use strict'; 'use strict';
@@ -8657,10 +8657,20 @@
* @memberof Konva.Stage.prototype * @memberof Konva.Stage.prototype
* @param {DomElement} container can pass in a dom element or id string * @param {DomElement} container can pass in a dom element or id string
*/ */
setContainer: function(container) { setContainer: function (container) {
if( typeof container === STRING) { if (typeof container === STRING) {
var id = container; if (container.charAt(0) === '.') {
container = Konva.document.getElementById(container); var className = container.slice(1);
container = Konva.document.getElementsByClassName(className)[0];
} else {
var id;
if (container.charAt(0) !== '#') {
id = container;
} else {
id = container.slice(1);
}
container = Konva.document.getElementById(id);
}
if (!container) { if (!container) {
throw 'Can not find container in document with id ' + id; throw 'Can not find container in document with id ' + id;
} }

18
src/Stage.js
View File

@@ -95,10 +95,20 @@
* @memberof Konva.Stage.prototype * @memberof Konva.Stage.prototype
* @param {DomElement} container can pass in a dom element or id string * @param {DomElement} container can pass in a dom element or id string
*/ */
setContainer: function(container) { setContainer: function (container) {
if( typeof container === STRING) { if (typeof container === STRING) {
var id = container; if (container.charAt(0) === '.') {
container = Konva.document.getElementById(container); var className = container.slice(1);
container = Konva.document.getElementsByClassName(className)[0];
} else {
var id;
if (container.charAt(0) !== '#') {
id = container;
} else {
id = container.slice(1);
}
container = Konva.document.getElementById(id);
}
if (!container) { if (!container) {
throw 'Can not find container in document with id ' + id; throw 'Can not find container in document with id ' + id;
} }