lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

only lint errors fixes

Browse Source
This commit is contained in:
Лаврёнов Антон
2014-02-27 08:49:18 +08:00
parent 2757842935
commit eb16e29197
41 changed files with 1232 additions and 1195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
.jshintrc
View File

@@ -1,6 +1,5 @@
{
"curly": true,
"eqeqeq": true,
"curly": true,
"immed": true,
"latedef": true,
"newcap": true,
@@ -9,13 +8,21 @@
"undef": true,
"boss": true,
"eqnull": true,
"node": true,
"indent": 4,
"node": true,
"latedef": true,
"quotmark": "single",
"unused": true,
"trailing" : true,
"laxbreak" : true,
"globals": {
"Kinetic": false,
"document": false
"document": false,
"window" : false,
"navigator" : false,
"define" : false,
"Image" : false,
"assert" : false,
"test": false,
"addStage" : false
}
}

79
Gruntfile.js
View File

@@ -1,18 +1,18 @@
module.exports = function(grunt) {
var sourceFiles = [
// core
'src/Global.js',
'src/Util.js',
'src/Global.js',
'src/Util.js',
'src/Canvas.js',
'src/Context.js',
'src/Factory.js',
'src/Node.js',
'src/Node.js',
// filters
'src/filters/Grayscale.js',
'src/filters/Brighten.js',
'src/filters/Invert.js',
'src/filters/Blur.js',
'src/filters/Grayscale.js',
'src/filters/Brighten.js',
'src/filters/Invert.js',
'src/filters/Blur.js',
'src/filters/Mask.js',
'src/filters/RGB.js',
'src/filters/HSV.js',
@@ -28,36 +28,37 @@ module.exports = function(grunt) {
'src/filters/Kaleidoscope.js',
// core
'src/Animation.js',
'src/Tween.js',
'src/DragAndDrop.js',
'src/Container.js',
'src/Shape.js',
'src/Stage.js',
'src/Layer.js',
'src/Animation.js',
'src/Tween.js',
'src/DragAndDrop.js',
'src/Container.js',
'src/Shape.js',
'src/Stage.js',
'src/Layer.js',
'src/Group.js',
// shapes
'src/shapes/Rect.js',
'src/shapes/Circle.js',
'src/shapes/Rect.js',
'src/shapes/Circle.js',
'src/shapes/Ellipse.js',
'src/shapes/Ring.js',
'src/shapes/Wedge.js',
'src/shapes/Wedge.js',
'src/shapes/Arc.js',
'src/shapes/Image.js',
'src/shapes/Text.js',
'src/shapes/Line.js',
'src/shapes/Image.js',
'src/shapes/Text.js',
'src/shapes/Line.js',
'src/shapes/Sprite.js',
// plugins
'src/plugins/Path.js',
'src/plugins/TextPath.js',
'src/plugins/RegularPolygon.js',
'src/plugins/Star.js',
'src/plugins/Path.js',
'src/plugins/TextPath.js',
'src/plugins/RegularPolygon.js',
'src/plugins/Star.js',
'src/plugins/Label.js'
];
// Project configuration.
var lintConf = grunt.file.readJSON('.jshintrc');
var config = {
pkg: grunt.file.readJSON('package.json'),
concat: {
@@ -91,7 +92,7 @@ module.exports = function(grunt) {
},
files: [{
src: ['dist/kinetic-dev.js'],
src: ['dist/kinetic-dev.js'],
dest: 'dist/kinetic-dev.js'
}]
},
@@ -108,7 +109,7 @@ module.exports = function(grunt) {
},
files: [{
src: ['dist/kinetic-v<%= pkg.version %>-beta.js'],
src: ['dist/kinetic-v<%= pkg.version %>-beta.js'],
dest: 'dist/kinetic-v<%= pkg.version %>-beta.js'
}]
},
@@ -125,7 +126,7 @@ module.exports = function(grunt) {
},
files: [{
src: ['dist/kinetic-v<%= pkg.version %>.js'],
src: ['dist/kinetic-v<%= pkg.version %>.js'],
dest: 'dist/kinetic-v<%= pkg.version %>.js'
}]
},
@@ -137,7 +138,7 @@ module.exports = function(grunt) {
prefix: '@@'
},
files: [{
src: ['dist/kinetic-Global-v<%= pkg.version %>.min.js'],
src: ['dist/kinetic-Global-v<%= pkg.version %>.min.js'],
dest: 'dist/kinetic-Global-v<%= pkg.version %>.min.js'
}]
},
@@ -149,7 +150,7 @@ module.exports = function(grunt) {
prefix: '@@'
},
files: [{
src: ['dist/kinetic-v<%= pkg.version %>.min.js'],
src: ['dist/kinetic-v<%= pkg.version %>.min.js'],
dest: 'dist/kinetic-v<%= pkg.version %>.min.js'
}]
},
@@ -161,7 +162,7 @@ module.exports = function(grunt) {
prefix: '@@'
},
files: [{
src: ['bower-template.json'],
src: ['bower-template.json'],
dest: 'bower.json'
}]
}
@@ -180,9 +181,7 @@ module.exports = function(grunt) {
build: ['dist/*']
},
jshint: {
options: {
laxbreak: true
},
options: lintConf,
all: ['src/**/*.js']
},
copy: {
@@ -222,14 +221,14 @@ module.exports = function(grunt) {
grunt.registerTask('dev', ['clean', 'concat:dev', 'replace:dev']);
grunt.registerTask('beta', ['clean', 'concat:beta', 'replace:beta']);
grunt.registerTask('full', [
'clean',
'concat:prod',
'uglify',
'replace:prod1',
'replace:prod2',
'replace:prod3',
'clean',
'concat:prod',
'uglify',
'replace:prod1',
'replace:prod2',
'replace:prod3',
'replace:prod4',
'copy:prod1',
'copy:prod1',
'copy:prod2'
]);
grunt.registerTask('hint', ['clean', 'concat:dev', 'replace:dev', 'jshint']);

30
src/Animation.js
View File

@@ -2,16 +2,16 @@
var BATCH_DRAW_STOP_TIME_DIFF = 500;
var now =(function() {
if (window.performance && window.performance.now) {
return function() {
return window.performance.now();
if (window.performance && window.performance.now) {
return function() {
return window.performance.now();
};
}
else {
return function() {
return new Date().getTime();
};
}
}
else {
return function() {
return new Date().getTime();
}
}
})();
var RAF = (function() {
@@ -134,7 +134,7 @@
* @memberof Kinetic.Animation.prototype
*/
isRunning: function() {
var a = Kinetic.Animation,
var a = Kinetic.Animation,
animations = a.animations,
len = animations.length,
n;
@@ -182,8 +182,8 @@
this._handleAnimation();
};
Kinetic.Animation._removeAnimation = function(anim) {
var id = anim.id,
animations = this.animations,
var id = anim.id,
animations = this.animations,
len = animations.length,
n;
@@ -270,9 +270,9 @@
if (!this.batchAnim) {
this.batchAnim = new Anim(function() {
if (that.lastBatchDrawTime && now() - that.lastBatchDrawTime > BATCH_DRAW_STOP_TIME_DIFF) {
that.batchAnim.stop();
}
if (that.lastBatchDrawTime && now() - that.lastBatchDrawTime > BATCH_DRAW_STOP_TIME_DIFF) {
that.batchAnim.stop();
}
}, this);
}

2
src/Canvas.js
View File

@@ -7,7 +7,7 @@
|| context.mozBackingStorePixelRatio
|| context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio
|| context.backingStorePixelRatio
|| context.backingStorePixelRatio
|| 1,
_pixelRatio = devicePixelRatio / backingStoreRatio;

4
src/Container.js
View File

@@ -291,7 +291,7 @@
context.beginPath();
context.rect(clipX, clipY, clipWidth, clipHeight);
context.clip();
context.reset();
context.reset();
}
this.children.each(function(child) {
@@ -398,5 +398,5 @@
* container.clipHeight(100);
*/
Kinetic.Collection.mapMethods(Kinetic.Container);
Kinetic.Collection.mapMethods(Kinetic.Container);
})();

55
src/Context.js
View File

@@ -6,38 +6,38 @@
CLOSE_BRACKET_PAREN = '])',
SEMICOLON = ';',
DOUBLE_PAREN = '()',
EMPTY_STRING = '',
// EMPTY_STRING = '',
EQUALS = '=',
SET = 'set',
// SET = 'set',
CONTEXT_METHODS = [
'arc',
'arcTo',
'beginPath',
'bezierCurveTo',
'clearRect',
'clearRect',
'clip',
'closePath',
'createLinearGradient',
'createPattern',
'createRadialGradient',
'drawImage',
'fill',
'fillText',
'fill',
'fillText',
'getImageData',
'createImageData',
'lineTo',
'moveTo',
'putImageData',
'quadraticCurveTo',
'rect',
'restore',
'rect',
'restore',
'rotate',
'save',
'save',
'scale',
'setLineDash',
'setTransform',
'stroke',
'strokeText',
'setTransform',
'stroke',
'strokeText',
'transform',
'translate'
];
@@ -124,7 +124,7 @@
str += method;
if (relaxed) {
str += DOUBLE_PAREN;
}
}
else {
if (Kinetic.Util._isArray(args[0])) {
str += OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;
@@ -139,7 +139,7 @@
str += trace.property;
if (!relaxed) {
str += EQUALS + trace.val;
}
}
}
str += SEMICOLON;
@@ -195,8 +195,7 @@
* @param {Number} [bounds.height]
*/
clear: function(bounds) {
var canvas = this.getCanvas(),
pos, size;
var canvas = this.getCanvas();
if (bounds) {
this.clearRect(bounds.x || 0, bounds.y || 0, bounds.width || 0, bounds.height || 0);
@@ -234,7 +233,7 @@
else if (transformsEnabled === 'position') {
// best performance for position only transforms
this.translate(shape.getX(), shape.getY());
}
}
},
setAttr: function(attr, val) {
this._context[attr] = val;
@@ -387,9 +386,8 @@
origSetter = this.setAttr,
n, args;
// methods
for (n=0; n<len; n++) {
(function(methodName) {
// to prevent creating scope function at each loop
var func = function(methodName) {
var origMethod = that[methodName],
ret;
@@ -404,7 +402,10 @@
return ret;
};
})(CONTEXT_METHODS[n]);
};
// methods
for (n=0; n<len; n++) {
func(CONTEXT_METHODS[n]);
}
// attrs
@@ -424,10 +425,10 @@
Kinetic.SceneContext.prototype = {
_fillColor: function(shape) {
var fill = shape.fill()
var fill = shape.fill()
|| Kinetic.Util._getRGBAString({
red: shape.fillRed(),
green: shape.fillGreen(),
red: shape.fillRed(),
green: shape.fillGreen(),
blue: shape.fillBlue(),
alpha: shape.fillAlpha()
});
@@ -480,7 +481,7 @@
end = shape.getFillRadialGradientEndPoint(),
startRadius = shape.getFillRadialGradientStartRadius(),
endRadius = shape.getFillRadialGradientEndRadius(),
colorStops = shape.getFillRadialGradientColorStops(),
colorStops = shape.getFillRadialGradientColorStops(),
grd = this.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
// build color stops
@@ -540,10 +541,10 @@
}
this.setAttr('lineWidth', shape.strokeWidth());
this.setAttr('strokeStyle', shape.stroke()
this.setAttr('strokeStyle', shape.stroke()
|| Kinetic.Util._getRGBAString({
red: shape.strokeRed(),
green: shape.strokeGreen(),
red: shape.strokeRed(),
green: shape.strokeGreen(),
blue: shape.strokeBlue(),
alpha: shape.strokeAlpha()
}));

4
src/DragAndDrop.js
View File

@@ -32,7 +32,7 @@
nodeType, layer;
if(node) {
nodeType = node.nodeType,
nodeType = node.nodeType;
layer = node.getLayer();
dd.anim.stop();
@@ -58,7 +58,7 @@
var dragEndNode = evt.dragEndNode;
if (evt && dragEndNode) {
dragEndNode.fire('dragend', evt, true);
dragEndNode.fire('dragend', evt, true);
}
}
};

17
src/Factory.js
View File

@@ -1,3 +1,4 @@
/*jshint unused:false */
(function() {
// CONSTANTS
var ABSOLUTE_OPACITY = 'absoluteOpacity',
@@ -48,8 +49,7 @@
this.addOverloadedGetterSetter(constructor, attr);
},
addGetter: function(constructor, attr, def) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
var method = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function() {
var val = this.attrs[attr];
@@ -70,13 +70,13 @@
after.call(this);
}
return this;
return this;
};
},
addComponentsGetterSetter: function(constructor, attr, components, validator, after) {
var len = components.length,
capitalize = Kinetic.Util._capitalize,
getter = GET + capitalize(attr),
getter = GET + capitalize(attr),
setter = SET + capitalize(attr),
n, component;
@@ -102,7 +102,7 @@
}
for (key in val) {
this._setAttr(attr + capitalize(key), val[key]);
this._setAttr(attr + capitalize(key), val[key]);
}
this._fireChangeEvent(attr, oldVal, val);
@@ -111,14 +111,13 @@
after.call(this);
}
return this;
return this;
};
this.addOverloadedGetterSetter(constructor, attr);
},
addOverloadedGetterSetter: function(constructor, attr) {
var that = this,
capitalizedAttr = Kinetic.Util._capitalize(attr),
var capitalizedAttr = Kinetic.Util._capitalize(attr),
setter = SET + capitalizedAttr,
getter = GET + capitalizedAttr;
@@ -132,7 +131,7 @@
else {
return this[getter]();
}
}
};
},
backCompat: function(constructor, methods) {
var key;

4
src/Global.js
View File

@@ -1,3 +1,4 @@
/*
* KineticJS JavaScript Framework v@@version
* http://www.kineticjs.com/
@@ -28,6 +29,7 @@
/**
* @namespace Kinetic
*/
/*jshint -W079, -W020*/
var Kinetic = {};
(function() {
Kinetic = {
@@ -57,7 +59,7 @@ var Kinetic = {};
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[];
return {

6
src/Layer.js
View File

@@ -252,8 +252,8 @@
return this;
},
remove: function() {
var stage = this.getStage(),
canvas = this.getCanvas(),
var stage = this.getStage(),
canvas = this.getCanvas(),
_canvas = canvas._canvas;
Kinetic.Node.prototype.remove.call(this);
@@ -333,5 +333,5 @@
* layer.hitGraphEnabled(true);
*/
Kinetic.Collection.mapMethods(Kinetic.Layer);
Kinetic.Collection.mapMethods(Kinetic.Layer);
})();

10
src/Node.js
View File

@@ -66,7 +66,7 @@
delete this._cache[attr];
}
else {
this._cache = {};
this._cache = {};
}
},
_getCache: function(attr, privateGetter){
@@ -77,7 +77,7 @@
this._cache[attr] = privateGetter.call(this);
}
return this._cache[attr];
return this._cache[attr];
},
/*
* when the logic for a cached result depends on ancestor propagation, use this
@@ -252,8 +252,8 @@
context.save();
context._applyTransform(this);
context.drawImage(hitCanvas._canvas, 0, 0);
context.restore();
context.drawImage(hitCanvas._canvas, 0, 0);
context.restore();
},
/**
* bind events to the node. KineticJS supports mouseover, mousemove,
@@ -1091,7 +1091,7 @@
transformsEnabled = node.transformsEnabled();
trans = node.getTransform();
if (transformsEnabled === 'all') {
if (transformsEnabled === 'all') {
at.multiply(trans);
}
else if (transformsEnabled === 'position') {

14
src/Shape.js
View File

@@ -76,7 +76,7 @@
* @returns {Boolean}
*/
hasShadow: function() {
return this._getCache(HAS_SHADOW, this._hasShadow);
return this._getCache(HAS_SHADOW, this._hasShadow);
},
_hasShadow: function() {
return this.getShadowEnabled() && (this.getShadowOpacity() !== 0 && !!(this.getShadowColor() || this.getShadowBlur() || this.getShadowOffsetX() || this.getShadowOffsetY()));
@@ -140,7 +140,7 @@
hasShadow = this.hasShadow(),
stage, bufferCanvas, bufferContext;
if(this.isVisible()) {
if(this.isVisible()) {
if (cachedCanvas) {
this._drawCachedSceneCanvas(context);
}
@@ -162,7 +162,7 @@
if (hasShadow) {
context.save();
context._applyShadow(this);
context.drawImage(bufferCanvas._canvas, 0, 0);
context.drawImage(bufferCanvas._canvas, 0, 0);
context.restore();
}
@@ -179,12 +179,12 @@
context._applyShadow(this);
drawFunc.call(this, context);
context.restore();
}
}
context._applyOpacity(this);
drawFunc.call(this, context);
}
context.restore();
}
context.restore();
}
}
@@ -207,7 +207,7 @@
context._applyLineJoin(this);
context._applyTransform(this);
drawFunc.call(this, context);
drawFunc.call(this, context);
context.restore();
}

