2012-12-02 04:04:10 +08:00
|
|
|
(function() {
|
|
|
|
/**
|
|
|
|
* Rect constructor
|
|
|
|
* @constructor
|
|
|
|
* @augments Kinetic.Shape
|
|
|
|
* @param {Object} config
|
2013-01-03 15:55:56 +08:00
|
|
|
* @param {Number} [config.cornerRadius]
|
2013-01-27 12:42:19 +08:00
|
|
|
* {{ShapeParams}}
|
|
|
|
* {{NodeParams}}
|
2012-12-02 04:04:10 +08:00
|
|
|
*/
|
|
|
|
Kinetic.Rect = function(config) {
|
|
|
|
this._initRect(config);
|
2012-12-23 15:08:03 +08:00
|
|
|
};
|
|
|
|
|
2012-12-02 04:04:10 +08:00
|
|
|
Kinetic.Rect.prototype = {
|
|
|
|
_initRect: function(config) {
|
2013-03-15 23:33:05 +08:00
|
|
|
this.createAttrs();
|
2012-12-02 04:04:10 +08:00
|
|
|
Kinetic.Shape.call(this, config);
|
2013-01-01 16:41:13 +08:00
|
|
|
this.shapeType = 'Rect';
|
2012-12-02 04:04:10 +08:00
|
|
|
this._setDrawFuncs();
|
|
|
|
},
|
2012-12-10 01:52:33 +08:00
|
|
|
drawFunc: function(canvas) {
|
2013-03-15 23:33:05 +08:00
|
|
|
var context = canvas.getContext(),
|
|
|
|
cornerRadius = this.getCornerRadius(),
|
|
|
|
width = this.getWidth(),
|
|
|
|
height = this.getHeight();
|
|
|
|
|
2012-12-02 04:04:10 +08:00
|
|
|
context.beginPath();
|
2013-03-15 23:33:05 +08:00
|
|
|
|
|
|
|
if(!cornerRadius) {
|
2012-12-02 04:04:10 +08:00
|
|
|
// 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();
|
2012-12-10 01:52:33 +08:00
|
|
|
canvas.fillStroke(this);
|
2012-07-27 13:58:38 +08:00
|
|
|
}
|
2012-12-02 04:04:10 +08:00
|
|
|
};
|
|
|
|
|
2013-05-08 14:51:02 +08:00
|
|
|
Kinetic.Util.extend(Kinetic.Rect, Kinetic.Shape);
|
2012-06-11 04:07:09 +08:00
|
|
|
|
2013-03-15 23:33:05 +08:00
|
|
|
Kinetic.Node.addGetterSetter(Kinetic.Rect, 'cornerRadius', 0);
|
2012-12-23 15:08:03 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* set corner radius
|
|
|
|
* @name setCornerRadius
|
2013-05-08 01:19:54 +08:00
|
|
|
* @methodOf Kinetic.Rect.prototype
|
2012-12-23 15:08:03 +08:00
|
|
|
* @param {Number} corner radius
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* get corner radius
|
|
|
|
* @name getCornerRadius
|
2013-05-08 01:19:54 +08:00
|
|
|
* @methodOf Kinetic.Rect.prototype
|
2012-12-23 15:08:03 +08:00
|
|
|
*/
|
|
|
|
|
2012-12-02 04:04:10 +08:00
|
|
|
})();
|