konva/src/shapes/Rect.js
2013-05-07 10:19:54 -07:00

69 lines
2.2 KiB
JavaScript

(function() {
/**
* Rect constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Number} [config.cornerRadius]
* {{ShapeParams}}
* {{NodeParams}}
*/
Kinetic.Rect = function(config) {
this._initRect(config);
};
Kinetic.Rect.prototype = {
_initRect: function(config) {
this.createAttrs();
Kinetic.Shape.call(this, config);
this.shapeType = 'Rect';
this._setDrawFuncs();
},
drawFunc: function(canvas) {
var context = canvas.getContext(),
cornerRadius = this.getCornerRadius(),
width = this.getWidth(),
height = this.getHeight();
context.beginPath();
if(!cornerRadius) {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, width, height);
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)
context.moveTo(cornerRadius, 0);
context.lineTo(width - cornerRadius, 0);
context.arc(width - cornerRadius, cornerRadius, cornerRadius, Math.PI * 3 / 2, 0, false);
context.lineTo(width, height - cornerRadius);
context.arc(width - cornerRadius, height - cornerRadius, cornerRadius, 0, Math.PI / 2, false);
context.lineTo(cornerRadius, height);
context.arc(cornerRadius, height - cornerRadius, cornerRadius, Math.PI / 2, Math.PI, false);
context.lineTo(0, cornerRadius);
context.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, Math.PI * 3 / 2, false);
}
context.closePath();
canvas.fillStroke(this);
}
};
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
Kinetic.Node.addGetterSetter(Kinetic.Rect, 'cornerRadius', 0);
/**
* set corner radius
* @name setCornerRadius
* @methodOf Kinetic.Rect.prototype
* @param {Number} corner radius
*/
/**
* get corner radius
* @name getCornerRadius
* @methodOf Kinetic.Rect.prototype
*/
})();