58
src/Stage.js
View File

@@ -1,3 +1,4 @@
/*jshint unused:false */
(function() {
// CONSTANTS
var STAGE = 'Stage',
@@ -48,9 +49,9 @@
eventsLength = EVENTS.length;
function addEvent(ctx, eventName) {
ctx.content.addEventListener(eventName, function(evt) {
ctx[UNDERSCORE + eventName](evt);
}, false);
ctx.content.addEventListener(eventName, function(evt) {
ctx[UNDERSCORE + eventName](evt);
}, false);
}
Kinetic.Util.addMethods(Kinetic.Stage, {
@@ -274,7 +275,7 @@
shape = layers[n].getIntersection(pos);
if (shape) {
return shape;
}
}
}
return null;
@@ -336,11 +337,8 @@
return this.getChildren();
},
_bindContentEvents: function() {
var that = this,
n;
for (n = 0; n < eventsLength; n++) {
addEvent(this, EVENTS[n]);
for (var n = 0; n < eventsLength; n++) {
addEvent(this, EVENTS[n]);
}
},
_mouseover: function(evt) {
@@ -383,11 +381,11 @@
* to run mouseout from previous target shape
*/
else {
if(this.targetShape && !Kinetic.isDragging()) {
this.targetShape._fireAndBubble(MOUSEOUT, evt);
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null;
}
if(this.targetShape && !Kinetic.isDragging()) {
this.targetShape._fireAndBubble(MOUSEOUT, evt);
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null;
}
}
@@ -426,8 +424,7 @@
},
_mouseup: function(evt) {
this._setPointerPosition(evt);
var that = this,
shape = this.getIntersection(this.getPointerPosition()),
var shape = this.getIntersection(this.getPointerPosition()),
clickStartShape = this.clickStartShape,
fireDblClick = false;
@@ -492,21 +489,20 @@
},
_touchend: function(evt) {
this._setPointerPosition(evt);
var that = this,
shape = this.getIntersection(this.getPointerPosition());
var shape = this.getIntersection(this.getPointerPosition()),
fireDblClick = false;
if(Kinetic.inDblClickWindow) {
fireDblClick = true;
Kinetic.inDblClickWindow = false;
}
else {
Kinetic.inDblClickWindow = true;
}
if(Kinetic.inDblClickWindow) {
fireDblClick = true;
Kinetic.inDblClickWindow = false;
}
else {
Kinetic.inDblClickWindow = true;
}
setTimeout(function() {
Kinetic.inDblClickWindow = false;
}, Kinetic.dblClickWindow);
setTimeout(function() {
Kinetic.inDblClickWindow = false;
}, Kinetic.dblClickWindow);
if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHEND, evt);
@@ -555,13 +551,13 @@
}
},
_setPointerPosition: function(evt) {
var evt = evt ? evt : window.event,
contentPosition = this._getContentPosition(),
var contentPosition = this._getContentPosition(),
offsetX = evt.offsetX,
clientX = evt.clientX,
x = null,
y = null,
touch;
evt = evt ? evt : window.event;
// touch events
if(evt.touches !== undefined) {
@@ -572,7 +568,7 @@
// get the information for finger #1
x = touch.clientX - contentPosition.left;
y = touch.clientY - contentPosition.top;
y = touch.clientY - contentPosition.top;
}
}
// mouse events

12
src/Tween.js
View File

