1 goog.provide('lime.Renderer.CANVAS.ROUNDEDRECT');
  2 goog.provide('lime.Renderer.DOM.ROUNDEDRECT');
  3 goog.provide('lime.RoundedRect');
  4 
  5 
  6 goog.require('lime.Renderer.CANVAS.SPRITE');
  7 goog.require('lime.Renderer.DOM.SPRITE');
  8 goog.require('lime.Sprite');
  9 goog.require('lime.style');
 10 
 11 /**
 12  * Rounded rectangle
 13  * @constructor
 14  * @extends lime.Sprite
 15  */
 16 lime.RoundedRect = function() {
 17     lime.Sprite.call(this);
 18 
 19     this.setRadius(5);
 20 };
 21 goog.inherits(lime.RoundedRect, lime.Sprite);
 22 
 23 /**
 24  * Common name for RoundedRect objects
 25  * @type {string}
 26  */
 27 lime.RoundedRect.prototype.id = 'roundedrect';
 28 
 29 /** @inheritDoc */
 30 lime.RoundedRect.prototype.supportedRenderers = [
 31     lime.Renderer.DOM.SPRITE.makeSubRenderer(lime.Renderer.DOM.ROUNDEDRECT),
 32     lime.Renderer.CANVAS.SPRITE.makeSubRenderer(
 33         lime.Renderer.CANVAS.ROUNDEDRECT)
 34 ];
 35 
 36 /**
 37  * Return corner radius
 38  * @return {number} Radius.
 39  */
 40 lime.RoundedRect.prototype.getRadius = function() {
 41     return this.radius_;
 42 };
 43 
 44 /**
 45  * Return true if radius is in percentage units
 46  * @return {boolean} Unit is percentage?
 47  */
 48 lime.RoundedRect.prototype.getUnitPercentage = function() {
 49     return this.unitPercentage_;
 50 };
 51 
 52 /**
 53  * Sets the corner radius for object
 54  * @param {number} value Radius.
 55  * @param {boolean=} opt_percentage use percentage units.
 56  */
 57 lime.RoundedRect.prototype.setRadius = function(value, opt_percentage) {
 58     this.unitPercentage_ = opt_percentage || false;
 59     this.radius_ = value;
 60     return this;
 61 };
 62 
 63 /**
 64  * @inheritDoc
 65  * @this {lime.RoundedRect}
 66  */
 67 lime.Renderer.DOM.ROUNDEDRECT.draw = function(el) {
 68     var size = this.getSize();
 69 
 70     lime.Renderer.DOM.SPRITE.draw.call(this, el);
 71 
 72     lime.style.setBorderRadius(el, [this.radius_*this.getQuality(), this.radius_*this.getQuality()]);
 73 
 74 };
 75 
 76 /**
 77  * @inheritDoc
 78  * @this {lime.RoundedRect}
 79  */
 80 lime.Renderer.CANVAS.ROUNDEDRECT.draw = function(context) {
 81     //http://js-bits.blogspot.com/2010/07/canvas-rounded-corner-rectangles.html
 82 
 83     var size = this.getSize(),
 84         fill = this.getFill(),
 85         frame = this.getFrame(),
 86         radius = this.getRadius(),
 87         x = frame.left,
 88         y = frame.top,
 89         width = frame.right - frame.left,
 90         height = frame.bottom - frame.top;
 91 
 92     context.save();
 93     context.beginPath();
 94     context.moveTo(x + radius, y);
 95     context.lineTo(x + width - radius, y);
 96     context.quadraticCurveTo(x + width, y, x + width, y + radius);
 97     context.lineTo(x + width, y + height - radius);
 98     context.quadraticCurveTo(x + width, y + height,
 99         x + width - radius, y + height);
100     context.lineTo(x + radius, y + height);
101     context.quadraticCurveTo(x, y + height, x, y + height - radius);
102     context.lineTo(x, y + radius);
103     context.quadraticCurveTo(x, y, x + radius, y);
104     context.closePath();
105 
106     context.clip();
107 
108     lime.Renderer.CANVAS.SPRITE.draw.call(this, context);
109     
110     if(this.stroke_){
111         context.lineWidth*=2;
112         context.stroke();
113     }
114     
115     context.restore();
116 };
117