mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
greatly improved the OO design for draw logic. removed unecessary _draw() and __draw() methods
This commit is contained in:
ericdrowell
parent
f1bc2fe4e8
commit
432533ae4a
100
dist/kinetic-core.js
vendored
100
dist/kinetic-core.js
vendored
@ -3,7 +3,7 @@
|
||||
* http://www.kineticjs.com/
|
||||
* Copyright 2012, Eric Rowell
|
||||
* Licensed under the MIT or GPL Version 2 licenses.
|
||||
* Date: Oct 06 2012
|
||||
* Date: Oct 07 2012
|
||||
*
|
||||
* Copyright (C) 2011 - 2012 by Eric Rowell
|
||||
*
|
||||
@ -1742,7 +1742,7 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
getAbsoluteOpacity: function() {
|
||||
var absOpacity = this.getOpacity();
|
||||
if (this.getParent()) {
|
||||
if(this.getParent()) {
|
||||
absOpacity *= this.getParent().getAbsoluteOpacity();
|
||||
}
|
||||
return absOpacity;
|
||||
@ -1989,16 +1989,17 @@ Kinetic.Node.prototype = {
|
||||
var mimeType = config && config.mimeType ? config.mimeType : null;
|
||||
var quality = config && config.quality ? config.quality : null;
|
||||
var canvas;
|
||||
|
||||
//if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas
|
||||
if(config && config.width && config.height) {
|
||||
canvas = new Kinetic.Canvas(config.width, config.height);
|
||||
}
|
||||
else {
|
||||
canvas = this.getStage().bufferCanvas;
|
||||
canvas.clear();
|
||||
}
|
||||
|
||||
var context = canvas.getContext();
|
||||
canvas.clear();
|
||||
this._draw(canvas);
|
||||
this.draw(canvas);
|
||||
return canvas.toDataURL(mimeType, quality);
|
||||
},
|
||||
/**
|
||||
@ -2225,25 +2226,8 @@ Kinetic.Node.prototype = {
|
||||
}
|
||||
}
|
||||
},
|
||||
_draw: function(canvas) {
|
||||
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
|
||||
if(this.__draw) {
|
||||
this.__draw(canvas);
|
||||
}
|
||||
|
||||
var children = this.children;
|
||||
if(children) {
|
||||
for(var n = 0; n < children.length; n++) {
|
||||
var child = children[n];
|
||||
if(child.draw) {
|
||||
child.draw(canvas);
|
||||
}
|
||||
else {
|
||||
child._draw(canvas);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
_shouldDraw: function(canvas) {
|
||||
return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
|
||||
}
|
||||
};
|
||||
|
||||
@ -2309,12 +2293,12 @@ Kinetic.Node._createNode = function(obj, container) {
|
||||
else {
|
||||
type = obj.nodeType;
|
||||
}
|
||||
|
||||
|
||||
// if container was passed in, add it to attrs
|
||||
if (container) {
|
||||
obj.attrs.container = container;
|
||||
if(container) {
|
||||
obj.attrs.container = container;
|
||||
}
|
||||
|
||||
|
||||
var no = new Kinetic[type](obj.attrs);
|
||||
if(obj.children) {
|
||||
for(var n = 0; n < obj.children.length; n++) {
|
||||
@ -2491,7 +2475,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
|
||||
* @name getListening
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// Container
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
@ -2597,13 +2580,14 @@ Kinetic.Container.prototype = {
|
||||
var collection = new Kinetic.Collection();
|
||||
// ID selector
|
||||
if(selector.charAt(0) === '#') {
|
||||
var node = this._getNodeById(selector.slice(1));
|
||||
if (node) collection.push(node);
|
||||
var node = this._getNodeById(selector.slice(1));
|
||||
if(node)
|
||||
collection.push(node);
|
||||
}
|
||||
// name selector
|
||||
else if(selector.charAt(0) === '.') {
|
||||
var nodeList = this._getNodesByName(selector.slice(1));
|
||||
Kinetic.Collection.apply(collection, nodeList);
|
||||
var nodeList = this._getNodesByName(selector.slice(1));
|
||||
Kinetic.Collection.apply(collection, nodeList);
|
||||
}
|
||||
// unrecognized selector, pass to children
|
||||
else {
|
||||
@ -2625,7 +2609,7 @@ Kinetic.Container.prototype = {
|
||||
},
|
||||
_getNodesByName: function(key) {
|
||||
var arr = this.getStage().names[key] || [];
|
||||
return this._getDescendants(arr);
|
||||
return this._getDescendants(arr);
|
||||
},
|
||||
_get: function(selector) {
|
||||
var retArr = Kinetic.Node.prototype._get.call(this, selector);
|
||||
@ -2650,7 +2634,7 @@ Kinetic.Container.prototype = {
|
||||
return obj;
|
||||
},
|
||||
_getDescendants: function(arr) {
|
||||
var retArr = [];
|
||||
var retArr = [];
|
||||
for(var n = 0; n < arr.length; n++) {
|
||||
var node = arr[n];
|
||||
if(this.isAncestorOf(node)) {
|
||||
@ -2721,6 +2705,15 @@ Kinetic.Container.prototype = {
|
||||
for(var n = 0; n < this.children.length; n++) {
|
||||
this.children[n].index = n;
|
||||
}
|
||||
},
|
||||
draw: function(canvas) {
|
||||
if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
|
||||
var children = this.children;
|
||||
var length = children.length;
|
||||
for(var n = 0; n < length; n++) {
|
||||
children[n].draw(canvas);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
|
||||
@ -2790,13 +2783,11 @@ Kinetic.Stage.prototype = {
|
||||
this.setAttr('container', container);
|
||||
},
|
||||
/**
|
||||
* draw children
|
||||
* draw layers
|
||||
* @name draw
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
draw: function() {
|
||||
this._draw();
|
||||
},
|
||||
|
||||
/**
|
||||
* set stage size
|
||||
* @name setSize
|
||||
@ -3522,12 +3513,24 @@ Kinetic.Layer.prototype = {
|
||||
this.beforeDrawFunc.call(this);
|
||||
}
|
||||
|
||||
var canvases = [];
|
||||
if(canvas) {
|
||||
this._draw(canvas);
|
||||
canvases.push(canvas);
|
||||
}
|
||||
else {
|
||||
this._draw(this.getCanvas());
|
||||
this._draw(this.bufferCanvas);
|
||||
canvases.push(this.getCanvas());
|
||||
canvases.push(this.bufferCanvas);
|
||||
}
|
||||
|
||||
var length = canvases.length;
|
||||
for(var n = 0; n < length; n++) {
|
||||
var canvas = canvases[n];
|
||||
if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
|
||||
if(this.attrs.clearBeforeDraw) {
|
||||
canvas.clear();
|
||||
}
|
||||
Kinetic.Container.prototype.draw.call(this, canvas);
|
||||
}
|
||||
}
|
||||
|
||||
// after draw handler
|
||||
@ -3672,7 +3675,7 @@ Kinetic.Layer.prototype = {
|
||||
* specified, then "image/png" will result. For "image/jpeg", specify a quality
|
||||
* level as quality (range 0.0 - 1.0). Note that this method works
|
||||
* differently from toDataURL() for other nodes because it generates an absolute dataURL
|
||||
* based on what's draw on the layer, rather than drawing
|
||||
* based on what's currently drawn on the layer, rather than drawing
|
||||
* the current state of each child node
|
||||
* @name toDataURL
|
||||
* @methodOf Kinetic.Layer.prototype
|
||||
@ -3712,11 +3715,6 @@ Kinetic.Layer.prototype = {
|
||||
} catch(e) {
|
||||
Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
|
||||
}
|
||||
},
|
||||
__draw: function(canvas) {
|
||||
if(this.attrs.clearBeforeDraw) {
|
||||
canvas.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
|
||||
@ -4218,7 +4216,7 @@ Kinetic.Shape.prototype = {
|
||||
var stage = this.getStage();
|
||||
var bufferCanvas = stage.bufferCanvas;
|
||||
bufferCanvas.clear();
|
||||
this._draw(bufferCanvas);
|
||||
this.draw(bufferCanvas);
|
||||
var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
|
||||
return p[3] > 0;
|
||||
},
|
||||
@ -4226,8 +4224,8 @@ Kinetic.Shape.prototype = {
|
||||
Kinetic.Node.prototype.remove.call(this);
|
||||
delete Kinetic.Global.shapes[this.colorKey];
|
||||
},
|
||||
__draw: function(canvas) {
|
||||
if(this.attrs.drawFunc) {
|
||||
draw: function(canvas) {
|
||||
if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
|
||||
var stage = this.getStage();
|
||||
var context = canvas.getContext();
|
||||
var family = [];
|
||||
|
||||
8
dist/kinetic-core.min.js
vendored
8
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
@ -103,13 +103,14 @@ Kinetic.Container.prototype = {
|
||||
var collection = new Kinetic.Collection();
|
||||
// ID selector
|
||||
if(selector.charAt(0) === '#') {
|
||||
var node = this._getNodeById(selector.slice(1));
|
||||
if (node) collection.push(node);
|
||||
var node = this._getNodeById(selector.slice(1));
|
||||
if(node)
|
||||
collection.push(node);
|
||||
}
|
||||
// name selector
|
||||
else if(selector.charAt(0) === '.') {
|
||||
var nodeList = this._getNodesByName(selector.slice(1));
|
||||
Kinetic.Collection.apply(collection, nodeList);
|
||||
var nodeList = this._getNodesByName(selector.slice(1));
|
||||
Kinetic.Collection.apply(collection, nodeList);
|
||||
}
|
||||
// unrecognized selector, pass to children
|
||||
else {
|
||||
@ -131,7 +132,7 @@ Kinetic.Container.prototype = {
|
||||
},
|
||||
_getNodesByName: function(key) {
|
||||
var arr = this.getStage().names[key] || [];
|
||||
return this._getDescendants(arr);
|
||||
return this._getDescendants(arr);
|
||||
},
|
||||
_get: function(selector) {
|
||||
var retArr = Kinetic.Node.prototype._get.call(this, selector);
|
||||
@ -156,7 +157,7 @@ Kinetic.Container.prototype = {
|
||||
return obj;
|
||||
},
|
||||
_getDescendants: function(arr) {
|
||||
var retArr = [];
|
||||
var retArr = [];
|
||||
for(var n = 0; n < arr.length; n++) {
|
||||
var node = arr[n];
|
||||
if(this.isAncestorOf(node)) {
|
||||
@ -227,6 +228,15 @@ Kinetic.Container.prototype = {
|
||||
for(var n = 0; n < this.children.length; n++) {
|
||||
this.children[n].index = n;
|
||||
}
|
||||
},
|
||||
draw: function(canvas) {
|
||||
if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
|
||||
var children = this.children;
|
||||
var length = children.length;
|
||||
for(var n = 0; n < length; n++) {
|
||||
children[n].draw(canvas);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
|
||||
|
||||
25
src/Layer.js
25
src/Layer.js
@ -60,12 +60,24 @@ Kinetic.Layer.prototype = {
|
||||
this.beforeDrawFunc.call(this);
|
||||
}
|
||||
|
||||
var canvases = [];
|
||||
if(canvas) {
|
||||
this._draw(canvas);
|
||||
canvases.push(canvas);
|
||||
}
|
||||
else {
|
||||
this._draw(this.getCanvas());
|
||||
this._draw(this.bufferCanvas);
|
||||
canvases.push(this.getCanvas());
|
||||
canvases.push(this.bufferCanvas);
|
||||
}
|
||||
|
||||
var length = canvases.length;
|
||||
for(var n = 0; n < length; n++) {
|
||||
var canvas = canvases[n];
|
||||
if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
|
||||
if(this.attrs.clearBeforeDraw) {
|
||||
canvas.clear();
|
||||
}
|
||||
Kinetic.Container.prototype.draw.call(this, canvas);
|
||||
}
|
||||
}
|
||||
|
||||
// after draw handler
|
||||
@ -210,7 +222,7 @@ Kinetic.Layer.prototype = {
|
||||
* specified, then "image/png" will result. For "image/jpeg", specify a quality
|
||||
* level as quality (range 0.0 - 1.0). Note that this method works
|
||||
* differently from toDataURL() for other nodes because it generates an absolute dataURL
|
||||
* based on what's draw on the layer, rather than drawing
|
||||
* based on what's currently drawn on the layer, rather than drawing
|
||||
* the current state of each child node
|
||||
* @name toDataURL
|
||||
* @methodOf Kinetic.Layer.prototype
|
||||
@ -250,11 +262,6 @@ Kinetic.Layer.prototype = {
|
||||
} catch(e) {
|
||||
Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
|
||||
}
|
||||
},
|
||||
__draw: function(canvas) {
|
||||
if(this.attrs.clearBeforeDraw) {
|
||||
canvas.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
|
||||
|
||||
40
src/Node.js
40
src/Node.js
@ -519,7 +519,7 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
getAbsoluteOpacity: function() {
|
||||
var absOpacity = this.getOpacity();
|
||||
if (this.getParent()) {
|
||||
if(this.getParent()) {
|
||||
absOpacity *= this.getParent().getAbsoluteOpacity();
|
||||
}
|
||||
return absOpacity;
|
||||
@ -766,16 +766,17 @@ Kinetic.Node.prototype = {
|
||||
var mimeType = config && config.mimeType ? config.mimeType : null;
|
||||
var quality = config && config.quality ? config.quality : null;
|
||||
var canvas;
|
||||
|
||||
//if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas
|
||||
if(config && config.width && config.height) {
|
||||
canvas = new Kinetic.Canvas(config.width, config.height);
|
||||
}
|
||||
else {
|
||||
canvas = this.getStage().bufferCanvas;
|
||||
canvas.clear();
|
||||
}
|
||||
|
||||
var context = canvas.getContext();
|
||||
canvas.clear();
|
||||
this._draw(canvas);
|
||||
this.draw(canvas);
|
||||
return canvas.toDataURL(mimeType, quality);
|
||||
},
|
||||
/**
|
||||
@ -1002,25 +1003,8 @@ Kinetic.Node.prototype = {
|
||||
}
|
||||
}
|
||||
},
|
||||
_draw: function(canvas) {
|
||||
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
|
||||
if(this.__draw) {
|
||||
this.__draw(canvas);
|
||||
}
|
||||
|
||||
var children = this.children;
|
||||
if(children) {
|
||||
for(var n = 0; n < children.length; n++) {
|
||||
var child = children[n];
|
||||
if(child.draw) {
|
||||
child.draw(canvas);
|
||||
}
|
||||
else {
|
||||
child._draw(canvas);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
_shouldDraw: function(canvas) {
|
||||
return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
|
||||
}
|
||||
};
|
||||
|
||||
@ -1086,12 +1070,12 @@ Kinetic.Node._createNode = function(obj, container) {
|
||||
else {
|
||||
type = obj.nodeType;
|
||||
}
|
||||
|
||||
|
||||
// if container was passed in, add it to attrs
|
||||
if (container) {
|
||||
obj.attrs.container = container;
|
||||
if(container) {
|
||||
obj.attrs.container = container;
|
||||
}
|
||||
|
||||
|
||||
var no = new Kinetic[type](obj.attrs);
|
||||
if(obj.children) {
|
||||
for(var n = 0; n < obj.children.length; n++) {
|
||||
@ -1267,4 +1251,4 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
|
||||
* determine if listening to events or not
|
||||
* @name getListening
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
*/
|
||||
@ -438,7 +438,7 @@ Kinetic.Shape.prototype = {
|
||||
var stage = this.getStage();
|
||||
var bufferCanvas = stage.bufferCanvas;
|
||||
bufferCanvas.clear();
|
||||
this._draw(bufferCanvas);
|
||||
this.draw(bufferCanvas);
|
||||
var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
|
||||
return p[3] > 0;
|
||||
},
|
||||
@ -446,8 +446,8 @@ Kinetic.Shape.prototype = {
|
||||
Kinetic.Node.prototype.remove.call(this);
|
||||
delete Kinetic.Global.shapes[this.colorKey];
|
||||
},
|
||||
__draw: function(canvas) {
|
||||
if(this.attrs.drawFunc) {
|
||||
draw: function(canvas) {
|
||||
if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
|
||||
var stage = this.getStage();
|
||||
var context = canvas.getContext();
|
||||
var family = [];
|
||||
|
||||
@ -63,13 +63,11 @@ Kinetic.Stage.prototype = {
|
||||
this.setAttr('container', container);
|
||||
},
|
||||
/**
|
||||
* draw children
|
||||
* draw layers
|
||||
* @name draw
|
||||
* @methodOf Kinetic.Stage.prototype
|
||||
*/
|
||||
draw: function() {
|
||||
this._draw();
|
||||
},
|
||||
|
||||
/**
|
||||
* set stage size
|
||||
* @name setSize
|
||||
|
||||
@ -937,9 +937,18 @@ Test.prototype.tests = {
|
||||
test(!layer2.isVisible(), 'layer2 should be invisible');
|
||||
test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');
|
||||
|
||||
layer2.show();
|
||||
test(layer2.isVisible(), 'layer2 should be visible');
|
||||
test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
|
||||
//console.log(layer2.toDataURL());
|
||||
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
//console.log(dataUrl);
|
||||
|
||||
layer2.show();
|
||||
//test(layer2.isVisible(), 'layer2 should be visible');
|
||||
//test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
'LAYER - beforeDraw and afterDraw': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -1007,7 +1016,7 @@ Test.prototype.tests = {
|
||||
circle.move(10, 0);
|
||||
layer.draw();
|
||||
}
|
||||
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
stage.toDataURL({
|
||||
@ -1420,10 +1429,10 @@ Test.prototype.tests = {
|
||||
});
|
||||
|
||||
/*
|
||||
* serialize the stage. The json should succeed because objects that have
|
||||
* methods, such as self, are not serialized, and will therefore avoid
|
||||
* circular json errors.
|
||||
*/
|
||||
* serialize the stage. The json should succeed because objects that have
|
||||
* methods, such as self, are not serialized, and will therefore avoid
|
||||
* circular json errors.
|
||||
*/
|
||||
var json = stage.toJSON();
|
||||
},
|
||||
'SHAPE - set fill after instantiation': function(containerId) {
|
||||
@ -1679,7 +1688,7 @@ Test.prototype.tests = {
|
||||
test(circle.getFill().repeat === 'no-repeat', 'circle fill repeat should be no-repeat');
|
||||
test(circle.getFill().offset.x === -200, 'circle fill offset x should be -200');
|
||||
test(circle.getFill().offset.y === -70, 'circle fill offset y should be -70');
|
||||
|
||||
|
||||
circle.setFill({
|
||||
start: {
|
||||
x: -35,
|
||||
@ -1691,15 +1700,15 @@ Test.prototype.tests = {
|
||||
},
|
||||
colorStops: [0, 'red', 1, 'blue']
|
||||
});
|
||||
|
||||
|
||||
test(circle.getFill().image === undefined, 'circle fill image should be undefined');
|
||||
|
||||
|
||||
circle.setFill({
|
||||
image: imageObj,
|
||||
repeat: 'no-repeat',
|
||||
offset: [-200, -70]
|
||||
});
|
||||
|
||||
|
||||
layer.draw();
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
@ -1880,8 +1889,7 @@ Test.prototype.tests = {
|
||||
});
|
||||
|
||||
layer.add(cachedShape);
|
||||
|
||||
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
cachedShape.createImageBuffer(function() {
|
||||
@ -2026,7 +2034,7 @@ Test.prototype.tests = {
|
||||
var line = new Kinetic.Line({
|
||||
points: [73, 160, 340, 23, 500, 109, 500, 180],
|
||||
stroke: 'blue',
|
||||
|
||||
|
||||
strokeWidth: 10,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
@ -2627,7 +2635,7 @@ Test.prototype.tests = {
|
||||
height: 50,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
|
||||
var green = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
@ -2635,7 +2643,7 @@ Test.prototype.tests = {
|
||||
height: 50,
|
||||
fill: 'green'
|
||||
});
|
||||
|
||||
|
||||
var blueCircle = new Kinetic.Circle({
|
||||
x: 350,
|
||||
y: 75,
|
||||
@ -2649,7 +2657,7 @@ Test.prototype.tests = {
|
||||
radius: 40,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
|
||||
var textpath = new Kinetic.TextPath({
|
||||
y: 35,
|
||||
textStroke: 'black',
|
||||
@ -2660,7 +2668,7 @@ Test.prototype.tests = {
|
||||
text: 'The quick brown fox jumped over the lazy dog\'s back',
|
||||
data: "M 10,10 300,150 550,150"
|
||||
});
|
||||
|
||||
|
||||
var path = new Kinetic.Path({
|
||||
x: 200,
|
||||
y: -75,
|
||||
@ -2675,10 +2683,10 @@ Test.prototype.tests = {
|
||||
opacity: 0.5
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
var poly = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth()/2,
|
||||
y: stage.getHeight()/2,
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 5,
|
||||
radius: 50,
|
||||
fill: 'green',
|
||||
@ -2717,14 +2725,14 @@ Test.prototype.tests = {
|
||||
test(layer.get('RegularPolygon').length === 0, 'layer should have 0 regular polygon');
|
||||
test(layer.get('TextPath').length === 0, 'layer should have 0 text path');
|
||||
test(layer.get('Path').length === 0, 'layer should have 0 path');
|
||||
|
||||
|
||||
test(layer2.get('Shape').length === 3, 'layer2 should have 3 shapes');
|
||||
test(layer2.get('Layer').length === 0, 'layer2 should have 0 layers');
|
||||
test(layer2.get('Group').length === 0, 'layer2 should have 0 group');
|
||||
test(layer2.get('RegularPolygon').length === 1, 'layer2 should have 1 regular polygon');
|
||||
test(layer2.get('TextPath').length === 1, 'layer2 should have 1 text path');
|
||||
test(layer2.get('Path').length === 1, 'layer2 should have 1 path');
|
||||
|
||||
|
||||
test(fooLayer.get('Shape').length === 0, 'layer should have 0 shapes');
|
||||
test(fooLayer.get('Group').length === 0, 'layer should have 0 groups');
|
||||
test(fooLayer.get('Rect').length === 0, 'layer should have 0 rects');
|
||||
@ -2937,12 +2945,12 @@ Test.prototype.tests = {
|
||||
draggable: true,
|
||||
detectionType: 'path'
|
||||
});
|
||||
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
//console.log(layer.toDataURL());
|
||||
|
||||
warn(layer.toDataURL() === dataUrls['multi line text with shadows'], 'multi line text with shadows data url is incorrect');
|
||||
},
|
||||
'SHAPE - change font size should update text data': function(containerId) {
|
||||
@ -4129,12 +4137,16 @@ Test.prototype.tests = {
|
||||
/*
|
||||
* test remove all events in name space
|
||||
*/
|
||||
circle.on('click.foo', function() { });
|
||||
circle.on('click.foo', function() { });
|
||||
circle.on('touch.foo', function() { });
|
||||
circle.on('click.bar', function() { });
|
||||
circle.on('touch.bar', function() { });
|
||||
|
||||
circle.on('click.foo', function() {
|
||||
});
|
||||
circle.on('click.foo', function() {
|
||||
});
|
||||
circle.on('touch.foo', function() {
|
||||
});
|
||||
circle.on('click.bar', function() {
|
||||
});
|
||||
circle.on('touch.bar', function() {
|
||||
});
|
||||
test(circle.eventListeners['click'].length === 3, 'circle should have 3 click listeners');
|
||||
test(circle.eventListeners['touch'].length === 2, 'circle should have 2 touch listeners');
|
||||
circle.off('.foo');
|
||||
@ -4631,14 +4643,14 @@ Test.prototype.tests = {
|
||||
layer.draw();
|
||||
},
|
||||
'STAGE - test stage.getStage()': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
|
||||
test (stage.getStage() !== undefined, 'stage is undefined');
|
||||
|
||||
|
||||
test(stage.getStage() !== undefined, 'stage is undefined');
|
||||
|
||||
//console.log(stage.getStage());
|
||||
},
|
||||
'LAYERING - move blue layer on top of green layer with setZIndex': function(containerId) {
|
||||
@ -4676,12 +4688,12 @@ Test.prototype.tests = {
|
||||
|
||||
blueLayer.setZIndex(1);
|
||||
|
||||
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
|
||||
test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');
|
||||
|
||||
stage.toDataURL({
|
||||
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
|
||||
test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');
|
||||
|
||||
stage.toDataURL({
|
||||
callback: function(dataUrl) {
|
||||
//console.log(dataUrl)
|
||||
//console.log(dataUrl)
|
||||
warn(dataUrls['blue on top of green'] === dataUrl, 'layer setZIndex is not working');
|
||||
}
|
||||
});
|
||||
@ -5180,7 +5192,6 @@ Test.prototype.tests = {
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
|
||||
},
|
||||
'PATH - moveTo with implied lineTos and trailing comma': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -5949,47 +5960,74 @@ Test.prototype.tests = {
|
||||
stage.add(layer);
|
||||
},
|
||||
'PATH - getPointOnLine for different directions': function() {
|
||||
var origo = {x: 0, y: 0};
|
||||
|
||||
var origo = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
var p, point;
|
||||
|
||||
|
||||
//point up left
|
||||
p = {x:-10, y: -10};
|
||||
p = {
|
||||
x: -10,
|
||||
y: -10
|
||||
};
|
||||
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
|
||||
test(point.x < 0 && point.y < 0, 'The new point should be up left');
|
||||
|
||||
|
||||
//point up right
|
||||
p = {x:10, y: -10};
|
||||
p = {
|
||||
x: 10,
|
||||
y: -10
|
||||
};
|
||||
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
|
||||
test(point.x > 0 && point.y < 0, 'The new point should be up right');
|
||||
|
||||
//point down right
|
||||
p = {x:10, y: 10};
|
||||
p = {
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
|
||||
test(point.x > 0 && point.y > 0, 'The new point should be down right');
|
||||
|
||||
//point down left
|
||||
p = {x:-10, y: 10};
|
||||
p = {
|
||||
x: -10,
|
||||
y: 10
|
||||
};
|
||||
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
|
||||
test(point.x < 0 && point.y > 0, 'The new point should be down left');
|
||||
|
||||
//point left
|
||||
p = {x:-10, y: 0};
|
||||
p = {
|
||||
x: -10,
|
||||
y: 0
|
||||
};
|
||||
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
|
||||
test(point.x == -10 && point.y == 0, 'The new point should be left');
|
||||
|
||||
//point up
|
||||
p = {x:0, y: -10};
|
||||
p = {
|
||||
x: 0,
|
||||
y: -10
|
||||
};
|
||||
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
|
||||
test(Math.abs(point.x) < 0.0000001 && point.y == -10, 'The new point should be up');
|
||||
|
||||
//point right
|
||||
p = {x:10, y: 0};
|
||||
p = {
|
||||
x: 10,
|
||||
y: 0
|
||||
};
|
||||
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
|
||||
test(point.x == 10 && point.y == 0, 'The new point should be right');
|
||||
|
||||
//point down
|
||||
p = {x:0, y: 10};
|
||||
p = {
|
||||
x: 0,
|
||||
y: 10
|
||||
};
|
||||
point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
|
||||
test(Math.abs(point.x) < 0.0000001 && point.y == 10, 'The new point should be down');
|
||||
},
|
||||
@ -6089,10 +6127,9 @@ Test.prototype.tests = {
|
||||
|
||||
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},"draggable":false},"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},"draggable":false},"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},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":true,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
|
||||
|
||||
|
||||
//console.log(stage.toJSON())
|
||||
|
||||
//console.log(expectedJson);
|
||||
//console.log(stage.toJSON())
|
||||
|
||||
//console.log(expectedJson);
|
||||
test(stage.toJSON() === expectedJson, 'problem with serialization');
|
||||
},
|
||||
'SERIALIZATION - serialize shape': function(containerId) {
|
||||
@ -6121,10 +6158,9 @@ Test.prototype.tests = {
|
||||
|
||||
var expectedJson = '{"attrs":{"radius":70,"visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":true,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}';
|
||||
|
||||
|
||||
//console.log(circle.toJSON())
|
||||
|
||||
//console.log(expectedJson);
|
||||
//console.log(circle.toJSON())
|
||||
|
||||
//console.log(expectedJson);
|
||||
test(circle.toJSON() === expectedJson, 'problem with serialization');
|
||||
},
|
||||
'SERIALIZATION - load stage using json': function(containerId) {
|
||||
@ -6197,7 +6233,7 @@ Test.prototype.tests = {
|
||||
this.stroke(context);
|
||||
};
|
||||
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},"draggable":false},"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},"draggable":false},"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},"draggable":false},"nodeType":"Group","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
|
||||
|
||||
|
||||
var stage = Kinetic.Node.create(json, containerId);
|
||||
|
||||
stage.get('#myTriangle').apply('setDrawFunc', drawTriangle);
|
||||
@ -6239,7 +6275,7 @@ Test.prototype.tests = {
|
||||
imageObj.onload = function() {
|
||||
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},"draggable":false},"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},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"draggable":false,"id":"darth","width":438,"height":300},"nodeType":"Shape","shapeType":"Image"}]}]}';
|
||||
var stage = Kinetic.Node.create(json, containerId);
|
||||
|
||||
|
||||
test(stage.toJSON(), json, 'problem loading stage json with image');
|
||||
stage.get('#darth').apply('setImage', imageObj);
|
||||
stage.draw();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user