@@ -41,7 +41,7 @@
duration = config.duration || 1,
easing = config.easing || Kinetic.Easings.Linear,
yoyo = !!config.yoyo,
key, tween, start, tweenId;
key;
this.node = node;
this._id = idCounter++;
@@ -90,7 +90,7 @@
_addAttr: function(key, end) {
var node = this.node,
nodeId = node._id,
start, diff, tweenId, n, len, startVal, endVal;
start, diff, tweenId, n, len;
// remove conflict from tween map if it exists
tweenId = Kinetic.Tween.tweens[nodeId][key];
@@ -123,7 +123,7 @@
_tweenFunc: function(i) {
var node = this.node,
attrs = Kinetic.Tween.attrs[node._id][this._id],
key, attr, start, diff, newVal, n, len, startVal, diffVal;
key, attr, start, diff, newVal, n, len;
for (key in attrs) {
attr = attrs[key];
@@ -390,7 +390,7 @@
* @function
* @memberof Kinetic.Easings
*/
'BackEaseIn': function(t, b, c, d, a, p) {
'BackEaseIn': function(t, b, c, d) {
var s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
@@ -399,7 +399,7 @@
* @function
* @memberof Kinetic.Easings
*/
'BackEaseOut': function(t, b, c, d, a, p) {
'BackEaseOut': function(t, b, c, d) {
var s = 1.70158;
return c * (( t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
@@ -408,7 +408,7 @@
* @function
* @memberof Kinetic.Easings
*/
'BackEaseInOut': function(t, b, c, d, a, p) {
'BackEaseInOut': function(t, b, c, d) {
var s = 1.70158;
if((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;

116
src/Util.js
View File

@@ -64,25 +64,25 @@
return collection;
};
// map one method by it's name
Kinetic.Collection._mapMethod = function(methodName) {
Kinetic.Collection.prototype[methodName] = function() {
var len = this.length,
i;
var args = [].slice.call(arguments);
for(i = 0; i < len; i++) {
this[i][methodName].apply(this[i], args);
}
return this;
};
};
Kinetic.Collection.mapMethods = function(constructor) {
var prot = constructor.prototype,
key;
for(key in prot) {
// induce scope
(function(methodName) {
Kinetic.Collection.prototype[methodName] = function() {
var len = this.length,
i;
args = [].slice.call(arguments);
for(i = 0; i < len; i++) {
this[i][methodName].apply(this[i], args);
}
return this;
};
})(key);
var prot = constructor.prototype;
for(var methodName in prot) {
Kinetic.Collection._mapMethod(methodName);
}
};
@@ -182,7 +182,7 @@
this.m[1] = m12;
this.m[2] = m21;
this.m[3] = m22;
},
},
/**
* Transform multiplication
* @method
@@ -365,7 +365,7 @@
* arg can be an image object or image data
*/
_getImage: function(arg, callback) {
var imageObj, canvas, context, dataUrl;
var imageObj, canvas;
// if arg is null or undefined
if(!arg) {
@@ -391,7 +391,7 @@
canvas = document.createElement(CANVAS);
canvas.width = arg.width;
canvas.height = arg.height;
_context = canvas.getContext(CONTEXT_2D);
var _context = canvas.getContext(CONTEXT_2D);
_context.putImageData(arg, 0, 0);
this._getImage(canvas.toDataURL(), callback);
}
@@ -437,7 +437,7 @@
getRandomColor: function() {
var randColor = (Math.random() * 0xFFFFFF << 0).toString(16);
while (randColor.length < 6) {
randColor = ZERO + randColor;
randColor = ZERO + randColor;
}
return HASH + randColor;
},
@@ -466,37 +466,37 @@
* var rgb = Kinetic.Util.getRGB('rgb(0,0,255)');
*/
getRGB: function(color) {
var rgb;
// color string
if (color in COLORS) {
rgb = COLORS[color];
return {
r: rgb[0],
g: rgb[1],
b: rgb[2]
};
}
// hex
else if (color[0] === HASH) {
return this._hexToRgb(color.substring(1));
}
// rgb string
else if (color.substr(0, 4) === RGB_PAREN) {
rgb = RGB_REGEX.exec(color.replace(/ /g,''));
return {
r: parseInt(rgb[1], 10),
g: parseInt(rgb[2], 10),
b: parseInt(rgb[3], 10)
};
}
// default
else {
return {
r: 0,
g: 0,
b: 0
};
}
var rgb;
// color string
if (color in COLORS) {
rgb = COLORS[color];
return {
r: rgb[0],
g: rgb[1],
b: rgb[2]
};
}
// hex
else if (color[0] === HASH) {
return this._hexToRgb(color.substring(1));
}
// rgb string
else if (color.substr(0, 4) === RGB_PAREN) {
rgb = RGB_REGEX.exec(color.replace(/ /g,''));
return {
r: parseInt(rgb[1], 10),
g: parseInt(rgb[2], 10),
b: parseInt(rgb[3], 10)
};
}
// default
else {
return {
r: 0,
g: 0,
b: 0
};
}
},
// o1 takes precedence over o2
_merge: function(o1, o2) {
@@ -562,13 +562,13 @@
* @param {Object} methods
*/
addMethods: function(constructor, methods) {
var key;
var key;
for (key in methods) {
constructor.prototype[key] = methods[key];
}
for (key in methods) {
constructor.prototype[key] = methods[key];
}
},
_getControlPoints: function(x0, y0, x1, y1, x2, y2, t) {
_getControlPoints: function(x0, y0, x1, y1, x2, y2, t) {
var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)),
d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
fa = t * d01 / (d01 + d12),

10
src/filters/Blur.js
View File

@@ -68,7 +68,8 @@
451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,
385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,
332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259
];
var shg_table = [
9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
@@ -86,7 +87,8 @@
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ];
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24
];
function filterGaussBlurRGBA( imageData, radius) {
@@ -114,7 +116,9 @@
for ( i = 1; i < div; i++ ) {
stack = stack.next = new BlurStack();
if ( i == radiusPlus1 ) stackEnd = stack;
if ( i == radiusPlus1 ){
stackEnd = stack;
}
}
stack.next = stackStart;

302
src/filters/Emboss.js
View File

@@ -1,169 +1,175 @@
(function () {
/**
* Emboss Filter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* Pixastic Lib - Emboss filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
*/
Kinetic.Filters.Emboss = function (imageData) {
/**
* Emboss Filter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* Pixastic Lib - Emboss filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
*/
Kinetic.Filters.Emboss = function (imageData) {
// pixastic strength is between 0 and 10. I want it between 0 and 1
// pixastic greyLevel is between 0 and 255. I want it between 0 and 1. Also,
// a max value of greyLevel yields a white emboss, and the min value yields a black
// emboss. Therefore, I changed greyLevel to whiteLevel
var strength = this.embossStrength() * 10,
greyLevel = this.embossWhiteLevel() * 255,
direction = this.embossDirection(),
blend = this.embossBlend(),
dirY = 0,
dirX = 0,
data = imageData.data,
invertAlpha = false,
w = imageData.width,
h = imageData.height,
w4 = w*4,
y = h;
// pixastic strength is between 0 and 10. I want it between 0 and 1
// pixastic greyLevel is between 0 and 255. I want it between 0 and 1. Also,
// a max value of greyLevel yields a white emboss, and the min value yields a black
// emboss. Therefore, I changed greyLevel to whiteLevel
var strength = this.embossStrength() * 10,
greyLevel = this.embossWhiteLevel() * 255,
direction = this.embossDirection(),
blend = this.embossBlend(),
dirY = 0,
dirX = 0,
data = imageData.data,
w = imageData.width,
h = imageData.height,
w4 = w*4,
y = h;
switch (direction) {
case 'top-left':
dirY = -1;
dirX = -1;
break;
case 'top':
dirY = -1;
dirX = 0;
break;
case 'top-right':
dirY = -1;
dirX = 1;
break;
case 'right':
dirY = 0;
dirX = 1;
break;
case 'bottom-right':
dirY = 1;
dirX = 1;
break;
case 'bottom':
dirY = 1;
dirX = 0;
break;
case 'bottom-left':
dirY = 1;
dirX = -1;
break;
case 'left':
dirY = 0;
dirX = -1;
break;
}
switch (direction) {
case 'top-left':
dirY = -1;
dirX = -1;
break;
case 'top':
dirY = -1;
dirX = 0;
break;
case 'top-right':
dirY = -1;
dirX = 1;
break;
case 'right':
dirY = 0;
dirX = 1;
break;
case 'bottom-right':
dirY = 1;
dirX = 1;
break;
case 'bottom':
dirY = 1;
dirX = 0;
break;
case 'bottom-left':
dirY = 1;
dirX = -1;
break;
case 'left':
dirY = 0;
dirX = -1;
break;
}
do {
var offsetY = (y-1)*w4;
var otherY = dirY;
if (y + otherY < 1) otherY = 0;
if (y + otherY > h) otherY = 0;
var offsetYOther = (y-1+otherY)*w*4;
var x = w;
do {
var offset = offsetY + (x-1)*4;
var offsetY = (y-1)*w4;
var otherX = dirX;
if (x + otherX < 1) otherX = 0;
if (x + otherX > w) otherX = 0;
var offsetOther = offsetYOther + (x-1+otherX)*4;
var dR = data[offset] - data[offsetOther];
var dG = data[offset+1] - data[offsetOther+1];
var dB = data[offset+2] - data[offsetOther+2];
var dif = dR;
var absDif = dif > 0 ? dif : -dif;
var absG = dG > 0 ? dG : -dG;
var absB = dB > 0 ? dB : -dB;
if (absG > absDif) {
dif = dG;
var otherY = dirY;
if (y + otherY < 1){
otherY = 0;
}
if (absB > absDif) {
dif = dB;
if (y + otherY > h) {
otherY = 0;
}
dif *= strength;
var offsetYOther = (y-1+otherY)*w*4;
if (blend) {
var r = data[offset] + dif;
var g = data[offset+1] + dif;
var b = data[offset+2] + dif;
var x = w;
do {
var offset = offsetY + (x-1)*4;
data[offset] = (r > 255) ? 255 : (r < 0 ? 0 : r);
data[offset+1] = (g > 255) ? 255 : (g < 0 ? 0 : g);
data[offset+2] = (b > 255) ? 255 : (b < 0 ? 0 : b);
} else {
var grey = greyLevel - dif;
if (grey < 0) {
grey = 0;
} else if (grey > 255) {
grey = 255;
}
var otherX = dirX;
if (x + otherX < 1){
otherX = 0;
}
if (x + otherX > w) {
otherX = 0;
}
data[offset] = data[offset+1] = data[offset+2] = grey;
}
var offsetOther = offsetYOther + (x-1+otherX)*4;
} while (--x);
} while (--y);
};
var dR = data[offset] - data[offsetOther];
var dG = data[offset+1] - data[offsetOther+1];
var dB = data[offset+2] - data[offsetOther+2];
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossStrength', 0.5, null, Kinetic.Factory.afterSetFilter);
/**
* get/set emboss strength
* @name embossStrength
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} level between 0 and 1. Default is 0.5
* @returns {Number}
*/
var dif = dR;
var absDif = dif > 0 ? dif : -dif;
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossWhiteLevel', 0.5, null, Kinetic.Factory.afterSetFilter);
/**
* get/set emboss white level
* @name embossWhiteLevel
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} embossWhiteLevel between 0 and 1. Default is 0.5
* @returns {Number}
*/
var absG = dG > 0 ? dG : -dG;
var absB = dB > 0 ? dB : -dB;
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossDirection', 'top-left', null, Kinetic.Factory.afterSetFilter);
/**
* get/set emboss direction
* @name embossDirection
* @method
* @memberof Kinetic.Node.prototype
* @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
* The default is top-left
* @returns {String}
*/
if (absG > absDif) {
dif = dG;
}
if (absB > absDif) {
dif = dB;
}
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossBlend', false, null, Kinetic.Factory.afterSetFilter);
/**
* get/set emboss blend
* @name embossBlend
* @method
* @memberof Kinetic.Node.prototype
* @param {Boolean} embossBlend
* @returns {Boolean}
*/
dif *= strength;
if (blend) {
var r = data[offset] + dif;
var g = data[offset+1] + dif;
var b = data[offset+2] + dif;
data[offset] = (r > 255) ? 255 : (r < 0 ? 0 : r);
data[offset+1] = (g > 255) ? 255 : (g < 0 ? 0 : g);
data[offset+2] = (b > 255) ? 255 : (b < 0 ? 0 : b);
} else {
var grey = greyLevel - dif;
if (grey < 0) {
grey = 0;
} else if (grey > 255) {
grey = 255;
}
data[offset] = data[offset+1] = data[offset+2] = grey;
}
} while (--x);
} while (--y);
};
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossStrength', 0.5, null, Kinetic.Factory.afterSetFilter);
/**
* get/set emboss strength
* @name embossStrength
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} level between 0 and 1. Default is 0.5
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossWhiteLevel', 0.5, null, Kinetic.Factory.afterSetFilter);
/**
* get/set emboss white level
* @name embossWhiteLevel
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} embossWhiteLevel between 0 and 1. Default is 0.5
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossDirection', 'top-left', null, Kinetic.Factory.afterSetFilter);
/**
* get/set emboss direction
* @name embossDirection
* @method
* @memberof Kinetic.Node.prototype
* @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
* The default is top-left
* @returns {String}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossBlend', false, null, Kinetic.Factory.afterSetFilter);
/**
* get/set emboss blend
* @name embossBlend
* @method
* @memberof Kinetic.Node.prototype
* @param {Boolean} embossBlend
* @returns {Boolean}
*/
})();

192
src/filters/Enhance.js
View File

@@ -1,111 +1,111 @@
(function () {
function remap(fromValue, fromMin, fromMax, toMin, toMax) {
// Compute the range of the data
var fromRange = fromMax - fromMin,
toRange = toMax - toMin,
toValue;
function remap(fromValue, fromMin, fromMax, toMin, toMax) {
// Compute the range of the data
var fromRange = fromMax - fromMin,
toRange = toMax - toMin,
toValue;
// If either range is 0, then the value can only be mapped to 1 value
if (fromRange === 0) {
return toMin + toRange / 2;
}
if (toRange === 0) {
return toMin;
// If either range is 0, then the value can only be mapped to 1 value
if (fromRange === 0) {
return toMin + toRange / 2;
}
if (toRange === 0) {
return toMin;
}
// (1) untranslate, (2) unscale, (3) rescale, (4) retranslate
toValue = (fromValue - fromMin) / fromRange;
toValue = (toRange * toValue) + toMin;
return toValue;
}
// (1) untranslate, (2) unscale, (3) rescale, (4) retranslate
toValue = (fromValue - fromMin) / fromRange;
toValue = (toRange * toValue) + toMin;
return toValue;
}
/**
* Enhance Filter. Adjusts the colors so that they span the widest
* possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
* writes.
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.Enhance = function (imageData) {
var data = imageData.data,
nSubPixels = data.length,
rMin = data[0], rMax = rMin, r,
gMin = data[1], gMax = gMin, g,
bMin = data[2], bMax = bMin, b,
aMin = data[3], aMax = aMin,
i;
// If we are not enhancing anything - don't do any computation
var enhanceAmount = this.enhance();
if( enhanceAmount === 0 ){ return; }
/**
* Enhance Filter. Adjusts the colors so that they span the widest
* possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
* writes.
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.Enhance = function (imageData) {
var data = imageData.data,
nSubPixels = data.length,
rMin = data[0], rMax = rMin, r,
gMin = data[1], gMax = gMin, g,
bMin = data[2], bMax = bMin, b,
aMin = data[3], aMax = aMin, a,
i;
// 1st Pass - find the min and max for each channel:
for (i = 0; i < nSubPixels; i += 4) {
r = data[i + 0];
if (r < rMin) { rMin = r; }
else if (r > rMax) { rMax = r; }
g = data[i + 1];
if (g < gMin) { gMin = g; } else
if (g > gMax) { gMax = g; }
b = data[i + 2];
if (b < bMin) { bMin = b; } else
if (b > bMax) { bMax = b; }
//a = data[i + 3];
//if (a < aMin) { aMin = a; } else
//if (a > aMax) { aMax = a; }
}
// If we are not enhancing anything - don't do any computation
var enhanceAmount = this.enhance();
if( enhanceAmount === 0 ){ return; }
// If there is only 1 level - don't remap
if( rMax === rMin ){ rMax = 255; rMin = 0; }
if( gMax === gMin ){ gMax = 255; gMin = 0; }
if( bMax === bMin ){ bMax = 255; bMin = 0; }
if( aMax === aMin ){ aMax = 255; aMin = 0; }
// 1st Pass - find the min and max for each channel:
for (i = 0; i < nSubPixels; i += 4) {
r = data[i + 0];
if (r < rMin) { rMin = r; } else
if (r > rMax) { rMax = r; }
g = data[i + 1];
if (g < gMin) { gMin = g; } else
if (g > gMax) { gMax = g; }
b = data[i + 2];
if (b < bMin) { bMin = b; } else
if (b > bMax) { bMax = b; }
//a = data[i + 3];
//if (a < aMin) { aMin = a; } else
//if (a > aMax) { aMax = a; }
}
var rMid, rGoalMax,rGoalMin,
gMid, gGoalMax,gGoalMin,
bMid, bGoalMax,aGoalMin,
aMid, aGoalMax,bGoalMin;
// If there is only 1 level - don't remap
if( rMax === rMin ){ rMax = 255; rMin = 0; }
if( gMax === gMin ){ gMax = 255; gMin = 0; }
if( bMax === bMin ){ bMax = 255; bMin = 0; }
if( aMax === aMin ){ aMax = 255; aMin = 0; }
// If the enhancement is positive - stretch the histogram
if ( enhanceAmount > 0 ){
rGoalMax = rMax + enhanceAmount*(255-rMax);
rGoalMin = rMin - enhanceAmount*(rMin-0);
gGoalMax = gMax + enhanceAmount*(255-gMax);
gGoalMin = gMin - enhanceAmount*(gMin-0);
bGoalMax = bMax + enhanceAmount*(255-bMax);
bGoalMin = bMin - enhanceAmount*(bMin-0);
aGoalMax = aMax + enhanceAmount*(255-aMax);
aGoalMin = aMin - enhanceAmount*(aMin-0);
// If the enhancement is negative - compress the histogram
} else {
rMid = (rMax + rMin)*0.5;
rGoalMax = rMax + enhanceAmount*(rMax-rMid);
rGoalMin = rMin + enhanceAmount*(rMin-rMid);
gMid = (gMax + gMin)*0.5;
gGoalMax = gMax + enhanceAmount*(gMax-gMid);
gGoalMin = gMin + enhanceAmount*(gMin-gMid);
bMid = (bMax + bMin)*0.5;
bGoalMax = bMax + enhanceAmount*(bMax-bMid);
bGoalMin = bMin + enhanceAmount*(bMin-bMid);
aMid = (aMax + aMin)*0.5;
aGoalMax = aMax + enhanceAmount*(aMax-aMid);
aGoalMin = aMin + enhanceAmount*(aMin-aMid);
}
var rMid, rGoalMax,rGoalMin,
gMid, gGoalMax,gGoalMin,
bMid, bGoalMax,aGoalMin,
aMid, aGoalMax,bGoalMin;
// Pass 2 - remap everything, except the alpha
for (i = 0; i < nSubPixels; i += 4) {
data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);
data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);
data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);
//data[i + 3] = remap(data[i + 3], aMin, aMax, aGoalMin, aGoalMax);
}
};
// If the enhancement is positive - stretch the histogram
if( enhanceAmount > 0 ){
rGoalMax = rMax + enhanceAmount*(255-rMax);
rGoalMin = rMin - enhanceAmount*(rMin-0);
gGoalMax = gMax + enhanceAmount*(255-gMax);
gGoalMin = gMin - enhanceAmount*(gMin-0);
bGoalMax = bMax + enhanceAmount*(255-bMax);
bGoalMin = bMin - enhanceAmount*(bMin-0);
aGoalMax = aMax + enhanceAmount*(255-aMax);
aGoalMin = aMin - enhanceAmount*(aMin-0);
// If the enhancement is negative - compress the histogram
}else{
rMid = (rMax + rMin)*0.5;
rGoalMax = rMax + enhanceAmount*(rMax-rMid);
rGoalMin = rMin + enhanceAmount*(rMin-rMid);
gMid = (gMax + gMin)*0.5;
gGoalMax = gMax + enhanceAmount*(gMax-gMid);
gGoalMin = gMin + enhanceAmount*(gMin-gMid);
bMid = (bMax + bMin)*0.5;
bGoalMax = bMax + enhanceAmount*(bMax-bMid);
bGoalMin = bMin + enhanceAmount*(bMin-bMid);
aMid = (aMax + aMin)*0.5;
aGoalMax = aMax + enhanceAmount*(aMax-aMid);
aGoalMin = aMin + enhanceAmount*(aMin-aMid);
}
// Pass 2 - remap everything, except the alpha
for (i = 0; i < nSubPixels; i += 4) {
data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);
data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);
data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);
//data[i + 3] = remap(data[i + 3], aMin, aMax, aGoalMin, aGoalMax);
}
};
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'enhance', 0, null, Kinetic.Factory.afterSetFilter);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'enhance', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set enhance

154
src/filters/HSL.js
View File

@@ -1,89 +1,89 @@
(function () {
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv hue in degrees
* @name hue
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} hue value between 0 and 359
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv hue in degrees
* @name hue
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} hue value between 0 and 359
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv saturation
* @name saturation
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv saturation
* @name saturation
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'luminance', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsl luminance
* @name value
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'luminance', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsl luminance
* @name value
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
* @returns {Number}
*/
/**
* HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
/**
* HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.HSL = function (imageData) {
var data = imageData.data,
nPixels = data.length,
v = 1,
s = Math.pow(2,this.saturation()),
h = Math.abs((this.hue()) + 360) % 360,
l = this.luminance()*127,
i;
Kinetic.Filters.HSL = function (imageData) {
var data = imageData.data,
nPixels = data.length,
v = 1,
s = Math.pow(2,this.saturation()),
h = Math.abs((this.hue()) + 360) % 360,
l = this.luminance()*127,
i;
// Basis for the technique used:
// http://beesbuzz.biz/code/hsv_color_transforms.php
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
// S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
// H is the hue shift in degrees (0 to 360)
// vsu = V*S*cos(H*PI/180);
// vsw = V*S*sin(H*PI/180);
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
// Basis for the technique used:
// http://beesbuzz.biz/code/hsv_color_transforms.php
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
// S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
// H is the hue shift in degrees (0 to 360)
// vsu = V*S*cos(H*PI/180);
// vsw = V*S*sin(H*PI/180);
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
// Precompute the values in the matrix:
var vsu = v*s*Math.cos(h*Math.PI/180),
vsw = v*s*Math.sin(h*Math.PI/180);
// (result spot)(source spot)
var rr = 0.299*v+0.701*vsu+0.167*vsw,
rg = 0.587*v-0.587*vsu+0.330*vsw,
rb = 0.114*v-0.114*vsu-0.497*vsw;
var gr = 0.299*v-0.299*vsu-0.328*vsw,
gg = 0.587*v+0.413*vsu+0.035*vsw,
gb = 0.114*v-0.114*vsu+0.293*vsw;
var br = 0.299*v-0.300*vsu+1.250*vsw,
bg = 0.587*v-0.586*vsu-1.050*vsw,
bb = 0.114*v+0.886*vsu-0.200*vsw;
// Precompute the values in the matrix:
var vsu = v*s*Math.cos(h*Math.PI/180),
vsw = v*s*Math.sin(h*Math.PI/180);
// (result spot)(source spot)
var rr = 0.299*v+0.701*vsu+0.167*vsw,
rg = 0.587*v-0.587*vsu+0.330*vsw,
rb = 0.114*v-0.114*vsu-0.497*vsw;
var gr = 0.299*v-0.299*vsu-0.328*vsw,
gg = 0.587*v+0.413*vsu+0.035*vsw,
gb = 0.114*v-0.114*vsu+0.293*vsw;
var br = 0.299*v-0.300*vsu+1.250*vsw,
bg = 0.587*v-0.586*vsu-1.050*vsw,
bb = 0.114*v+0.886*vsu-0.200*vsw;
var r,g,b,a;
var r,g,b,a;
for (i = 0; i < nPixels; i += 4) {
r = data[i+0];
g = data[i+1];
b = data[i+2];
a = data[i+3];
for (i = 0; i < nPixels; i += 4) {
r = data[i+0];
g = data[i+1];
b = data[i+2];
a = data[i+3];
data[i+0] = rr*r + rg*g + rb*b + l;
data[i+1] = gr*r + gg*g + gb*b + l;
data[i+2] = br*r + bg*g + bb*b + l;
data[i+3] = a; // alpha
}
};
data[i+0] = rr*r + rg*g + rb*b + l;
data[i+1] = gr*r + gg*g + gb*b + l;
data[i+2] = br*r + bg*g + bb*b + l;
data[i+3] = a; // alpha
}
};
})();

152
src/filters/HSV.js
View File

@@ -1,90 +1,90 @@
(function () {
/**
* HSV Filter. Adjusts the hue, saturation and value
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
/**
* HSV Filter. Adjusts the hue, saturation and value
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.HSV = function (imageData) {
var data = imageData.data,
nPixels = data.length,
v = Math.pow(2,this.value()),
s = Math.pow(2,this.saturation()),
h = Math.abs((this.hue()) + 360) % 360,
i;
Kinetic.Filters.HSV = function (imageData) {
var data = imageData.data,
nPixels = data.length,
v = Math.pow(2,this.value()),
s = Math.pow(2,this.saturation()),
h = Math.abs((this.hue()) + 360) % 360,
i;
// Basis for the technique used:
// http://beesbuzz.biz/code/hsv_color_transforms.php
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
// S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
// H is the hue shift in degrees (0 to 360)
// vsu = V*S*cos(H*PI/180);
// vsw = V*S*sin(H*PI/180);
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
// Basis for the technique used:
// http://beesbuzz.biz/code/hsv_color_transforms.php
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
// S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
// H is the hue shift in degrees (0 to 360)
// vsu = V*S*cos(H*PI/180);
// vsw = V*S*sin(H*PI/180);
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
// Precompute the values in the matrix:
var vsu = v*s*Math.cos(h*Math.PI/180),
vsw = v*s*Math.sin(h*Math.PI/180);
// (result spot)(source spot)
var rr = 0.299*v+0.701*vsu+0.167*vsw,
rg = 0.587*v-0.587*vsu+0.330*vsw,
rb = 0.114*v-0.114*vsu-0.497*vsw;
var gr = 0.299*v-0.299*vsu-0.328*vsw,
gg = 0.587*v+0.413*vsu+0.035*vsw,
gb = 0.114*v-0.114*vsu+0.293*vsw;
var br = 0.299*v-0.300*vsu+1.250*vsw,
bg = 0.587*v-0.586*vsu-1.050*vsw,
bb = 0.114*v+0.886*vsu-0.200*vsw;
// Precompute the values in the matrix:
var vsu = v*s*Math.cos(h*Math.PI/180),
vsw = v*s*Math.sin(h*Math.PI/180);
// (result spot)(source spot)
var rr = 0.299*v+0.701*vsu+0.167*vsw,
rg = 0.587*v-0.587*vsu+0.330*vsw,
rb = 0.114*v-0.114*vsu-0.497*vsw;
var gr = 0.299*v-0.299*vsu-0.328*vsw,
gg = 0.587*v+0.413*vsu+0.035*vsw,
gb = 0.114*v-0.114*vsu+0.293*vsw;
var br = 0.299*v-0.300*vsu+1.250*vsw,
bg = 0.587*v-0.586*vsu-1.050*vsw,
bb = 0.114*v+0.886*vsu-0.200*vsw;
var r,g,b,a;
var r,g,b,a;
for (i = 0; i < nPixels; i += 4) {
r = data[i+0];
g = data[i+1];
b = data[i+2];
a = data[i+3];
for (i = 0; i < nPixels; i += 4) {
r = data[i+0];
g = data[i+1];
b = data[i+2];
a = data[i+3];
data[i+0] = rr*r + rg*g + rb*b;
data[i+1] = gr*r + gg*g + gb*b;
data[i+2] = br*r + bg*g + bb*b;
data[i+3] = a; // alpha
}
data[i+0] = rr*r + rg*g + rb*b;
data[i+1] = gr*r + gg*g + gb*b;
data[i+2] = br*r + bg*g + bb*b;
data[i+3] = a; // alpha
}
};
};
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv hue in degrees
* @name hue
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} hue value between 0 and 359
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv hue in degrees
* @name hue
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} hue value between 0 and 359
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv saturation
* @name saturation
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv saturation
* @name saturation
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'value', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv value
* @name value
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'value', 0, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsv value
* @name value
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
* @returns {Number}
*/
})();

456
src/filters/Kaleidoscope.js
View File

@@ -1,3 +1,4 @@
/*jshint newcap:false */
(function () {
/*
@@ -16,244 +17,245 @@
* default is in the middle
*/
var ToPolar = function(src,dst,opt){
var ToPolar = function(src,dst,opt){
var srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
xMid = opt.polarCenterX || xSize/2,
yMid = opt.polarCenterY || ySize/2,
i, m, x, y, k, tmp, r=0,g=0,b=0,a=0;
var srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
xMid = opt.polarCenterX || xSize/2,
yMid = opt.polarCenterY || ySize/2,
i, x, y, r=0,g=0,b=0,a=0;
// Find the largest radius
var rad, rMax = Math.sqrt( xMid*xMid + yMid*yMid );
x = xSize - xMid;
y = ySize - yMid;
rad = Math.sqrt( x*x + y*y );
rMax = (rad > rMax)?rad:rMax;
// Find the largest radius
var rad, rMax = Math.sqrt( xMid*xMid + yMid*yMid );
x = xSize - xMid;
y = ySize - yMid;
rad = Math.sqrt( x*x + y*y );
rMax = (rad > rMax)?rad:rMax;
// We'll be uisng y as the radius, and x as the angle (theta=t)
var rSize = ySize,
tSize = xSize,
radius, theta;
// We'll be uisng y as the radius, and x as the angle (theta=t)
var rSize = ySize,
tSize = xSize,
radius, theta;
// We want to cover all angles (0-360) and we need to convert to
// radians (*PI/180)
var conversion = 360/tSize*Math.PI/180, sin, cos;
// We want to cover all angles (0-360) and we need to convert to
// radians (*PI/180)
var conversion = 360/tSize*Math.PI/180, sin, cos;
var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
// var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
for( theta=0; theta<tSize; theta+=1 ){
sin = Math.sin(theta*conversion);
cos = Math.cos(theta*conversion);
for( radius=0; radius<rSize; radius+=1 ){
x = Math.floor(xMid+rMax*radius/rSize*cos);
y = Math.floor(yMid+rMax*radius/rSize*sin);
i = (y*xSize + x)*4;
r = srcPixels[i+0];
g = srcPixels[i+1];
b = srcPixels[i+2];
a = srcPixels[i+3];
for( theta=0; theta<tSize; theta+=1 ){
sin = Math.sin(theta*conversion);
cos = Math.cos(theta*conversion);
for( radius=0; radius<rSize; radius+=1 ){
x = Math.floor(xMid+rMax*radius/rSize*cos);
y = Math.floor(yMid+rMax*radius/rSize*sin);
i = (y*xSize + x)*4;
r = srcPixels[i+0];
g = srcPixels[i+1];
b = srcPixels[i+2];
a = srcPixels[i+3];
// Store it
//i = (theta * xSize + radius) * 4;
i = (theta + radius*xSize) * 4;
dstPixels[i+0] = r;
dstPixels[i+1] = g;
dstPixels[i+2] = b;
dstPixels[i+3] = a;
// Store it
//i = (theta * xSize + radius) * 4;
i = (theta + radius*xSize) * 4;
dstPixels[i+0] = r;
dstPixels[i+1] = g;
dstPixels[i+2] = b;
dstPixels[i+3] = a;
}
}
};
/*
* FromPolar Filter. Converts image data from polar coordinates back to rectangular.
* Performs w*h*4 pixel reads and w*h pixel writes.
* @function
* @author ippo615
* @memberof Kinetic.Filters
* @param {ImageData} src, the source image data (what will be transformed)
* @param {ImageData} dst, the destination image data (where it will be saved)
* @param {Object} opt
* @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,
* default is in the middle
* @param {Number} [opt.polarCenterY] vertical location for the center of the circle,
* default is in the middle
* @param {Number} [opt.polarRotation] amount to rotate the image counterclockwis,
* 0 is no rotation, 360 degrees is a full rotation
*/
var FromPolar = function(src,dst,opt){
var srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
xMid = opt.polarCenterX || xSize/2,
yMid = opt.polarCenterY || ySize/2,
i, m, x, y, dx, dy, k, tmp, r=0,g=0,b=0,a=0;
// Find the largest radius
var rad, rMax = Math.sqrt( xMid*xMid + yMid*yMid );
x = xSize - xMid;
y = ySize - yMid;
rad = Math.sqrt( x*x + y*y );
rMax = (rad > rMax)?rad:rMax;
// We'll be uisng x as the radius, and y as the angle (theta=t)
var rSize = ySize,
tSize = xSize,
radius, theta,
phaseShift = opt.polarRotation || 0;
// We need to convert to degrees and we need to make sure
// it's between (0-360)
// var conversion = tSize/360*180/Math.PI;
var conversion = tSize/360*180/Math.PI;
var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
for( x=0; x<xSize; x+=1 ){
for( y=0; y<ySize; y+=1 ){
dx = x - xMid;
dy = y - yMid;
radius = Math.sqrt(dx*dx + dy*dy)*rSize/rMax;
theta = (Math.atan2(dy,dx)*180/Math.PI + 360 + phaseShift)%360;
theta = theta*tSize/360;
x1 = Math.floor(theta);
y1 = Math.floor(radius);
i = (y1*xSize + x1)*4;
r = srcPixels[i+0];
g = srcPixels[i+1];
b = srcPixels[i+2];
a = srcPixels[i+3];
// Store it
i = (y*xSize + x)*4;
dstPixels[i+0] = r;
dstPixels[i+1] = g;
dstPixels[i+2] = b;
dstPixels[i+3] = a;
}
}
};
//Kinetic.Filters.ToPolar = Kinetic.Util._FilterWrapDoubleBuffer(ToPolar);
//Kinetic.Filters.FromPolar = Kinetic.Util._FilterWrapDoubleBuffer(FromPolar);
// create a temporary canvas for working - shared between multiple calls
var tempCanvas = document.createElement('canvas');
/*
* Kaleidoscope Filter.
* @function
* @author ippo615
* @memberof Kinetic.Filters
*/
Kinetic.Filters.Kaleidoscope = function(imageData){
var xSize = imageData.width,
ySize = imageData.height;
var power = Math.round( this.kaleidoscopePower() );
var angle = Math.round( this.kaleidoscopeAngle() );
var offset = Math.floor(xSize*(angle%360)/360);
if( power < 1 ){return;}
// Work with our shared buffer canvas
tempCanvas.width = xSize;
tempCanvas.height = ySize;
var scratchData = tempCanvas.getContext('2d').getImageData(0,0,xSize,ySize);
// Convert thhe original to polar coordinates
ToPolar( imageData, scratchData, {
polarCenterX:xSize/2,
polarCenterY:ySize/2
});
// Determine how big each section will be, if it's too small
// make it bigger
var minSectionSize = xSize / Math.pow(2,power);
while( minSectionSize <= 8){
minSectionSize = minSectionSize*2;
power -= 1;
}
minSectionSize = Math.ceil(minSectionSize);
var sectionSize = minSectionSize;
// Copy the offset region to 0
// Depending on the size of filter and location of the offset we may need
// to copy the section backwards to prevent it from rewriting itself
var xStart = 0,
xEnd = sectionSize,
xDelta = 1;
if( offset+minSectionSize > xSize ){
xStart = sectionSize;
xEnd = 0;
xDelta = -1;
}
for( y=0; y<ySize; y+=1 ){
for( x=xStart; x !== xEnd; x+=xDelta ){
xoff = Math.round(x+offset)%xSize;
srcPos = (xSize*y+xoff)*4;
r = scratchData.data[srcPos+0];
g = scratchData.data[srcPos+1];
b = scratchData.data[srcPos+2];
a = scratchData.data[srcPos+3];
dstPos = (xSize*y+x)*4;
scratchData.data[dstPos+0] = r;
scratchData.data[dstPos+1] = g;
scratchData.data[dstPos+2] = b;
scratchData.data[dstPos+3] = a;
}
}
// Perform the actual effect
var x,y,xoff,i, r,g,b,a, srcPos, dstPos;
for( y=0; y<ySize; y+=1 ){
sectionSize = Math.floor( minSectionSize );
for( i=0; i<power; i+=1 ){
for( x=0; x<sectionSize+1; x+=1 ){
srcPos = (xSize*y+x)*4;
r = scratchData.data[srcPos+0];
g = scratchData.data[srcPos+1];
b = scratchData.data[srcPos+2];
a = scratchData.data[srcPos+3];
dstPos = (xSize*y+sectionSize*2-x-1)*4;
scratchData.data[dstPos+0] = r;
scratchData.data[dstPos+1] = g;
scratchData.data[dstPos+2] = b;
scratchData.data[dstPos+3] = a;
}
}
sectionSize *= 2;
}
}
};
// Convert back from polar coordinates
FromPolar(scratchData,imageData,{polarRotation:0});
};
/*
* FromPolar Filter. Converts image data from polar coordinates back to rectangular.
* Performs w*h*4 pixel reads and w*h pixel writes.
* @function
* @author ippo615
* @memberof Kinetic.Filters
* @param {ImageData} src, the source image data (what will be transformed)
* @param {ImageData} dst, the destination image data (where it will be saved)
* @param {Object} opt
* @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,
* default is in the middle
* @param {Number} [opt.polarCenterY] vertical location for the center of the circle,
* default is in the middle
* @param {Number} [opt.polarRotation] amount to rotate the image counterclockwis,
* 0 is no rotation, 360 degrees is a full rotation
*/
/**
* get/set kaleidoscope power
* @name kaleidoscopePower
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} power of kaleidoscope
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopePower', 2, null, Kinetic.Factory.afterSetFilter);
var FromPolar = function(src,dst,opt){
/**
* get/set kaleidoscope angle
* @name kaleidoscopeAngle
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} degrees
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopeAngle', 0, null, Kinetic.Factory.afterSetFilter);
var srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
xMid = opt.polarCenterX || xSize/2,
yMid = opt.polarCenterY || ySize/2,
i, x, y, dx, dy, r=0,g=0,b=0,a=0;
// Find the largest radius
var rad, rMax = Math.sqrt( xMid*xMid + yMid*yMid );
x = xSize - xMid;
y = ySize - yMid;
rad = Math.sqrt( x*x + y*y );
rMax = (rad > rMax)?rad:rMax;
// We'll be uisng x as the radius, and y as the angle (theta=t)
var rSize = ySize,
tSize = xSize,
radius, theta,
phaseShift = opt.polarRotation || 0;
// We need to convert to degrees and we need to make sure
// it's between (0-360)
// var conversion = tSize/360*180/Math.PI;
//var conversion = tSize/360*180/Math.PI;
var x1, y1;
for( x=0; x<xSize; x+=1 ){
for( y=0; y<ySize; y+=1 ){
dx = x - xMid;
dy = y - yMid;
radius = Math.sqrt(dx*dx + dy*dy)*rSize/rMax;
theta = (Math.atan2(dy,dx)*180/Math.PI + 360 + phaseShift)%360;
theta = theta*tSize/360;
x1 = Math.floor(theta);
y1 = Math.floor(radius);
i = (y1*xSize + x1)*4;
r = srcPixels[i+0];
g = srcPixels[i+1];
b = srcPixels[i+2];
a = srcPixels[i+3];
// Store it
i = (y*xSize + x)*4;
dstPixels[i+0] = r;
dstPixels[i+1] = g;
dstPixels[i+2] = b;
dstPixels[i+3] = a;
}
}
};
//Kinetic.Filters.ToPolar = Kinetic.Util._FilterWrapDoubleBuffer(ToPolar);
//Kinetic.Filters.FromPolar = Kinetic.Util._FilterWrapDoubleBuffer(FromPolar);
// create a temporary canvas for working - shared between multiple calls
var tempCanvas = document.createElement('canvas');
/*
* Kaleidoscope Filter.
* @function
* @author ippo615
* @memberof Kinetic.Filters
*/
Kinetic.Filters.Kaleidoscope = function(imageData){
var xSize = imageData.width,
ySize = imageData.height;
var x,y,xoff,i, r,g,b,a, srcPos, dstPos;
var power = Math.round( this.kaleidoscopePower() );
var angle = Math.round( this.kaleidoscopeAngle() );
var offset = Math.floor(xSize*(angle%360)/360);
if( power < 1 ){return;}
// Work with our shared buffer canvas
tempCanvas.width = xSize;
tempCanvas.height = ySize;
var scratchData = tempCanvas.getContext('2d').getImageData(0,0,xSize,ySize);
// Convert thhe original to polar coordinates
ToPolar( imageData, scratchData, {
polarCenterX:xSize/2,
polarCenterY:ySize/2
});
// Determine how big each section will be, if it's too small
// make it bigger
var minSectionSize = xSize / Math.pow(2,power);
while( minSectionSize <= 8){
minSectionSize = minSectionSize*2;
power -= 1;
}
minSectionSize = Math.ceil(minSectionSize);
var sectionSize = minSectionSize;
// Copy the offset region to 0
// Depending on the size of filter and location of the offset we may need
// to copy the section backwards to prevent it from rewriting itself
var xStart = 0,
xEnd = sectionSize,
xDelta = 1;
if( offset+minSectionSize > xSize ){
xStart = sectionSize;
xEnd = 0;
xDelta = -1;
}
for( y=0; y<ySize; y+=1 ){
for( x=xStart; x !== xEnd; x+=xDelta ){
xoff = Math.round(x+offset)%xSize;
srcPos = (xSize*y+xoff)*4;
r = scratchData.data[srcPos+0];
g = scratchData.data[srcPos+1];
b = scratchData.data[srcPos+2];
a = scratchData.data[srcPos+3];
dstPos = (xSize*y+x)*4;
scratchData.data[dstPos+0] = r;
scratchData.data[dstPos+1] = g;
scratchData.data[dstPos+2] = b;
scratchData.data[dstPos+3] = a;
}
}
// Perform the actual effect
for( y=0; y<ySize; y+=1 ){
sectionSize = Math.floor( minSectionSize );
for( i=0; i<power; i+=1 ){
for( x=0; x<sectionSize+1; x+=1 ){
srcPos = (xSize*y+x)*4;
r = scratchData.data[srcPos+0];
g = scratchData.data[srcPos+1];
b = scratchData.data[srcPos+2];
a = scratchData.data[srcPos+3];
dstPos = (xSize*y+sectionSize*2-x-1)*4;
scratchData.data[dstPos+0] = r;
scratchData.data[dstPos+1] = g;
scratchData.data[dstPos+2] = b;
scratchData.data[dstPos+3] = a;
}
sectionSize *= 2;
}
}
// Convert back from polar coordinates
FromPolar(scratchData,imageData,{polarRotation:0});
};
/**
* get/set kaleidoscope power
* @name kaleidoscopePower
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} power of kaleidoscope
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopePower', 2, null, Kinetic.Factory.afterSetFilter);
/**
* get/set kaleidoscope angle
* @name kaleidoscopeAngle
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} degrees
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopeAngle', 0, null, Kinetic.Factory.afterSetFilter);
})();

2
src/filters/Mask.js
View File

@@ -34,7 +34,7 @@
var rgbv_se = pixelAt(idata, idata.width - 1, idata.height - 1);
var thres = threshold || 10;
var thres = threshold || 10;
if (rgbDistance(rgbv_no, rgbv_ne) < thres && rgbDistance(rgbv_ne, rgbv_se) < thres && rgbDistance(rgbv_se, rgbv_so) < thres && rgbDistance(rgbv_so, rgbv_no) < thres) {
// Mean color

56
src/filters/Noise.js
View File

@@ -1,34 +1,34 @@
(function () {
/**
* Noise Filter. Randomly adds or substracts to the color channels
* @function
* @memberof Kinetic.Filters
* @param {Object} imagedata
* @author ippo615
*/
Kinetic.Filters.Noise = function (imageData) {
var amount = this.noise() * 255,
data = imageData.data,
nPixels = data.length,
half = amount / 2,
i;
/**
* Noise Filter. Randomly adds or substracts to the color channels
* @function
* @memberof Kinetic.Filters
* @param {Object} imagedata
* @author ippo615
*/
Kinetic.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();
}
};
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();
}
};
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'noise', 0.2, null, Kinetic.Factory.afterSetFilter);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'noise', 0.2, null, Kinetic.Factory.afterSetFilter);
/**
* get/set noise amount. Must be a value between 0 and 1
* @name noise
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} noise
* @returns {Number}
*/
/**
* get/set noise amount. Must be a value between 0 and 1
* @name noise
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} noise
* @returns {Number}
*/
})();

159
src/filters/Pixelate.js
View File

@@ -1,89 +1,88 @@
(function () {
/**
* Pixelate Filter. Averages groups of pixels and redraws
* them as larger pixels
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
/**
* Pixelate Filter. Averages groups of pixels and redraws
* them as larger pixels
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.Pixelate = function (imageData) {
Kinetic.Filters.Pixelate = function (imageData) {
var pixelSize = Math.ceil(this.pixelSize()),
width = imageData.width,
height = imageData.height,
imageData = imageData.data,
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;
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) {
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;
}
}
}
}
// 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;
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'pixelSize', 8, null, Kinetic.Factory.afterSetFilter);
// 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;
alphas = alpha / 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;
}
}
}
}
};
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'pixelSize', 8, null, Kinetic.Factory.afterSetFilter);
/**
* get/set pixel size
* @name pixelSize
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} pixelSize
* @returns {Integer}
*/
/**
* get/set pixel size
* @name pixelSize
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} pixelSize
* @returns {Integer}
*/
})();

58
src/filters/Posterize.js
View File

@@ -1,36 +1,36 @@
(function () {
/**
* Posterize Filter. Adjusts the channels so that there are no more
* than n different values for that channel. This is also applied
* to the alpha channel.
* @function
* @author ippo615
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
/**
* Posterize Filter. Adjusts the channels so that there are no more
* than n different values for that channel. This is also applied
* to the alpha channel.
* @function
* @author ippo615
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.Posterize = function (imageData) {
// level must be between 1 and 255
var levels = Math.round(this.levels() * 254) + 1,
data = imageData.data,
len = data.length,
scale = (255 / levels),
i;
Kinetic.Filters.Posterize = function (imageData) {
// level must be between 1 and 255
var levels = Math.round(this.levels() * 254) + 1,
data = imageData.data,
len = data.length,
scale = (255 / levels),
i;
for (i = 0; i < len; i += 1) {
data[i] = Math.floor(data[i] / scale) * scale;
}
};
for (i = 0; i < len; i += 1) {
data[i] = Math.floor(data[i] / scale) * scale;
}
};
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'levels', 0.5, null, Kinetic.Factory.afterSetFilter);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'levels', 0.5, null, Kinetic.Factory.afterSetFilter);
/**
* get/set levels. Must be a number between 0 and 1
* @name levels
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} level between 0 and 1
* @returns {Number}
*/
/**
* get/set levels. Must be a number between 0 and 1
* @name levels
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} level between 0 and 1
* @returns {Number}
*/
})();

142
src/filters/RGB.js
View File

@@ -1,77 +1,77 @@
(function () {
/**
* RGB Filter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.RGB = function (imageData) {
var data = imageData.data,
nPixels = data.length,
red = this.red(),
green = this.green(),
blue = this.blue(),
i, brightness;
/**
* RGB Filter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.RGB = function (imageData) {
var data = imageData.data,
nPixels = data.length,
red = this.red(),
green = this.green(),
blue = this.blue(),
i, brightness;
for (i = 0; i < nPixels; i += 4) {
brightness = (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2])/255;
data[i ] = brightness*red; // r
data[i + 1] = brightness*green; // g
data[i + 2] = brightness*blue; // b
data[i + 3] = data[i + 3]; // alpha
}
};
for (i = 0; i < nPixels; i += 4) {
brightness = (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2])/255;
data[i ] = brightness*red; // r
data[i + 1] = brightness*green; // g
data[i + 2] = brightness*blue; // b
data[i + 3] = data[i + 3]; // alpha
}
};
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'red', 0, function(val) {
this._filterUpToDate = false;
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/**
* get/set filter red value
* @name red
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} red value between 0 and 255
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'red', 0, function(val) {
this._filterUpToDate = false;
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/**
* get/set filter red value
* @name red
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} red value between 0 and 255
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'green', 0, function(val) {
this._filterUpToDate = false;
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/**
* get/set filter green value
* @name green
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} green value between 0 and 255
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'green', 0, function(val) {
this._filterUpToDate = false;
if (val > 255) {
return 255;
}
else if (val < 0) {
return 0;
}
else {
return Math.round(val);
}
});
/**
* get/set filter green value
* @name green
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} green value between 0 and 255
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'blue', 0, Kinetic.Validators.RGBComponent, Kinetic.Factory.afterSetFilter);
/**
* get/set filter blue value
* @name blue
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} blue value between 0 and 255
* @returns {Integer}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'blue', 0, Kinetic.Validators.RGBComponent, Kinetic.Factory.afterSetFilter);
/**
* get/set filter blue value
* @name blue
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} blue value between 0 and 255
* @returns {Integer}
*/
})();

69
src/filters/Solarize.js
View File

@@ -1,40 +1,45 @@
(function () {
/**
* Solarize Filter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* Pixastic Lib - Solarize filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
*/
Kinetic.Filters.Solarize = function (imageData) {
var data = imageData.data,
w = imageData.width,
h = imageData.height,
w4 = w*4,
y = h;
/**
* Solarize Filter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* Pixastic Lib - Solarize filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
*/
Kinetic.Filters.Solarize = function (imageData) {
var data = imageData.data,
w = imageData.width,
h = imageData.height,
w4 = w*4,
y = h;
do {
var offsetY = (y-1)*w4;
var x = w;
do {
var offset = offsetY + (x-1)*4;
var r = data[offset];
var g = data[offset+1];
var b = data[offset+2];
var offsetY = (y-1)*w4;
var x = w;
do {
var offset = offsetY + (x-1)*4;
var r = data[offset];
var g = data[offset+1];
var b = data[offset+2];
if (r > 127) r = 255 - r;
if (g > 127) g = 255 - g;
if (b > 127) b = 255 - b;
if (r > 127) {
r = 255 - r;
}
if (g > 127) {
g = 255 - g;
}
if (b > 127) {
b = 255 - b;
}
data[offset] = r;
data[offset+1] = g;
data[offset+2] = b;
} while (--x);
} while (--y);
};
data[offset] = r;
data[offset+1] = g;
data[offset+2] = b;
} while (--x);
} while (--y);
};
})();

54
src/filters/Threshold.js
View File

@@ -1,34 +1,34 @@
(function () {
/**
* 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
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
/**
* 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
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.Threshold = function (imageData) {
var level = this.threshold() * 255,
data = imageData.data,
len = data.length,
i;
Kinetic.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;
}
};
for (i = 0; i < len; i += 1) {
data[i] = data[i] < level ? 0 : 255;
}
};
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0.5, null, Kinetic.Factory.afterSetFilter);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0.5, null, Kinetic.Factory.afterSetFilter);
/**
* get/set threshold. Must be a value between 0 and 1
* @name threshold
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} threshold
* @returns {Number}
*/
/**
* get/set threshold. Must be a value between 0 and 1
* @name threshold
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} threshold
* @returns {Number}
*/
})();

20
src/plugins/Label.js
View File

@@ -107,15 +107,15 @@
_sync: function() {
var text = this.getText(),
tag = this.getTag(),
width, height, pointerDirection, pointerWidth, x, y;
width, height, pointerDirection, pointerWidth, x, y, pointerHeight;
if (text && tag) {
width = text.getWidth(),
height = text.getHeight(),
pointerDirection = tag.getPointerDirection(),
pointerWidth = tag.getPointerWidth(),
pointerHeight = tag.getPointerHeight(),
x = 0,
width = text.getWidth();
height = text.getHeight();
pointerDirection = tag.getPointerDirection();
pointerWidth = tag.getPointerWidth();
pointerHeight = tag.getPointerHeight();
x = 0;
y = 0;
switch(pointerDirection) {
@@ -183,8 +183,8 @@
height = this.getHeight(),
pointerDirection = this.getPointerDirection(),
pointerWidth = this.getPointerWidth(),
pointerHeight = this.getPointerHeight(),
cornerRadius = this.getCornerRadius();
pointerHeight = this.getPointerHeight();
//cornerRadius = this.getCornerRadius();
context.beginPath();
context.moveTo(0,0);
@@ -294,5 +294,5 @@
* @memberof Kinetic.Tag.prototype
*/
Kinetic.Collection.mapMethods(Kinetic.Tag);
Kinetic.Collection.mapMethods(Kinetic.Tag);
})();

50
src/plugins/Path.js
View File

@@ -106,8 +106,9 @@
var m = (P2y - P1y) / ((P2x - P1x) + 0.00000001);
var run = Math.sqrt(dist * dist / (1 + m * m));
if(P2x < P1x)
if(P2x < P1x) {
run *= -1;
}
var rise = m * run;
var pt;
@@ -137,8 +138,9 @@
var pRise = this.getLineLength(fromX, fromY, ix, iy);
var pRun = Math.sqrt(dist * dist - pRise * pRise);
run = Math.sqrt(pRun * pRun / (1 + m * m));
if(P2x < P1x)
if(P2x < P1x) {
run *= -1;
}
rise = m * run;
pt = {
x: ix + run,
@@ -268,8 +270,9 @@
p[i] = parseFloat(p[i]);
}
while(p.length > 0) {
if(isNaN(p[0]))// case for a trailing comma before next command
if(isNaN(p[0])) {// case for a trailing comma before next command
break;
}
var cmd = null;
var points = [];
@@ -360,7 +363,8 @@
points.push(cpx, cpy);
break;
case 'S':
ctlPtx = cpx, ctlPty = cpy;
ctlPtx = cpx;
ctlPty = cpy;
prevCmd = ca[ca.length - 1];
if(prevCmd.command === 'C') {
ctlPtx = cpx + (cpx - prevCmd.points[2]);
@@ -373,7 +377,8 @@
points.push(cpx, cpy);
break;
case 's':
ctlPtx = cpx, ctlPty = cpy;
ctlPtx = cpx;
ctlPty = cpy;
prevCmd = ca[ca.length - 1];
if(prevCmd.command === 'C') {
ctlPtx = cpx + (cpx - prevCmd.points[2]);
@@ -399,7 +404,8 @@
points.push(cpx, cpy);
break;
case 'T':
ctlPtx = cpx, ctlPty = cpy;
ctlPtx = cpx;
ctlPty = cpy;
prevCmd = ca[ca.length - 1];
if(prevCmd.command === 'Q') {
ctlPtx = cpx + (cpx - prevCmd.points[0]);
@@ -411,7 +417,8 @@
points.push(ctlPtx, ctlPty, cpx, cpy);
break;
case 't':
ctlPtx = cpx, ctlPty = cpy;
ctlPtx = cpx;
ctlPty = cpy;
prevCmd = ca[ca.length - 1];
if(prevCmd.command === 'Q') {
ctlPtx = cpx + (cpx - prevCmd.points[0]);
@@ -423,14 +430,27 @@
points.push(ctlPtx, ctlPty, cpx, cpy);
break;
case 'A':
rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
x1 = cpx, y1 = cpy; cpx = p.shift(), cpy = p.shift();
rx = p.shift();
ry = p.shift();
psi = p.shift();
fa = p.shift();
fs = p.shift();
x1 = cpx;
y1 = cpy;
cpx = p.shift();
cpy = p.shift();
cmd = 'A';
points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
break;
case 'a':
rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
x1 = cpx, y1 = cpy; cpx += p.shift(), cpy += p.shift();
rx = p.shift();
ry = p.shift();
psi = p.shift();
fa = p.shift();
fs = p.shift();
x1 = cpx;
y1 = cpy; cpx += p.shift();
cpy += p.shift();
cmd = 'A';
points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
break;
@@ -460,7 +480,7 @@
return ca;
};
Kinetic.Path.calcLength = function(x, y, cmd, points) {
var len, p1, p2;
var len, p1, p2, t;
var path = Kinetic.Path;
switch (cmd) {
@@ -538,7 +558,7 @@
var f = Math.sqrt((((rx * rx) * (ry * ry)) - ((rx * rx) * (yp * yp)) - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp) + (ry * ry) * (xp * xp)));
if(fa == fs) {
if(fa === fs) {
f *= -1;
}
if(isNaN(f)) {
@@ -574,7 +594,7 @@
if(fs === 0 && dTheta > 0) {
dTheta = dTheta - 2 * Math.PI;
}
if(fs == 1 && dTheta < 0) {
if(fs === 1 && dTheta < 0) {
dTheta = dTheta + 2 * Math.PI;
}
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
@@ -600,5 +620,5 @@
* @memberof Kinetic.Path.prototype
*/
Kinetic.Collection.mapMethods(Kinetic.Path);
Kinetic.Collection.mapMethods(Kinetic.Path);
})();

2
src/plugins/RegularPolygon.js
View File

@@ -85,5 +85,5 @@
* @memberof Kinetic.RegularPolygon.prototype
*/
Kinetic.Collection.mapMethods(Kinetic.RegularPolygon);
Kinetic.Collection.mapMethods(Kinetic.RegularPolygon);
})();

6
src/plugins/Star.js
View File

@@ -34,8 +34,8 @@
this.sceneFunc(this._sceneFunc);
},
_sceneFunc: function(context) {
var innerRadius = this.innerRadius(),
outerRadius = this.outerRadius(),
var innerRadius = this.innerRadius(),
outerRadius = this.outerRadius(),
numPoints = this.numPoints();
context.beginPath();
@@ -106,5 +106,5 @@
* @memberof Kinetic.Star.prototype
*/
Kinetic.Collection.mapMethods(Kinetic.Star);
Kinetic.Collection.mapMethods(Kinetic.Star);
})();

2
src/shapes/Arc.js
View File

@@ -118,5 +118,5 @@
* arc.clockwise(true);
*/
Kinetic.Collection.mapMethods(Kinetic.Arc);
Kinetic.Collection.mapMethods(Kinetic.Arc);
})();

2
src/shapes/Circle.js
View File

@@ -77,5 +77,5 @@
* circle.radius(10);<br>
*/
Kinetic.Collection.mapMethods(Kinetic.Circle);
Kinetic.Collection.mapMethods(Kinetic.Circle);
})();

2
src/shapes/Ellipse.js
View File

@@ -126,6 +126,6 @@
* ellipse.radiusY(200);
*/
Kinetic.Collection.mapMethods(Kinetic.Ellipse);
Kinetic.Collection.mapMethods(Kinetic.Ellipse);
})();

16
src/shapes/Image.js
View File

@@ -1,8 +1,7 @@
(function() {
// CONSTANTS
var IMAGE = 'Image',
SET = 'set';
var IMAGE = 'Image';
/**
* Image constructor
@@ -43,19 +42,18 @@
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke();
},
_sceneFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
var width = this.getWidth(),
height = this.getHeight(),
image = this.getImage(),
crop, cropWidth, cropHeight, params;
if (image) {
crop = this.getCrop(),
crop = this.getCrop();
cropWidth = crop.width;
cropHeight = crop.height;
if (cropWidth && cropHeight) {
params = [image, crop.x, crop.y, cropWidth, cropHeight, 0, 0, width, height];
}
else {
} else {
params = [image, 0, 0, width, height];
}
}
@@ -70,7 +68,7 @@
}
},
_hitFunc: function(context) {
var width = this.getWidth(),
var width = this.getWidth(),
height = this.getHeight();
context.beginPath();
@@ -197,5 +195,5 @@
* image.cropHeight(20);
*/
Kinetic.Collection.mapMethods(Kinetic.Image);
Kinetic.Collection.mapMethods(Kinetic.Image);
})();

63
src/shapes/Line.js
View File

@@ -27,7 +27,6 @@
Kinetic.Line.prototype = {
___init: function(config) {
var that = this;
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Line';
@@ -43,7 +42,7 @@
length = points.length,
tension = this.getTension(),
closed = this.getClosed(),
tp, len, n, point;
tp, len, n;
context.beginPath();
context.moveTo(points[0], points[1]);
@@ -76,19 +75,19 @@
// closed e.g. polygons and blobs
if (closed) {
context.closePath();
context.fillStrokeShape(this);
context.fillStrokeShape(this);
}
// open e.g. lines and splines
else {
context.strokeShape(this);
};
}
},
getTensionPoints: function() {
return this._getCache('tensionPoints', this._getTensionPoints);
return this._getCache('tensionPoints', this._getTensionPoints);
},
_getTensionPoints: function() {
if (this.getClosed()) {
return this._getTensionPointsClosed();
return this._getTensionPointsClosed();
}
else {
return Kinetic.Util._expandPoints(this.getPoints(), this.getTension());
@@ -101,40 +100,40 @@
util = Kinetic.Util,
firstControlPoints = util._getControlPoints(
p[len-2],
p[len-1],
p[0],
p[1],
p[2],
p[len-1],
p[0],
p[1],
p[2],
p[3],
tension
),
lastControlPoints = util._getControlPoints(
p[len-4],
p[len-3],
p[len-2],
p[len-1],
p[0],
p[len-4],
p[len-3],
p[len-2],
p[len-1],
p[0],
p[1],
tension
),
middle = Kinetic.Util._expandPoints(p, tension),
tp = [
firstControlPoints[2],
firstControlPoints[3]
]
.concat(middle)
.concat([
lastControlPoints[0],
lastControlPoints[1],
p[len-2],
p[len-1],
lastControlPoints[2],
lastControlPoints[3],
firstControlPoints[0],
firstControlPoints[1],
p[0],
p[1]
]);
firstControlPoints[2],
firstControlPoints[3]
]
.concat(middle)
.concat([
lastControlPoints[0],
lastControlPoints[1],
p[len-2],
p[len-1],
lastControlPoints[2],
lastControlPoints[3],
firstControlPoints[0],
firstControlPoints[1],
p[0],
p[1]
]);
return tp;
}
@@ -199,5 +198,5 @@
* line.points(line.points().concat([70, 80]));
*/
Kinetic.Collection.mapMethods(Kinetic.Line);
Kinetic.Collection.mapMethods(Kinetic.Line);
})();

2
src/shapes/Rect.js
View File

@@ -74,5 +74,5 @@
* rect.cornerRadius(10);
*/
Kinetic.Collection.mapMethods(Kinetic.Rect);
Kinetic.Collection.mapMethods(Kinetic.Rect);
})();

2
src/shapes/Ring.js
View File

@@ -96,5 +96,5 @@
* ring.outerRadius(20);
*/
Kinetic.Collection.mapMethods(Kinetic.Ring);
Kinetic.Collection.mapMethods(Kinetic.Ring);
})();

