lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

deprecated Ellipse shape, since you can create ellipses now with circles. updated tests

Browse Source
This commit is contained in:
Eric Rowell
2013-05-13 22:19:51 -07:00
parent 6b68da49d9
commit e024b43906
5 changed files with 9 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Thorfile
View File

@@ -6,7 +6,7 @@ class Build < Thor
FILES = [
"src/Global.js", "src/Util.js", "src/Canvas.js",
"src/Node.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",
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js",
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js",
"src/plugins/Path.js", "src/plugins/TextPath.js", "src/plugins/RegularPolygon.js", "src/plugins/Star.js", "src/plugins/Label.js",
"src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js", "src/filters/Blur.js", "src/filters/Mask.js"
]
@@ -24,7 +24,6 @@ class Build < Thor
"tests/js/unit/shapes/rectTests.js",
"tests/js/unit/shapes/circleTests.js",
"tests/js/unit/shapes/wedgeTests.js",
"tests/js/unit/shapes/ellipseTests.js",
"tests/js/unit/shapes/imageTests.js",
"tests/js/unit/shapes/polygonTests.js",
"tests/js/unit/shapes/lineTests.js",

78
src/shapes/Ellipse.js
View File

@@ -1,78 +0,0 @@
(function() {
/**
* Ellipse constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Number|Array|Object} config.radius defines x and y radius
* {{ShapeParams}}
* {{NodeParams}}
*/
Kinetic.Ellipse = function(config) {
this._initEllipse(config);
};
Kinetic.Ellipse.prototype = {
_initEllipse: function(config) {
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Ellipse';
this._setDrawFuncs();
},
drawFunc: function(canvas) {
var context = canvas.getContext(), r = this.getRadius();
context.beginPath();
context.save();
if(r.x !== r.y) {
context.scale(1, r.y / r.x);
}
context.arc(0, 0, r.x, 0, Math.PI * 2, true);
context.restore();
context.closePath();
canvas.fillStroke(this);
},
getWidth: function() {
return this.getRadius().x * 2;
},
getHeight: function() {
return this.getRadius().y * 2;
},
setWidth: function(width) {
Kinetic.Node.prototype.setWidth.call(this, width);
this.setRadius({
x: width / 2
});
},
setHeight: function(height) {
Kinetic.Node.prototype.setHeight.call(this, height);
this.setRadius({
y: height / 2
});
}
};
Kinetic.Util.extend(Kinetic.Ellipse, Kinetic.Shape);
// add getters setters
Kinetic.Node.addPointGetterSetter(Kinetic.Ellipse, 'radius', 0);
/**
* set radius
* @name setRadius
* @methodOf Kinetic.Ellipse.prototype
* @param {Object|Array} radius
* radius can be a number, in which the ellipse becomes a circle,
* it can be an object with an x and y component, or it
* can be an array in which the first element is the x component
* and the second element is the y component. The x component
* defines the horizontal radius and the y component
* defines the vertical radius
*/
/**
* get radius
* @name getRadius
* @methodOf Kinetic.Ellipse.prototype
*/
})();

12
tests/js/unit/nodeTests.js
View File

@@ -454,10 +454,10 @@ Test.Modules.NODE = {
shadowOffset: [10, 10],
});
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: [70, 35],
radius: 35,
fill: 'green',
stroke: 'black',
strokeWidth: 4
@@ -1697,14 +1697,14 @@ Test.Modules.NODE = {
clicks.push('layer');
});
// fire event with bubbling
circle.fire('click');
circle.fire('click', null, true);
//console.log(clicks);
test(clicks.toString() == 'circle,layer', 'problem with fire 1');
// synthetic event
circle.fire('click', null, true);
// no bubble
circle.fire('click');
test(clicks.toString() == 'circle,layer,circle', 'problem with fire 2');
@@ -1830,7 +1830,7 @@ Test.Modules.NODE = {
clicks.push('layer');
});
circle.fire('click');
circle.fire('click', null, true);
test(clicks[0] === 'circle', 'circle event should be fired first');
test(clicks[1] === 'layer', 'layer event should be fired second');

29
tests/js/unit/shapeTests.js
View File

@@ -366,13 +366,10 @@ Test.Modules.SHAPE = {
fill: 'red'
});
var ellipse = new Kinetic.Ellipse({
var ellipse = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: {
x: 100,
y: 50
},
radius: 50,
fill: 'yellow'
});
@@ -381,8 +378,6 @@ Test.Modules.SHAPE = {
stage.add(layer);
// circle tests
test(circle.attrs.width === undefined, 'circle.attrs.width should be undefined');
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
test(circle.getWidth() === 100, 'circle width should be 100');
test(circle.getHeight() === 100, 'circle height should be 100');
test(circle.getSize().width === 100, 'circle width should be 100');
@@ -391,32 +386,12 @@ Test.Modules.SHAPE = {
circle.setWidth(200);
test(circle.attrs.width === 200, 'circle.attrs.width should be 200');
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
test(circle.getWidth() === 200, 'circle width should be 200');
test(circle.getHeight() === 200, 'circle height should be 200');
test(circle.getSize().width === 200, 'circle width should be 200');
test(circle.getSize().height === 200, 'circle height should be 200');
test(circle.getRadius() === 100, 'circle radius should be 100');
// ellipse tests
test(ellipse.attrs.width === undefined, 'ellipse.attrs.width should be undefined');
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
test(ellipse.getWidth() === 200, 'ellipse width should be 200');
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
test(ellipse.getSize().width === 200, 'ellipse width should be 200');
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 100, 'ellipse radius x should be 100');
ellipse.setWidth(400);
test(ellipse.attrs.width === 400, 'ellipse.attrs.width should be 400');
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
test(ellipse.getWidth() === 400, 'ellipse width should be 400');
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
test(ellipse.getSize().width === 400, 'ellipse width should be 400');
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
},
'set image fill to color then image then linear gradient then back to image': function(containerId) {

21
tests/js/unit/shapes/ellipseTests.js
View File

@@ -1,21 +0,0 @@
Test.Modules.ELLIPSE = {
'add ellipse': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var ellipse = new Kinetic.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: [70, 35],
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
layer.add(ellipse);
stage.add(layer);
test(ellipse.getShapeType() === 'Ellipse', 'shape type should be Ellipse');
}
};