lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

removed Circle shape and replaced it with the more flexible Ellipse shape. If you define the radius with a number, the shape will be a circle. if you define the radius with an x and y component, it will be an oval

Browse Source
This commit is contained in:
Eric Rowell
2012-06-17 16:50:04 -07:00
parent a49fc610d6
commit fae1ff6cb7
10 changed files with 644 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Node.js
View File

@@ -217,6 +217,21 @@ Kinetic.Node.prototype = {
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
case 'radius':
/*
* root attr radius should be an object
* while all other radius attrs should be
* a number
*/
if(level > 0) {
that._setAttr(obj, key, val);
}
else {
var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
}
break;
case 'scale':
var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x);
@@ -234,7 +249,7 @@ Kinetic.Node.prototype = {
that._setAttr(obj[key], 'height', size.height);
break;
default:
that._setAttr(obj, key, c[key]);
that._setAttr(obj, key, val);
break;
}

4
src/Shape.js
View File

@@ -321,6 +321,10 @@ Kinetic.Shape.prototype = {
},
/**
* determines if point is in the shape
* @param {Object|Array} point point can be an object containing
* an x and y property, or it can be an array with two elements
* in which the first element is the x component and the second
* element is the y component
*/
intersects: function() {
var pos = Kinetic.GlobalObject._getXY(arguments);

46
src/shapes/Circle.js
View File

@@ -1,46 +0,0 @@
///////////////////////////////////////////////////////////////////////
// Circle
///////////////////////////////////////////////////////////////////////
/**
* Circle constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Circle = function(config) {
this.setDefaultAttrs({
radius: 0
});
this.shapeType = "Circle";
config.drawFunc = function() {
var canvas = this.getCanvas();
var context = this.getContext();
context.beginPath();
context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
context.closePath();
this.fill();
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Circle, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSetters(Kinetic.Circle, ['radius']);
Kinetic.GlobalObject.addGetters(Kinetic.Circle, ['radius']);
/**
* set radius
* @name setRadius
* @methodOf Kinetic.Circle.prototype
* @param {Number} radius
*/
/**
* get radius
* @name getRadius
* @methodOf Kinetic.Circle.prototype
*/

66
src/shapes/Ellipse.js Normal file
View File

@@ -0,0 +1,66 @@
///////////////////////////////////////////////////////////////////////
// Ellipse
///////////////////////////////////////////////////////////////////////
/**
* Ellipse constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Ellipse = function(config) {
this.setDefaultAttrs({
radius: {
x: 0,
y: 0
}
});
this.shapeType = "Ellipse";
config.drawFunc = function() {
var canvas = this.getCanvas();
var context = this.getContext();
var 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();
this.fill();
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
Kinetic.Ellipse.prototype = {
/**
* set radius
* @param {Number|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
*/
setRadius: function() {
this.setAttrs({
radius: arguments
});
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Ellipse, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addGetters(Kinetic.Ellipse, ['radius']);
/**
* get radius
* @name getRadius
* @methodOf Kinetic.Ellipse.prototype
*/