19
test/performance/common/random-squares.js
View File

@@ -1,5 +1,3 @@
console.log('test')
var stage;
var circlesLayer;
var circles;
@@ -9,7 +7,7 @@
var VERSION = Kinetic.version === '4.7.4' || Kinetic.version === 'dev' ? 'new' : 'old';
window.requestAnimFrame = (function(callback){
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
@@ -46,7 +44,7 @@
colorIndex = 0;
}
var shape = make_shape('red');
var shape = make_shape(color);
circlesLayer.add(shape);
circles.push(shape);
}());
@@ -66,10 +64,10 @@
var period = timeDiff/1000; //times per second, our period
for (var i = 0; i < circles.length; i++) {
var x = Math.random() * width;
var y = Math.random() * height;
var x = Math.round(Math.random() * width);
var y = Math.round(Math.random() * height);
if (VERSION === 'new') {
circles[i].position({x: x, y: y});
circles[i].setPosition({x: x, y: y});
}
else {
circles[i].setPosition(x, y);
@@ -91,7 +89,8 @@
fill: color,
width: 10,
height: 10,
transformsEnabled: false
transformsEnabled: "position",
listening : false
});
@@ -102,7 +101,7 @@
// _context.beginPath();
// _context.rect(0, 0, 10, 10);
// _context.closePath();
// _context.fillStyle = 'red';
// _context.fillStyle = color;
// _context.fill();
// }
// });
@@ -114,7 +113,7 @@
context.beginPath();
context.rect(0, 0, 10, 10);
context.fillStyle = 'red';
context.fillStyle = color;
context.fill();
context.closePath();
});

7
test/unit/shapes/Sprite-test.js
View File

@@ -28,7 +28,7 @@ suite('Sprite', function() {
156, 109, 70, 98,
229, 109, 60, 98,
287, 109, 41, 98
]
]
},
frameRate: 10,
draggable: true,
@@ -72,7 +72,7 @@ suite('Sprite', function() {
};
imageObj.src = 'assets/scorpion-sprite.png';
});
test("can change frame rate on fly", function(done){
test('can change frame rate on fly', function(done){
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
@@ -92,7 +92,7 @@ suite('Sprite', function() {
158, 0, 49, 109,
210, 0, 49, 109,
262, 0, 49, 109
]
]
},
frameRate: 50,
draggable: true,
@@ -118,6 +118,7 @@ suite('Sprite', function() {
sprite.frameRate(52);
assert.equal(sprite.anim.isRunning(), true);
// for this moment should tick more than 2 times
// make sure that sprite is not restating after set frame rate
assert.equal(sprite.frameIndex() > 2, true);
done();
}, 68);