(function() { /** * Rect constructor * @constructor * @memberof Konva * @augments Konva.Shape * @param {Object} config * @param {Number} [config.cornerRadius] * @@shapeParams * @@nodeParams * @example * var rect = new Konva.Rect({ * width: 100, * height: 50, * fill: 'red', * stroke: 'black', * strokeWidth: 5 * }); */ Konva.Rect = function(config) { this.___init(config); }; Konva.Rect.prototype = { ___init: function(config) { Konva.Shape.call(this, config); this.className = 'Rect'; this.sceneFunc(this._sceneFunc); }, _sceneFunc: function(context) { var 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) cornerRadius = Math.min(cornerRadius, width / 2, height / 2); 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(); context.fillStrokeShape(this); } }; Konva.Util.extend(Konva.Rect, Konva.Shape); Konva.Factory.addGetterSetter(Konva.Rect, 'cornerRadius', 0); /** * get/set corner radius * @name cornerRadius * @method * @memberof Konva.Rect.prototype * @param {Number} cornerRadius * @returns {Number} * @example * // get corner radius * var cornerRadius = rect.cornerRadius(); * * // set corner radius * rect.cornerRadius(10); */ Konva.Collection.mapMethods(Konva.Rect); })();