mirror of
https://github.com/konvajs/konva.git
synced 2026-01-08 18:54:40 +08:00
Added Ring Shape
Ring shape—circle with hollow center.
This commit is contained in:
105
src/shapes/Ring.js
Normal file
105
src/shapes/Ring.js
Normal file
@@ -0,0 +1,105 @@
|
||||
(function() {
|
||||
// the 0.0001 offset fixes a bug in Chrome 27
|
||||
var PIx2 = (Math.PI * 2) - 0.0001;
|
||||
|
||||
/**
|
||||
* Ring constructor
|
||||
* @constructor
|
||||
* @augments Kinetic.Shape
|
||||
* @param {Object} config
|
||||
* @param {Number} config.angle
|
||||
* @param {Number} config.angleDeg angle in degrees
|
||||
* @param {Number} config.innerRadius
|
||||
* @param {Number} config.outerRadius
|
||||
* @param {Boolean} [config.clockwise]
|
||||
* @@shapeParams
|
||||
* @@nodeParams
|
||||
* @example
|
||||
* var Ring = new Kinetic.Ring({<br>
|
||||
* innerRadius: 40,<br>
|
||||
* outerRadius: 80,<br>
|
||||
* fill: 'red',<br>
|
||||
* stroke: 'black',<br>
|
||||
* strokeWidth: 5<br>
|
||||
* });
|
||||
*/
|
||||
Kinetic.Ring = function(config) {
|
||||
this.___init(config);
|
||||
};
|
||||
|
||||
Kinetic.Ring.prototype = {
|
||||
___init: function(config) {
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
this.className = 'Ring';
|
||||
},
|
||||
drawFunc: function(context) {
|
||||
context.beginPath();
|
||||
context.arc(0, 0, this.getInnerRadius(), 0, PIx2, false);
|
||||
context.moveTo(this.getOuterRadius(), 0);
|
||||
context.arc(0, 0, this.getOuterRadius(), PIx2, 0, true);
|
||||
context.closePath();
|
||||
context.fillStrokeShape(this);
|
||||
},
|
||||
// implements Shape.prototype.getWidth()
|
||||
getWidth: function() {
|
||||
return this.getOuterRadius() * 2;
|
||||
},
|
||||
// implements Shape.prototype.getHeight()
|
||||
getHeight: function() {
|
||||
return this.getOuterRadius() * 2;
|
||||
},
|
||||
// implements Shape.prototype.setWidth()
|
||||
setWidth: function(width) {
|
||||
Kinetic.Node.prototype.setWidth.call(this, width);
|
||||
this.setOuterRadius(width / 2);
|
||||
},
|
||||
// implements Shape.prototype.setHeight()
|
||||
setHeight: function(height) {
|
||||
Kinetic.Node.prototype.setHeight.call(this, height);
|
||||
this.setOuterRadius(height / 2);
|
||||
}
|
||||
};
|
||||
Kinetic.Util.extend(Kinetic.Ring, Kinetic.Shape);
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Ring, 'innerRadius', function() {
|
||||
return 0;
|
||||
});
|
||||
|
||||
/**
|
||||
* set innerRadius
|
||||
* @name setInnerRadius
|
||||
* @method
|
||||
* @memberof Kinetic.Ring.prototype
|
||||
* @param {Number} innerRadius
|
||||
*/
|
||||
|
||||
/**
|
||||
* get innerRadius
|
||||
* @name getInnerRadius
|
||||
* @method
|
||||
* @memberof Kinetic.Ring.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Ring, 'outerRadius', function() {
|
||||
return 0;
|
||||
});
|
||||
|
||||
/**
|
||||
* set outerRadius
|
||||
* @name setOuterRadius
|
||||
* @method
|
||||
* @memberof Kinetic.Ring.prototype
|
||||
* @param {Number} innerRadius
|
||||
*/
|
||||
|
||||
/**
|
||||
* get outerRadius
|
||||
* @name getOuterRadius
|
||||
* @method
|
||||
* @memberof Kinetic.Ring.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
})();
|
||||
Reference in New Issue
Block a user