From 29a48662b48c21cce2d4e552888e98f65c2c0ea5 Mon Sep 17 00:00:00 2001 From: "ningyi.zny" Date: Fri, 26 Feb 2016 22:21:49 +0800 Subject: [PATCH] container selector --- konva.js | 472 ++++++++++++++++++++++++++------------------------- src/Stage.js | 18 +- 2 files changed, 255 insertions(+), 235 deletions(-) diff --git a/konva.js b/konva.js index a12f1c40..d9a5b6f1 100644 --- a/konva.js +++ b/konva.js @@ -3,7 +3,7 @@ * Konva JavaScript Framework v0.11.1 * http://konvajs.github.io/ * 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) * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva) @@ -4565,33 +4565,33 @@ 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'; @@ -4634,32 +4634,32 @@ })(); -(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 @@ -5944,181 +5944,181 @@ */ })(); -(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} - */ -})(); +(function () { + 'use strict'; -/*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} - */ -})(); + /** + * 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; -(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} - */ -})(); + 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'; @@ -8657,10 +8657,20 @@ * @memberof Konva.Stage.prototype * @param {DomElement} container can pass in a dom element or id string */ - setContainer: function(container) { - if( typeof container === STRING) { - var id = container; - container = Konva.document.getElementById(container); + setContainer: function (container) { + if (typeof container === STRING) { + if (container.charAt(0) === '.') { + 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) { throw 'Can not find container in document with id ' + id; } diff --git a/src/Stage.js b/src/Stage.js index 34b5c87d..816aa5f0 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -95,10 +95,20 @@ * @memberof Konva.Stage.prototype * @param {DomElement} container can pass in a dom element or id string */ - setContainer: function(container) { - if( typeof container === STRING) { - var id = container; - container = Konva.document.getElementById(container); + setContainer: function (container) { + if (typeof container === STRING) { + if (container.charAt(0) === '.') { + 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) { throw 'Can not find container in document with id ' + id; }