lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

continued prep work for v4.0.0. removed detectionType property because new event engine uses one strategy. added new drawBuffer method so that you can redraw the buffer without redrawing the visible canvas. changed alpha to opacity.

Browse Source
This commit is contained in:
Eric Rowell 2012-08-13 23:06:29 -07:00
parent ef14edede3
commit 02c6c7276f
12 changed files with 241 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Aug 11 2012 * Date: Aug 13 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * Copyright (C) 2011 - 2012 by Eric Rowell
* *
@ -38,6 +38,8 @@ Kinetic.Filters = {};
Kinetic.Plugins = {}; Kinetic.Plugins = {};
Kinetic.Global = { Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'], BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
BUFFER_BLACKLIST: ['shadow'],
stages: [], stages: [],
idCounter: 0, idCounter: 0,
tempNodes: {}, tempNodes: {},
@ -447,7 +449,7 @@ Kinetic.Type = {
} }
}, },
_rgbToHex: function(r, g, b) { _rgbToHex: function(r, g, b) {
return ((r << 16) | (g << 8) | b).toString(16); return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}, },
_getRandomColorKey: function() { _getRandomColorKey: function() {
var r = Math.round(Math.random() * 255); var r = Math.round(Math.random() * 255);
@ -551,8 +553,6 @@ Kinetic.Canvas.prototype = {
*/ */
strip: function() { strip: function() {
var context = this.context; var context = this.context;
context.drawImage = function() {
};
}, },
/** /**
* toDataURL * toDataURL
@ -1225,7 +1225,7 @@ requestAnimFrame = (function(callback) {
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -1249,7 +1249,7 @@ Kinetic.Node = Kinetic.Class.extend({
visible: true, visible: true,
listening: true, listening: true,
name: undefined, name: undefined,
alpha: 1, opacity: 1,
x: 0, x: 0,
y: 0, y: 0,
scale: { scale: {
@ -1773,19 +1773,19 @@ Kinetic.Node = Kinetic.Class.extend({
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
}, },
/** /**
* get absolute alpha * get absolute opacity
* @name getAbsoluteAlpha * @name getAbsoluteOpacity
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
getAbsoluteAlpha: function() { getAbsoluteOpacity: function() {
var absAlpha = 1; var absOpacity = 1;
var node = this; var node = this;
// traverse upwards // traverse upwards
while(node.nodeType !== 'Stage') { while(node.nodeType !== 'Stage') {
absAlpha *= node.attrs.alpha; absOpacity *= node.attrs.opacity;
node = node.parent; node = node.parent;
} }
return absAlpha; return absOpacity;
}, },
/** /**
* determine if node is currently in drag and drop mode * determine if node is currently in drag and drop mode
@ -1862,7 +1862,7 @@ Kinetic.Node = Kinetic.Class.extend({
}, },
/** /**
* transition node to another state. Any property that can accept a real * transition node to another state. Any property that can accept a real
* number can be transitioned, including x, y, rotation, alpha, strokeWidth, * number can be transitioned, including x, y, rotation, opacity, strokeWidth,
* radius, scale.x, scale.y, offset.x, offset.y, etc. * radius, scale.x, scale.y, offset.x, offset.y, etc.
* @name transitionTo * @name transitionTo
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
@ -2291,7 +2291,7 @@ Kinetic.Node._addGetter = function(constructor, attr) {
}; };
}; };
// add getters setters // add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']); Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'rotation', 'opacity', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']); Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
/** /**
@ -2308,13 +2308,6 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
* @param {Number} y * @param {Number} y
*/ */
/**
* set detection type
* @name setDetectionType
* @methodOf Kinetic.Node.prototype
* @param {String} type can be path or pixel
*/
/** /**
* set node rotation in radians * set node rotation in radians
* @name setRotation * @name setRotation
@ -2323,12 +2316,12 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
*/ */
/** /**
* set alpha. Alpha values range from 0 to 1. * set opacity. Opacity values range from 0 to 1.
* A node with an alpha of 0 is fully transparent, and a node * A node with an opacity of 0 is fully transparent, and a node
* with an alpha of 1 is fully opaque * with an opacity of 1 is fully opaque
* @name setAlpha * @name setOpacity
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
* @param {Object} alpha * @param {Object} opacity
*/ */
/** /**
@ -2404,12 +2397,6 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
/**
* get detection type. Can be path or pixel
* @name getDetectionType
* @methodOf Kinetic.Node.prototype
*/
/** /**
* get rotation in radians * get rotation in radians
* @name getRotation * @name getRotation
@ -2417,8 +2404,8 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
*/ */
/** /**
* get alpha. * get opacity.
* @name getAlpha * @name getOpacity
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
@ -2530,17 +2517,19 @@ Kinetic.Container = Kinetic.Node.extend({
child.parent = this; child.parent = this;
// set color key // set color key
if(child.nodeType === 'Shape') {
var shapes = Kinetic.Global.shapes; var shapes = Kinetic.Global.shapes;
var key; var key;
while (true) { while(true) {
key = Kinetic.Type._getRandomColorKey(); key = Kinetic.Type._getRandomColorKey();
if (key && !(key in shapes)) { if(key && !( key in shapes)) {
break; break;
} }
} }
child.colorKey = key; child.colorKey = key;
shapes[key] = child; shapes[key] = child;
}
this.children.push(child); this.children.push(child);
var stage = child.getStage(); var stage = child.getStage();
@ -2712,8 +2701,9 @@ Kinetic.Container = Kinetic.Node.extend({
var children = this.children; var children = this.children;
for(var n = 0; n < children.length; n++) { for(var n = 0; n < children.length; n++) {
var child = children[n]; var child = children[n];
if(canvas.name !== 'buffer' || child.getListening()) {
if(child.nodeType === 'Shape') { if(child.nodeType === 'Shape') {
if(child.isVisible() && stage.isVisible()) { if(child.isVisible()) {
child._draw(canvas); child._draw(canvas);
} }
} }
@ -2721,6 +2711,7 @@ Kinetic.Container = Kinetic.Node.extend({
child.draw(canvas); child.draw(canvas);
} }
} }
}
}, },
/** /**
* set children indices * set children indices
@ -2749,7 +2740,7 @@ Kinetic.Container = Kinetic.Node.extend({
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -3135,6 +3126,7 @@ Kinetic.Stage = Kinetic.Container.extend({
for(var n = layers.length - 1; n >= 0; n--) { for(var n = layers.length - 1; n >= 0; n--) {
var layer = layers[n]; var layer = layers[n];
var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data; var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
if(p[3] === 255) {
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]); var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
shape = Kinetic.Global.shapes[colorKey]; shape = Kinetic.Global.shapes[colorKey];
var isDragging = Kinetic.Global.drag.moving; var isDragging = Kinetic.Global.drag.moving;
@ -3143,6 +3135,7 @@ Kinetic.Stage = Kinetic.Container.extend({
return shape; return shape;
} }
} }
}
return null; return null;
}, },
@ -3572,7 +3565,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Stage, ['width', 'height']);
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -3616,6 +3609,15 @@ Kinetic.Layer = Kinetic.Container.extend({
draw: function(canvas) { draw: function(canvas) {
this._draw(canvas); this._draw(canvas);
}, },
/**
* draw children nodes on buffer. this includes any groups
* or shapes
* @name drawBuffer
* @methodOf Kinetic.Layer.prototype
*/
drawBuffer: function() {
this.draw(this.bufferCanvas);
},
/** /**
* set before draw handler * set before draw handler
* @name beforeDraw * @name beforeDraw
@ -3708,8 +3710,10 @@ Kinetic.Layer = Kinetic.Container.extend({
if(this.attrs.clearBeforeDraw) { if(this.attrs.clearBeforeDraw) {
canvas.clear(); canvas.clear();
if(canvas.name !== 'buffer') {
this.bufferCanvas.clear(); this.bufferCanvas.clear();
} }
}
if(this.isVisible()) { if(this.isVisible()) {
// draw custom func // draw custom func
@ -3717,11 +3721,19 @@ Kinetic.Layer = Kinetic.Container.extend({
this.attrs.drawFunc.call(this); this.attrs.drawFunc.call(this);
} }
// draw children on front canvas if(canvas.name !== 'buffer') {
this._drawChildren(canvas); this._drawChildren(canvas);
// draw children on back canvas if(this.getListening()) {
this._drawChildren(this.bufferCanvas); this._drawChildren(this.bufferCanvas);
} }
}
// buffer canvas
else {
if(this.getListening()) {
this._drawChildren(canvas);
}
}
}
// after draw handler // after draw handler
if(this.afterDrawFunc !== undefined) { if(this.afterDrawFunc !== undefined) {
@ -3761,7 +3773,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']);
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -3831,17 +3843,15 @@ Kinetic.Group = Kinetic.Container.extend({
* @config {Obect} [config.shadow.blur.offset] * @config {Obect} [config.shadow.blur.offset]
* @config {Number} [config.shadow.blur.offset.x] * @config {Number} [config.shadow.blur.offset.x]
* @config {Number} [config.shadow.blur.offset.y] * @config {Number} [config.shadow.blur.offset.y]
* @config {Number} [config.shadow.alpha] shadow alpha. Can be any real number * @config {Number} [config.shadow.opacity] shadow opacity. Can be any real number
* between 0 and 1 * between 0 and 1
* @config {String} [config.detectionType] shape detection type. Can be path or pixel.
* The default is path because it performs better
* @param {Number} [config.x] * @param {Number} [config.x]
* @param {Number} [config.y] * @param {Number} [config.y]
* @param {Boolean} [config.visible] * @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -3861,10 +3871,6 @@ Kinetic.Group = Kinetic.Container.extend({
*/ */
Kinetic.Shape = Kinetic.Node.extend({ Kinetic.Shape = Kinetic.Node.extend({
init: function(config) { init: function(config) {
this.setDefaultAttrs({
detectionType: 'path'
});
this.nodeType = 'Shape'; this.nodeType = 'Shape';
this.appliedShadow = false; this.appliedShadow = false;
@ -4085,7 +4091,7 @@ Kinetic.Shape = Kinetic.Node.extend({
_applyShadow: function(context) { _applyShadow: function(context) {
var s = this.attrs.shadow; var s = this.attrs.shadow;
if(s) { if(s) {
var aa = this.getAbsoluteAlpha(); var aa = this.getAbsoluteOpacity();
// defaults // defaults
var color = s.color ? s.color : 'black'; var color = s.color ? s.color : 'black';
var blur = s.blur ? s.blur : 5; var blur = s.blur ? s.blur : 5;
@ -4094,8 +4100,8 @@ Kinetic.Shape = Kinetic.Node.extend({
y: 0 y: 0
}; };
if(s.alpha) { if(s.opacity) {
context.globalAlpha = s.alpha * aa; context.globalAlpha = s.opacity * aa;
} }
context.shadowColor = color; context.shadowColor = color;
context.shadowBlur = blur; context.shadowBlur = blur;
@ -4118,22 +4124,7 @@ Kinetic.Shape = Kinetic.Node.extend({
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var stage = this.getStage(); var stage = this.getStage();
// path detection // TODO: need to re-implement
if(this.attrs.detectionType === 'path') {
var pathCanvas = stage.pathCanvas;
var pathCanvasContext = pathCanvas.getContext();
this._draw(pathCanvas);
return pathCanvasContext.isPointInPath(pos.x, pos.y);
}
// pixel detection
if(this.imageData) {
var w = stage.attrs.width;
var alpha = this.imageData.data[((w * pos.y) + pos.x) * 4 + 3];
return (alpha);
}
// default // default
return false; return false;
@ -4160,34 +4151,44 @@ Kinetic.Shape = Kinetic.Node.extend({
} }
/* /*
* pre styles include alpha, linejoin * pre styles include opacity, linejoin
*/ */
var absAlpha = this.getAbsoluteAlpha(); var absOpacity = this.getAbsoluteOpacity();
if(absAlpha !== 1) { if(absOpacity !== 1) {
context.globalAlpha = absAlpha; context.globalAlpha = absOpacity;
} }
this.applyLineJoin(context); this.applyLineJoin(context);
// draw the shape // draw the shape
this.appliedShadow = false; this.appliedShadow = false;
var wl = Kinetic.Global.BUFFER_WHITELIST;
var bl = Kinetic.Global.BUFFER_BLACKLIST;
var attrs = {};
if(canvas.name === 'buffer') { if(canvas.name === 'buffer') {
var fill = this.attrs.fill; for(var n = 0; n < wl.length; n++) {
var stroke = this.attrs.stroke; var key = wl[n];
attrs[key] = this.attrs[key];
if(fill) { if(this.attrs[key]) {
this.attrs.fill = '#' + this.colorKey; this.attrs[key] = '#' + this.colorKey;
} }
if(stroke) {
this.attrs.stroke = '#' + this.colorKey;
} }
for(var n = 0; n < bl.length; n++) {
var key = bl[n];
attrs[key] = this.attrs[key];
this.attrs[key] = '';
}
context.globalAlpha = 1;
} }
this.attrs.drawFunc.call(this, canvas.getContext()); this.attrs.drawFunc.call(this, canvas.getContext());
if(canvas.name === 'buffer') { if(canvas.name === 'buffer') {
this.attrs.fill = fill; var bothLists = wl.concat(bl);
this.attrs.stroke = stroke; for(var n = 0; n < bothLists.length; n++) {
var key = bothLists[n];
this.attrs[key] = attrs[key];
}
} }
context.restore(); context.restore();

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
src/Container.js
View File

@ -65,17 +65,19 @@ Kinetic.Container = Kinetic.Node.extend({
child.parent = this; child.parent = this;
// set color key // set color key
if(child.nodeType === 'Shape') {
var shapes = Kinetic.Global.shapes; var shapes = Kinetic.Global.shapes;
var key; var key;
while (true) { while(true) {
key = Kinetic.Type._getRandomColorKey(); key = Kinetic.Type._getRandomColorKey();
if (key && !(key in shapes)) { if(key && !( key in shapes)) {
break; break;
} }
} }
child.colorKey = key; child.colorKey = key;
shapes[key] = child; shapes[key] = child;
}
this.children.push(child); this.children.push(child);
var stage = child.getStage(); var stage = child.getStage();
@ -247,8 +249,9 @@ Kinetic.Container = Kinetic.Node.extend({
var children = this.children; var children = this.children;
for(var n = 0; n < children.length; n++) { for(var n = 0; n < children.length; n++) {
var child = children[n]; var child = children[n];
if(canvas.name !== 'buffer' || child.getListening()) {
if(child.nodeType === 'Shape') { if(child.nodeType === 'Shape') {
if(child.isVisible() && stage.isVisible()) { if(child.isVisible()) {
child._draw(canvas); child._draw(canvas);
} }
} }
@ -256,6 +259,7 @@ Kinetic.Container = Kinetic.Node.extend({
child.draw(canvas); child.draw(canvas);
} }
} }
}
}, },
/** /**
* set children indices * set children indices

2
src/Global.js
View File

@ -10,6 +10,8 @@ Kinetic.Filters = {};
Kinetic.Plugins = {}; Kinetic.Plugins = {};
Kinetic.Global = { Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'], BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
BUFFER_BLACKLIST: ['shadow'],
stages: [], stages: [],
idCounter: 0, idCounter: 0,
tempNodes: {}, tempNodes: {},

2
src/Group.js
View File

@ -12,7 +12,7 @@
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]

25
src/Layer.js
View File

@ -15,7 +15,7 @@
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -59,6 +59,15 @@ Kinetic.Layer = Kinetic.Container.extend({
draw: function(canvas) { draw: function(canvas) {
this._draw(canvas); this._draw(canvas);
}, },
/**
* draw children nodes on buffer. this includes any groups
* or shapes
* @name drawBuffer
* @methodOf Kinetic.Layer.prototype
*/
drawBuffer: function() {
this.draw(this.bufferCanvas);
},
/** /**
* set before draw handler * set before draw handler
* @name beforeDraw * @name beforeDraw
@ -151,8 +160,10 @@ Kinetic.Layer = Kinetic.Container.extend({
if(this.attrs.clearBeforeDraw) { if(this.attrs.clearBeforeDraw) {
canvas.clear(); canvas.clear();
if(canvas.name !== 'buffer') {
this.bufferCanvas.clear(); this.bufferCanvas.clear();
} }
}
if(this.isVisible()) { if(this.isVisible()) {
// draw custom func // draw custom func
@ -160,11 +171,19 @@ Kinetic.Layer = Kinetic.Container.extend({
this.attrs.drawFunc.call(this); this.attrs.drawFunc.call(this);
} }
// draw children on front canvas if(canvas.name !== 'buffer') {
this._drawChildren(canvas); this._drawChildren(canvas);
// draw children on back canvas if(this.getListening()) {
this._drawChildren(this.bufferCanvas); this._drawChildren(this.bufferCanvas);
} }
}
// buffer canvas
else {
if(this.getListening()) {
this._drawChildren(canvas);
}
}
}
// after draw handler // after draw handler
if(this.afterDrawFunc !== undefined) { if(this.afterDrawFunc !== undefined) {

47
src/Node.js
View File

@ -13,7 +13,7 @@
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -37,7 +37,7 @@ Kinetic.Node = Kinetic.Class.extend({
visible: true, visible: true,
listening: true, listening: true,
name: undefined, name: undefined,
alpha: 1, opacity: 1,
x: 0, x: 0,
y: 0, y: 0,
scale: { scale: {
@ -561,19 +561,19 @@ Kinetic.Node = Kinetic.Class.extend({
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
}, },
/** /**
* get absolute alpha * get absolute opacity
* @name getAbsoluteAlpha * @name getAbsoluteOpacity
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
getAbsoluteAlpha: function() { getAbsoluteOpacity: function() {
var absAlpha = 1; var absOpacity = 1;
var node = this; var node = this;
// traverse upwards // traverse upwards
while(node.nodeType !== 'Stage') { while(node.nodeType !== 'Stage') {
absAlpha *= node.attrs.alpha; absOpacity *= node.attrs.opacity;
node = node.parent; node = node.parent;
} }
return absAlpha; return absOpacity;
}, },
/** /**
* determine if node is currently in drag and drop mode * determine if node is currently in drag and drop mode
@ -650,7 +650,7 @@ Kinetic.Node = Kinetic.Class.extend({
}, },
/** /**
* transition node to another state. Any property that can accept a real * transition node to another state. Any property that can accept a real
* number can be transitioned, including x, y, rotation, alpha, strokeWidth, * number can be transitioned, including x, y, rotation, opacity, strokeWidth,
* radius, scale.x, scale.y, offset.x, offset.y, etc. * radius, scale.x, scale.y, offset.x, offset.y, etc.
* @name transitionTo * @name transitionTo
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
@ -1079,7 +1079,7 @@ Kinetic.Node._addGetter = function(constructor, attr) {
}; };
}; };
// add getters setters // add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']); Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'rotation', 'opacity', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']); Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
/** /**
@ -1096,13 +1096,6 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
* @param {Number} y * @param {Number} y
*/ */
/**
* set detection type
* @name setDetectionType
* @methodOf Kinetic.Node.prototype
* @param {String} type can be path or pixel
*/
/** /**
* set node rotation in radians * set node rotation in radians
* @name setRotation * @name setRotation
@ -1111,12 +1104,12 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
*/ */
/** /**
* set alpha. Alpha values range from 0 to 1. * set opacity. Opacity values range from 0 to 1.
* A node with an alpha of 0 is fully transparent, and a node * A node with an opacity of 0 is fully transparent, and a node
* with an alpha of 1 is fully opaque * with an opacity of 1 is fully opaque
* @name setAlpha * @name setOpacity
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
* @param {Object} alpha * @param {Object} opacity
*/ */
/** /**
@ -1192,12 +1185,6 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
/**
* get detection type. Can be path or pixel
* @name getDetectionType
* @methodOf Kinetic.Node.prototype
*/
/** /**
* get rotation in radians * get rotation in radians
* @name getRotation * @name getRotation
@ -1205,8 +1192,8 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
*/ */
/** /**
* get alpha. * get opacity.
* @name getAlpha * @name getOpacity
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */

69
src/Shape.js
View File

@ -33,17 +33,15 @@
* @config {Obect} [config.shadow.blur.offset] * @config {Obect} [config.shadow.blur.offset]
* @config {Number} [config.shadow.blur.offset.x] * @config {Number} [config.shadow.blur.offset.x]
* @config {Number} [config.shadow.blur.offset.y] * @config {Number} [config.shadow.blur.offset.y]
* @config {Number} [config.shadow.alpha] shadow alpha. Can be any real number * @config {Number} [config.shadow.opacity] shadow opacity. Can be any real number
* between 0 and 1 * between 0 and 1
* @config {String} [config.detectionType] shape detection type. Can be path or pixel.
* The default is path because it performs better
* @param {Number} [config.x] * @param {Number} [config.x]
* @param {Number} [config.y] * @param {Number} [config.y]
* @param {Boolean} [config.visible] * @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -63,10 +61,6 @@
*/ */
Kinetic.Shape = Kinetic.Node.extend({ Kinetic.Shape = Kinetic.Node.extend({
init: function(config) { init: function(config) {
this.setDefaultAttrs({
detectionType: 'path'
});
this.nodeType = 'Shape'; this.nodeType = 'Shape';
this.appliedShadow = false; this.appliedShadow = false;
@ -287,7 +281,7 @@ Kinetic.Shape = Kinetic.Node.extend({
_applyShadow: function(context) { _applyShadow: function(context) {
var s = this.attrs.shadow; var s = this.attrs.shadow;
if(s) { if(s) {
var aa = this.getAbsoluteAlpha(); var aa = this.getAbsoluteOpacity();
// defaults // defaults
var color = s.color ? s.color : 'black'; var color = s.color ? s.color : 'black';
var blur = s.blur ? s.blur : 5; var blur = s.blur ? s.blur : 5;
@ -296,8 +290,8 @@ Kinetic.Shape = Kinetic.Node.extend({
y: 0 y: 0
}; };
if(s.alpha) { if(s.opacity) {
context.globalAlpha = s.alpha * aa; context.globalAlpha = s.opacity * aa;
} }
context.shadowColor = color; context.shadowColor = color;
context.shadowBlur = blur; context.shadowBlur = blur;
@ -320,22 +314,7 @@ Kinetic.Shape = Kinetic.Node.extend({
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var stage = this.getStage(); var stage = this.getStage();
// path detection // TODO: need to re-implement
if(this.attrs.detectionType === 'path') {
var pathCanvas = stage.pathCanvas;
var pathCanvasContext = pathCanvas.getContext();
this._draw(pathCanvas);
return pathCanvasContext.isPointInPath(pos.x, pos.y);
}
// pixel detection
if(this.imageData) {
var w = stage.attrs.width;
var alpha = this.imageData.data[((w * pos.y) + pos.x) * 4 + 3];
return (alpha);
}
// default // default
return false; return false;
@ -362,34 +341,44 @@ Kinetic.Shape = Kinetic.Node.extend({
} }
/* /*
* pre styles include alpha, linejoin * pre styles include opacity, linejoin
*/ */
var absAlpha = this.getAbsoluteAlpha(); var absOpacity = this.getAbsoluteOpacity();
if(absAlpha !== 1) { if(absOpacity !== 1) {
context.globalAlpha = absAlpha; context.globalAlpha = absOpacity;
} }
this.applyLineJoin(context); this.applyLineJoin(context);
// draw the shape // draw the shape
this.appliedShadow = false; this.appliedShadow = false;
var wl = Kinetic.Global.BUFFER_WHITELIST;
var bl = Kinetic.Global.BUFFER_BLACKLIST;
var attrs = {};
if(canvas.name === 'buffer') { if(canvas.name === 'buffer') {
var fill = this.attrs.fill; for(var n = 0; n < wl.length; n++) {
var stroke = this.attrs.stroke; var key = wl[n];
attrs[key] = this.attrs[key];
if(fill) { if(this.attrs[key]) {
this.attrs.fill = '#' + this.colorKey; this.attrs[key] = '#' + this.colorKey;
} }
if(stroke) {
this.attrs.stroke = '#' + this.colorKey;
} }
for(var n = 0; n < bl.length; n++) {
var key = bl[n];
attrs[key] = this.attrs[key];
this.attrs[key] = '';
}
context.globalAlpha = 1;
} }
this.attrs.drawFunc.call(this, canvas.getContext()); this.attrs.drawFunc.call(this, canvas.getContext());
if(canvas.name === 'buffer') { if(canvas.name === 'buffer') {
this.attrs.fill = fill; var bothLists = wl.concat(bl);
this.attrs.stroke = stroke; for(var n = 0; n < bothLists.length; n++) {
var key = bothLists[n];
this.attrs[key] = attrs[key];
}
} }
context.restore(); context.restore();

4
src/Stage.js
View File

@ -15,7 +15,7 @@
* @param {Boolean} [config.listening] whether or not the node is listening for events * @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id * @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name * @param {String} [config.name] non-unique name
* @param {Number} [config.alpha] determines node opacity. Can be any number between 0 and 1 * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] * @param {Object} [config.scale]
* @param {Number} [config.scale.x] * @param {Number} [config.scale.x]
* @param {Number} [config.scale.y] * @param {Number} [config.scale.y]
@ -401,6 +401,7 @@ Kinetic.Stage = Kinetic.Container.extend({
for(var n = layers.length - 1; n >= 0; n--) { for(var n = layers.length - 1; n >= 0; n--) {
var layer = layers[n]; var layer = layers[n];
var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data; var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
if(p[3] === 255) {
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]); var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
shape = Kinetic.Global.shapes[colorKey]; shape = Kinetic.Global.shapes[colorKey];
var isDragging = Kinetic.Global.drag.moving; var isDragging = Kinetic.Global.drag.moving;
@ -409,6 +410,7 @@ Kinetic.Stage = Kinetic.Container.extend({
return shape; return shape;
} }
} }
}
return null; return null;
}, },

2
src/util/Canvas.js
View File

@ -92,8 +92,6 @@ Kinetic.Canvas.prototype = {
*/ */
strip: function() { strip: function() {
var context = this.context; var context = this.context;
context.drawImage = function() {
};
}, },
/** /**
* toDataURL * toDataURL

2
src/util/Type.js
View File

@ -252,7 +252,7 @@ Kinetic.Type = {
} }
}, },
_rgbToHex: function(r, g, b) { _rgbToHex: function(r, g, b) {
return ((r << 16) | (g << 8) | b).toString(16); return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}, },
_getRandomColorKey: function() { _getRandomColorKey: function() {
var r = Math.round(Math.random() * 255); var r = Math.round(Math.random() * 255);

52
tests/js/unitTests.js
View File

@ -129,7 +129,7 @@ Test.prototype.tests = {
test(circle.getName() === 'myCircle', 'circle name should be myCircle'); test(circle.getName() === 'myCircle', 'circle name should be myCircle');
}, },
'STAGE - add shape with alpha': function(containerId) { 'STAGE - add shape with opacity': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -203,7 +203,7 @@ Test.prototype.tests = {
group.add(circle); group.add(circle);
layer.draw(); layer.draw();
var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}'; var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}';
//console.log(stage.toJSON()) //console.log(stage.toJSON())
//test(stage.toJSON() === expectedJson, 'problem with serialization'); //test(stage.toJSON() === expectedJson, 'problem with serialization');
@ -290,7 +290,7 @@ Test.prototype.tests = {
height: 200 height: 200
}); });
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}'; var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}';
stage.load(json); stage.load(json);
test(stage.toJSON() === json, "problem loading stage with json"); test(stage.toJSON() === json, "problem loading stage with json");
@ -333,7 +333,7 @@ Test.prototype.tests = {
test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle'); test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
//console.log(stage.toJSON()) //console.log(stage.toJSON())
var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}'; var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
//console.log(stage.toJSON()) //console.log(stage.toJSON())
//test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape"); //test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
@ -364,7 +364,7 @@ Test.prototype.tests = {
this.fill(context); this.fill(context);
this.stroke(context); this.stroke(context);
}; };
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}'; var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
stage.load(json); stage.load(json);
var customShape = stage.get('#myTriangle')[0]; var customShape = stage.get('#myTriangle')[0];
@ -657,7 +657,7 @@ Test.prototype.tests = {
test(stage.names['newRectName'][0].getName() === 'newRectName', 'new rect name not in names hash'); test(stage.names['newRectName'][0].getName() === 'newRectName', 'new rect name not in names hash');
test(stage.names['myRect'] === undefined, 'old rect name is still in names hash'); test(stage.names['myRect'] === undefined, 'old rect name is still in names hash');
}, },
'STAGE - set shape and layer alpha to 0.5': function(containerId) { 'STAGE - set shape and layer opacity to 0.5': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -678,8 +678,8 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
test(circle.getAbsoluteAlpha() === 0.25, 'abs alpha should be 0.25'); test(circle.getAbsoluteAlpha() === 0.25, 'abs opacity should be 0.25');
test(layer.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5'); test(layer.getAbsoluteAlpha() === 0.5, 'abs opacity should be 0.5');
}, },
'STAGE - remove shape without adding its parent to stage': function(containerId) { 'STAGE - remove shape without adding its parent to stage': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -860,7 +860,7 @@ Test.prototype.tests = {
layer.add(darth); layer.add(darth);
stage.add(layer); stage.add(layer);
var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}'; var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
//console.log(stage.toJSON()) //console.log(stage.toJSON())
//test(stage.toJSON() === expectedJson, 'problem with serializing stage with image'); //test(stage.toJSON() === expectedJson, 'problem with serializing stage with image');
}; };
@ -875,7 +875,7 @@ Test.prototype.tests = {
height: 200 height: 200
}); });
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listen":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}'; var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listen":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listen":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
stage.load(json); stage.load(json);
var image = stage.get('#darth')[0]; var image = stage.get('#darth')[0];
image.setImage(imageObj); image.setImage(imageObj);
@ -1789,7 +1789,7 @@ Test.prototype.tests = {
color: 'black', color: 'black',
blur: 3, blur: 3,
offset: [3, 1], offset: [3, 1],
alpha: 0.3 opacity: 0.3
} }
}); });
@ -2192,7 +2192,7 @@ Test.prototype.tests = {
color: 'black', color: 'black',
blur: 10, blur: 10,
offset: [20, 20], offset: [20, 20],
alpha: 0.5 opacity: 0.5
}, },
draggable: true draggable: true
}); });
@ -2353,7 +2353,7 @@ Test.prototype.tests = {
color: 'black', color: 'black',
blur: 10, blur: 10,
offset: [20, 20], offset: [20, 20],
alpha: 0.2 opacity: 0.2
} }
}); });
@ -2631,7 +2631,7 @@ Test.prototype.tests = {
test(group.get('Group').length === 0, 'group should have 0 groups'); test(group.get('Group').length === 0, 'group should have 0 groups');
}, },
'SHAPE - text getters and setters': function(containerId) { '*SHAPE - text getters and setters': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -2660,11 +2660,10 @@ Test.prototype.tests = {
color: 'black', color: 'black',
blur: 1, blur: 1,
offset: [10, 10], offset: [10, 10],
alpha: 0.2 opacity: 0.2
}, },
cornerRadius: 10, cornerRadius: 10,
draggable: true, draggable: true
detectionType: 'path'
}); });
// center text box // center text box
@ -2677,6 +2676,7 @@ Test.prototype.tests = {
* test getters and setters * test getters and setters
*/ */
/*
test(text.getX() === stage.getWidth() / 2, 'text box x should be in center of stage'); test(text.getX() === stage.getWidth() / 2, 'text box x should be in center of stage');
test(text.getY() === stage.getHeight() / 2, 'text box y should be in center of stage'); test(text.getY() === stage.getHeight() / 2, 'text box y should be in center of stage');
test(text.getStroke() === '#555', 'text box stroke should be #555'); test(text.getStroke() === '#555', 'text box stroke should be #555');
@ -2744,7 +2744,11 @@ Test.prototype.tests = {
test(text.getCornerRadius() === 20, 'text box corner radius should be 20'); test(text.getCornerRadius() === 20, 'text box corner radius should be 20');
test(text.getDraggable() === false, 'text draggable should be false'); test(text.getDraggable() === false, 'text draggable should be false');
test(text.getDetectionType() === 'pixel', 'text detection type should be pixel'); test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
*/
document.body.appendChild(layer.bufferCanvas.element)
//layer.setListening(false);
layer.drawBuffer();
}, },
'SHAPE - text multi line': function(containerId) { 'SHAPE - text multi line': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -2775,7 +2779,7 @@ Test.prototype.tests = {
color: 'black', color: 'black',
blur: 1, blur: 1,
offset: [10, 10], offset: [10, 10],
alpha: 0.2 opacity: 0.2
}, },
cornerRadius: 10, cornerRadius: 10,
draggable: true, draggable: true,
@ -4049,7 +4053,7 @@ Test.prototype.tests = {
test(circle.isVisible() === true, 'circle should be visible'); test(circle.isVisible() === true, 'circle should be visible');
}, },
'SHAPE - set shape alpha to 0.5': function(containerId) { 'SHAPE - set shape opacity to 0.5': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -4069,7 +4073,7 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
}, },
'SHAPE - set shape alpha to 0.5 then back to 1': function(containerId) { 'SHAPE - set shape opacity to 0.5 then back to 1': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -4089,12 +4093,12 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
test(circle.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5'); test(circle.getAbsoluteAlpha() === 0.5, 'abs opacity should be 0.5');
circle.setAlpha(1); circle.setAlpha(1);
layer.draw(); layer.draw();
test(circle.getAbsoluteAlpha() === 1, 'abs alpha should be 1'); test(circle.getAbsoluteAlpha() === 1, 'abs opacity should be 1');
}, },
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
// LAYERING tests // LAYERING tests
@ -4679,7 +4683,7 @@ Test.prototype.tests = {
color: 'black', color: 'black',
blur: 2, blur: 2,
offset: [10, 10], offset: [10, 10],
alpha: 0.5 opacity: 0.5
}, },
draggable: true draggable: true
}); });
@ -4729,7 +4733,7 @@ Test.prototype.tests = {
color: 'maroon', color: 'maroon',
blur: 2, blur: 2,
offset: [10, 10], offset: [10, 10],
alpha: 0.5 opacity: 0.5
}, },
draggable: true draggable: true
}); });