diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index 38e217b..237e8b7 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -60,7 +60,7 @@ * @default 0xFFFFFF */ this.tint = 0xFFFFFF;// * Math.random(); - + /** * The blend mode to be applied to the graphic shape * @@ -69,7 +69,7 @@ * @default PIXI.blendModes.NORMAL; */ this.blendMode = PIXI.blendModes.NORMAL; - + /** * Current path * @@ -265,6 +265,29 @@ }; /** + * @method drawRoundedRect + * + * @param x {Number} The X coord of the top-left of the rectangle + * @param y {Number} The Y coord of the top-left of the rectangle + * @param width {Number} The width of the rectangle + * @param height {Number} The height of the rectangle + * @param radius {Number} Radius of the rectangle corners + */ +PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) +{ + if (!this.currentPath.points.length) this.graphicsData.pop(); + + this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, + points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; + + this.graphicsData.push(this.currentPath); + this.dirty = true; + + return this; +}; + +/** * Draws a circle. * * @method drawCircle @@ -345,7 +368,7 @@ var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); canvasBuffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, canvasBuffer.context); return texture; @@ -355,23 +378,23 @@ * Renders the object using the WebGL renderer * * @method _renderWebGL -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderWebGL = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + if(this._cacheAsBitmap) { - + if(this.dirty) { this._generateCachedSprite(); // we will also need to update the texture on the gpu too! PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl); - + this.dirty = false; } @@ -386,7 +409,7 @@ if(this._mask)renderSession.maskManager.pushMask(this.mask, renderSession); if(this._filters)renderSession.filterManager.pushFilter(this._filterBlock); - + // check blend mode if(this.blendMode !== renderSession.spriteBatch.currentBlendMode) { @@ -394,9 +417,9 @@ var blendModeWebGL = PIXI.blendModesWebGL[renderSession.spriteBatch.currentBlendMode]; renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - + PIXI.WebGLGraphics.renderGraphics(this, renderSession); - + // only render if it has children! if(this.children.length) { @@ -413,7 +436,7 @@ if(this._filters)renderSession.filterManager.popFilter(); if(this._mask)renderSession.maskManager.popMask(renderSession); - + renderSession.drawCount++; renderSession.spriteBatch.start(); @@ -424,17 +447,17 @@ * Renders the object using the Canvas renderer * * @method _renderCanvas -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderCanvas = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + var context = renderSession.context; var transform = this.worldTransform; - + if(this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; @@ -528,7 +551,7 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - + var minX = Infinity; var maxX = -Infinity; @@ -606,7 +629,7 @@ { var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height); var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); - + this._cachedSprite = new PIXI.Sprite(texture); this._cachedSprite.buffer = canvasBuffer; @@ -623,7 +646,7 @@ // this._cachedSprite.buffer.context.save(); this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context); this._cachedSprite.alpha = this.alpha; @@ -645,3 +668,4 @@ PIXI.Graphics.RECT = 1; PIXI.Graphics.CIRC = 2; PIXI.Graphics.ELIP = 3; +PIXI.Graphics.RREC = 4; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index 38e217b..237e8b7 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -60,7 +60,7 @@ * @default 0xFFFFFF */ this.tint = 0xFFFFFF;// * Math.random(); - + /** * The blend mode to be applied to the graphic shape * @@ -69,7 +69,7 @@ * @default PIXI.blendModes.NORMAL; */ this.blendMode = PIXI.blendModes.NORMAL; - + /** * Current path * @@ -265,6 +265,29 @@ }; /** + * @method drawRoundedRect + * + * @param x {Number} The X coord of the top-left of the rectangle + * @param y {Number} The Y coord of the top-left of the rectangle + * @param width {Number} The width of the rectangle + * @param height {Number} The height of the rectangle + * @param radius {Number} Radius of the rectangle corners + */ +PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) +{ + if (!this.currentPath.points.length) this.graphicsData.pop(); + + this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, + points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; + + this.graphicsData.push(this.currentPath); + this.dirty = true; + + return this; +}; + +/** * Draws a circle. * * @method drawCircle @@ -345,7 +368,7 @@ var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); canvasBuffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, canvasBuffer.context); return texture; @@ -355,23 +378,23 @@ * Renders the object using the WebGL renderer * * @method _renderWebGL -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderWebGL = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + if(this._cacheAsBitmap) { - + if(this.dirty) { this._generateCachedSprite(); // we will also need to update the texture on the gpu too! PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl); - + this.dirty = false; } @@ -386,7 +409,7 @@ if(this._mask)renderSession.maskManager.pushMask(this.mask, renderSession); if(this._filters)renderSession.filterManager.pushFilter(this._filterBlock); - + // check blend mode if(this.blendMode !== renderSession.spriteBatch.currentBlendMode) { @@ -394,9 +417,9 @@ var blendModeWebGL = PIXI.blendModesWebGL[renderSession.spriteBatch.currentBlendMode]; renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - + PIXI.WebGLGraphics.renderGraphics(this, renderSession); - + // only render if it has children! if(this.children.length) { @@ -413,7 +436,7 @@ if(this._filters)renderSession.filterManager.popFilter(); if(this._mask)renderSession.maskManager.popMask(renderSession); - + renderSession.drawCount++; renderSession.spriteBatch.start(); @@ -424,17 +447,17 @@ * Renders the object using the Canvas renderer * * @method _renderCanvas -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderCanvas = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + var context = renderSession.context; var transform = this.worldTransform; - + if(this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; @@ -528,7 +551,7 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - + var minX = Infinity; var maxX = -Infinity; @@ -606,7 +629,7 @@ { var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height); var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); - + this._cachedSprite = new PIXI.Sprite(texture); this._cachedSprite.buffer = canvasBuffer; @@ -623,7 +646,7 @@ // this._cachedSprite.buffer.context.save(); this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context); this._cachedSprite.alpha = this.alpha; @@ -645,3 +668,4 @@ PIXI.Graphics.RECT = 1; PIXI.Graphics.CIRC = 2; PIXI.Graphics.ELIP = 3; +PIXI.Graphics.RREC = 4; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index cdb4b87..e29392b 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -145,6 +145,42 @@ context.stroke(); } } + else if (data.type === PIXI.Graphics.RREC) + { + var rx = points[0]; + var ry = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + var maxRadius = Math.min(width, height) / 2 | 0; + radius = radius > maxRadius ? maxRadius : radius; + + context.beginPath(); + context.moveTo(rx, ry + radius); + context.lineTo(rx, ry + height - radius); + context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); + context.lineTo(rx + width - radius, ry + height); + context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); + context.lineTo(rx + width, ry + radius); + context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); + context.lineTo(rx + radius, ry); + context.quadraticCurveTo(rx, ry, rx, ry + radius); + context.closePath(); + + if(data.fillColor || data.fillColor === 0) + { + context.globalAlpha = data.fillAlpha * worldAlpha; + context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fill(); + + } + if(data.lineWidth) + { + context.globalAlpha = data.lineAlpha * worldAlpha; + context.stroke(); + } + } } }; @@ -233,5 +269,28 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } + else if (data.type === PIXI.Graphics.RREC) + { + var rx = points[0]; + var ry = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + var maxRadius = Math.min(width, height) / 2 | 0; + radius = radius > maxRadius ? maxRadius : radius; + + context.beginPath(); + context.moveTo(rx, ry + radius); + context.lineTo(rx, ry + height - radius); + context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); + context.lineTo(rx + width - radius, ry + height); + context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); + context.lineTo(rx + width, ry + radius); + context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); + context.lineTo(rx + radius, ry); + context.quadraticCurveTo(rx, ry, rx, ry + radius); + context.closePath(); + } } }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index 38e217b..237e8b7 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -60,7 +60,7 @@ * @default 0xFFFFFF */ this.tint = 0xFFFFFF;// * Math.random(); - + /** * The blend mode to be applied to the graphic shape * @@ -69,7 +69,7 @@ * @default PIXI.blendModes.NORMAL; */ this.blendMode = PIXI.blendModes.NORMAL; - + /** * Current path * @@ -265,6 +265,29 @@ }; /** + * @method drawRoundedRect + * + * @param x {Number} The X coord of the top-left of the rectangle + * @param y {Number} The Y coord of the top-left of the rectangle + * @param width {Number} The width of the rectangle + * @param height {Number} The height of the rectangle + * @param radius {Number} Radius of the rectangle corners + */ +PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) +{ + if (!this.currentPath.points.length) this.graphicsData.pop(); + + this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, + points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; + + this.graphicsData.push(this.currentPath); + this.dirty = true; + + return this; +}; + +/** * Draws a circle. * * @method drawCircle @@ -345,7 +368,7 @@ var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); canvasBuffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, canvasBuffer.context); return texture; @@ -355,23 +378,23 @@ * Renders the object using the WebGL renderer * * @method _renderWebGL -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderWebGL = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + if(this._cacheAsBitmap) { - + if(this.dirty) { this._generateCachedSprite(); // we will also need to update the texture on the gpu too! PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl); - + this.dirty = false; } @@ -386,7 +409,7 @@ if(this._mask)renderSession.maskManager.pushMask(this.mask, renderSession); if(this._filters)renderSession.filterManager.pushFilter(this._filterBlock); - + // check blend mode if(this.blendMode !== renderSession.spriteBatch.currentBlendMode) { @@ -394,9 +417,9 @@ var blendModeWebGL = PIXI.blendModesWebGL[renderSession.spriteBatch.currentBlendMode]; renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - + PIXI.WebGLGraphics.renderGraphics(this, renderSession); - + // only render if it has children! if(this.children.length) { @@ -413,7 +436,7 @@ if(this._filters)renderSession.filterManager.popFilter(); if(this._mask)renderSession.maskManager.popMask(renderSession); - + renderSession.drawCount++; renderSession.spriteBatch.start(); @@ -424,17 +447,17 @@ * Renders the object using the Canvas renderer * * @method _renderCanvas -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderCanvas = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + var context = renderSession.context; var transform = this.worldTransform; - + if(this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; @@ -528,7 +551,7 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - + var minX = Infinity; var maxX = -Infinity; @@ -606,7 +629,7 @@ { var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height); var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); - + this._cachedSprite = new PIXI.Sprite(texture); this._cachedSprite.buffer = canvasBuffer; @@ -623,7 +646,7 @@ // this._cachedSprite.buffer.context.save(); this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context); this._cachedSprite.alpha = this.alpha; @@ -645,3 +668,4 @@ PIXI.Graphics.RECT = 1; PIXI.Graphics.CIRC = 2; PIXI.Graphics.ELIP = 3; +PIXI.Graphics.RREC = 4; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index cdb4b87..e29392b 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -145,6 +145,42 @@ context.stroke(); } } + else if (data.type === PIXI.Graphics.RREC) + { + var rx = points[0]; + var ry = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + var maxRadius = Math.min(width, height) / 2 | 0; + radius = radius > maxRadius ? maxRadius : radius; + + context.beginPath(); + context.moveTo(rx, ry + radius); + context.lineTo(rx, ry + height - radius); + context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); + context.lineTo(rx + width - radius, ry + height); + context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); + context.lineTo(rx + width, ry + radius); + context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); + context.lineTo(rx + radius, ry); + context.quadraticCurveTo(rx, ry, rx, ry + radius); + context.closePath(); + + if(data.fillColor || data.fillColor === 0) + { + context.globalAlpha = data.fillAlpha * worldAlpha; + context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fill(); + + } + if(data.lineWidth) + { + context.globalAlpha = data.lineAlpha * worldAlpha; + context.stroke(); + } + } } }; @@ -233,5 +269,28 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } + else if (data.type === PIXI.Graphics.RREC) + { + var rx = points[0]; + var ry = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + var maxRadius = Math.min(width, height) / 2 | 0; + radius = radius > maxRadius ? maxRadius : radius; + + context.beginPath(); + context.moveTo(rx, ry + radius); + context.lineTo(rx, ry + height - radius); + context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); + context.lineTo(rx + width - radius, ry + height); + context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); + context.lineTo(rx + width, ry + radius); + context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); + context.lineTo(rx + radius, ry); + context.quadraticCurveTo(rx, ry, rx, ry + radius); + context.closePath(); + } } }; diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 1249672..3530b17 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -99,7 +99,7 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics, gl) { var webGL = graphics._webGL[gl.id]; - + for (var i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; @@ -125,11 +125,15 @@ { PIXI.WebGLGraphics.buildCircle(data, webGL); } + else if(data.type === PIXI.Graphics.RREC) + { + PIXI.WebGLGraphics.buildRoundedRectangle(data, webGL); + } } webGL.lastIndex = graphics.graphicsData.length; - + webGL.glPoints = new Float32Array(webGL.points); @@ -212,6 +216,123 @@ }; /** + * Builds a rounded rectangle to draw + * + * @static + * @private + * @method buildRoundedRectangle + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {Object} + */ +PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) +{ + /** + * Calcul the points for a quadratic bezier curve. + * Based on : https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * + * @param {number} fromX Origin point x + * @param {number} fromY Origin point x + * @param {number} cpX Control point x + * @param {number} cpY Control point y + * @param {number} toX Destination point x + * @param {number} toY Destination point y + * @return {number[]} + */ + function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY) { + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + points = []; + + function getPt(n1 , n2, perc) { + var diff = n2 - n1; + + return n1 + ( diff * perc ); + } + + var j = 0; + for (var i = 0; i <= n; i++ ) + { + j = i / n; + + // The Green Line + xa = getPt( fromX , cpX , j ); + ya = getPt( fromY , cpY , j ); + xb = getPt( cpX , toX , j ); + yb = getPt( cpY , toY , j ); + + // The Black Dot + x = getPt( xa , xb , j ); + y = getPt( ya , yb , j ); + + points.push(x, y); + } + return points; + } + + var points = graphicsData.points; + var x = points[0]; + var y = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + + var recPoints = []; + recPoints.push(x, y + radius); + recPoints = recPoints.concat(quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); + recPoints = recPoints.concat(quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); + recPoints = recPoints.concat(quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); + recPoints = recPoints.concat(quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); + + + if (graphicsData.fill) { + var color = PIXI.hex2rgb(graphicsData.fillColor); + var alpha = graphicsData.fillAlpha; + + var r = color[0] * alpha; + var g = color[1] * alpha; + var b = color[2] * alpha; + + var verts = webGLData.points; + var indices = webGLData.indices; + + var vecPos = verts.length/6; + + var triangles = PIXI.PolyK.Triangulate(recPoints); + + var i = 0; + for (i = 0; i < triangles.length; i+=3) + { + indices.push(triangles[i] + vecPos); + indices.push(triangles[i] + vecPos); + indices.push(triangles[i+1] + vecPos); + indices.push(triangles[i+2] + vecPos); + indices.push(triangles[i+2] + vecPos); + } + + for (i = 0; i < recPoints.length; i++) + { + verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); + } + } + + if (graphicsData.lineWidth) { + var tempPoints = graphicsData.points; + + graphicsData.points = recPoints; + + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** * Builds a circle to draw * * @static @@ -222,7 +343,7 @@ */ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData) { - + // need to convert points to a nice regular data var rectData = graphicsData.points; var x = rectData[0]; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index 38e217b..237e8b7 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -60,7 +60,7 @@ * @default 0xFFFFFF */ this.tint = 0xFFFFFF;// * Math.random(); - + /** * The blend mode to be applied to the graphic shape * @@ -69,7 +69,7 @@ * @default PIXI.blendModes.NORMAL; */ this.blendMode = PIXI.blendModes.NORMAL; - + /** * Current path * @@ -265,6 +265,29 @@ }; /** + * @method drawRoundedRect + * + * @param x {Number} The X coord of the top-left of the rectangle + * @param y {Number} The Y coord of the top-left of the rectangle + * @param width {Number} The width of the rectangle + * @param height {Number} The height of the rectangle + * @param radius {Number} Radius of the rectangle corners + */ +PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) +{ + if (!this.currentPath.points.length) this.graphicsData.pop(); + + this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, + points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; + + this.graphicsData.push(this.currentPath); + this.dirty = true; + + return this; +}; + +/** * Draws a circle. * * @method drawCircle @@ -345,7 +368,7 @@ var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); canvasBuffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, canvasBuffer.context); return texture; @@ -355,23 +378,23 @@ * Renders the object using the WebGL renderer * * @method _renderWebGL -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderWebGL = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + if(this._cacheAsBitmap) { - + if(this.dirty) { this._generateCachedSprite(); // we will also need to update the texture on the gpu too! PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl); - + this.dirty = false; } @@ -386,7 +409,7 @@ if(this._mask)renderSession.maskManager.pushMask(this.mask, renderSession); if(this._filters)renderSession.filterManager.pushFilter(this._filterBlock); - + // check blend mode if(this.blendMode !== renderSession.spriteBatch.currentBlendMode) { @@ -394,9 +417,9 @@ var blendModeWebGL = PIXI.blendModesWebGL[renderSession.spriteBatch.currentBlendMode]; renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - + PIXI.WebGLGraphics.renderGraphics(this, renderSession); - + // only render if it has children! if(this.children.length) { @@ -413,7 +436,7 @@ if(this._filters)renderSession.filterManager.popFilter(); if(this._mask)renderSession.maskManager.popMask(renderSession); - + renderSession.drawCount++; renderSession.spriteBatch.start(); @@ -424,17 +447,17 @@ * Renders the object using the Canvas renderer * * @method _renderCanvas -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderCanvas = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + var context = renderSession.context; var transform = this.worldTransform; - + if(this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; @@ -528,7 +551,7 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - + var minX = Infinity; var maxX = -Infinity; @@ -606,7 +629,7 @@ { var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height); var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); - + this._cachedSprite = new PIXI.Sprite(texture); this._cachedSprite.buffer = canvasBuffer; @@ -623,7 +646,7 @@ // this._cachedSprite.buffer.context.save(); this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context); this._cachedSprite.alpha = this.alpha; @@ -645,3 +668,4 @@ PIXI.Graphics.RECT = 1; PIXI.Graphics.CIRC = 2; PIXI.Graphics.ELIP = 3; +PIXI.Graphics.RREC = 4; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index cdb4b87..e29392b 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -145,6 +145,42 @@ context.stroke(); } } + else if (data.type === PIXI.Graphics.RREC) + { + var rx = points[0]; + var ry = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + var maxRadius = Math.min(width, height) / 2 | 0; + radius = radius > maxRadius ? maxRadius : radius; + + context.beginPath(); + context.moveTo(rx, ry + radius); + context.lineTo(rx, ry + height - radius); + context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); + context.lineTo(rx + width - radius, ry + height); + context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); + context.lineTo(rx + width, ry + radius); + context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); + context.lineTo(rx + radius, ry); + context.quadraticCurveTo(rx, ry, rx, ry + radius); + context.closePath(); + + if(data.fillColor || data.fillColor === 0) + { + context.globalAlpha = data.fillAlpha * worldAlpha; + context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fill(); + + } + if(data.lineWidth) + { + context.globalAlpha = data.lineAlpha * worldAlpha; + context.stroke(); + } + } } }; @@ -233,5 +269,28 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } + else if (data.type === PIXI.Graphics.RREC) + { + var rx = points[0]; + var ry = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + var maxRadius = Math.min(width, height) / 2 | 0; + radius = radius > maxRadius ? maxRadius : radius; + + context.beginPath(); + context.moveTo(rx, ry + radius); + context.lineTo(rx, ry + height - radius); + context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); + context.lineTo(rx + width - radius, ry + height); + context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); + context.lineTo(rx + width, ry + radius); + context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); + context.lineTo(rx + radius, ry); + context.quadraticCurveTo(rx, ry, rx, ry + radius); + context.closePath(); + } } }; diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 1249672..3530b17 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -99,7 +99,7 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics, gl) { var webGL = graphics._webGL[gl.id]; - + for (var i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; @@ -125,11 +125,15 @@ { PIXI.WebGLGraphics.buildCircle(data, webGL); } + else if(data.type === PIXI.Graphics.RREC) + { + PIXI.WebGLGraphics.buildRoundedRectangle(data, webGL); + } } webGL.lastIndex = graphics.graphicsData.length; - + webGL.glPoints = new Float32Array(webGL.points); @@ -212,6 +216,123 @@ }; /** + * Builds a rounded rectangle to draw + * + * @static + * @private + * @method buildRoundedRectangle + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {Object} + */ +PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) +{ + /** + * Calcul the points for a quadratic bezier curve. + * Based on : https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * + * @param {number} fromX Origin point x + * @param {number} fromY Origin point x + * @param {number} cpX Control point x + * @param {number} cpY Control point y + * @param {number} toX Destination point x + * @param {number} toY Destination point y + * @return {number[]} + */ + function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY) { + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + points = []; + + function getPt(n1 , n2, perc) { + var diff = n2 - n1; + + return n1 + ( diff * perc ); + } + + var j = 0; + for (var i = 0; i <= n; i++ ) + { + j = i / n; + + // The Green Line + xa = getPt( fromX , cpX , j ); + ya = getPt( fromY , cpY , j ); + xb = getPt( cpX , toX , j ); + yb = getPt( cpY , toY , j ); + + // The Black Dot + x = getPt( xa , xb , j ); + y = getPt( ya , yb , j ); + + points.push(x, y); + } + return points; + } + + var points = graphicsData.points; + var x = points[0]; + var y = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + + var recPoints = []; + recPoints.push(x, y + radius); + recPoints = recPoints.concat(quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); + recPoints = recPoints.concat(quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); + recPoints = recPoints.concat(quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); + recPoints = recPoints.concat(quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); + + + if (graphicsData.fill) { + var color = PIXI.hex2rgb(graphicsData.fillColor); + var alpha = graphicsData.fillAlpha; + + var r = color[0] * alpha; + var g = color[1] * alpha; + var b = color[2] * alpha; + + var verts = webGLData.points; + var indices = webGLData.indices; + + var vecPos = verts.length/6; + + var triangles = PIXI.PolyK.Triangulate(recPoints); + + var i = 0; + for (i = 0; i < triangles.length; i+=3) + { + indices.push(triangles[i] + vecPos); + indices.push(triangles[i] + vecPos); + indices.push(triangles[i+1] + vecPos); + indices.push(triangles[i+2] + vecPos); + indices.push(triangles[i+2] + vecPos); + } + + for (i = 0; i < recPoints.length; i++) + { + verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); + } + } + + if (graphicsData.lineWidth) { + var tempPoints = graphicsData.points; + + graphicsData.points = recPoints; + + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** * Builds a circle to draw * * @static @@ -222,7 +343,7 @@ */ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData) { - + // need to convert points to a nice regular data var rectData = graphicsData.points; var x = rectData[0]; diff --git a/test/unit/pixi/primitives/Graphics.js b/test/unit/pixi/primitives/Graphics.js index 2149403..d667df6 100644 --- a/test/unit/pixi/primitives/Graphics.js +++ b/test/unit/pixi/primitives/Graphics.js @@ -11,6 +11,7 @@ expect(Graphics).itself.to.have.property('RECT', 1); expect(Graphics).itself.to.have.property('CIRC', 2); expect(Graphics).itself.to.have.property('ELIP', 3); + expect(Graphics).itself.to.have.property('RREC', 4); }); it('Confirm new instance', function () { @@ -26,6 +27,7 @@ expect(obj).to.respondTo('beginFill'); expect(obj).to.respondTo('endFill'); expect(obj).to.respondTo('drawRect'); + expect(obj).to.respondTo('drawRoundedRect'); expect(obj).to.respondTo('drawCircle'); expect(obj).to.respondTo('drawEllipse'); expect(obj).to.respondTo('clear'); diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index 38e217b..237e8b7 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -60,7 +60,7 @@ * @default 0xFFFFFF */ this.tint = 0xFFFFFF;// * Math.random(); - + /** * The blend mode to be applied to the graphic shape * @@ -69,7 +69,7 @@ * @default PIXI.blendModes.NORMAL; */ this.blendMode = PIXI.blendModes.NORMAL; - + /** * Current path * @@ -265,6 +265,29 @@ }; /** + * @method drawRoundedRect + * + * @param x {Number} The X coord of the top-left of the rectangle + * @param y {Number} The Y coord of the top-left of the rectangle + * @param width {Number} The width of the rectangle + * @param height {Number} The height of the rectangle + * @param radius {Number} Radius of the rectangle corners + */ +PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) +{ + if (!this.currentPath.points.length) this.graphicsData.pop(); + + this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, + points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; + + this.graphicsData.push(this.currentPath); + this.dirty = true; + + return this; +}; + +/** * Draws a circle. * * @method drawCircle @@ -345,7 +368,7 @@ var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); canvasBuffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, canvasBuffer.context); return texture; @@ -355,23 +378,23 @@ * Renders the object using the WebGL renderer * * @method _renderWebGL -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderWebGL = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + if(this._cacheAsBitmap) { - + if(this.dirty) { this._generateCachedSprite(); // we will also need to update the texture on the gpu too! PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl); - + this.dirty = false; } @@ -386,7 +409,7 @@ if(this._mask)renderSession.maskManager.pushMask(this.mask, renderSession); if(this._filters)renderSession.filterManager.pushFilter(this._filterBlock); - + // check blend mode if(this.blendMode !== renderSession.spriteBatch.currentBlendMode) { @@ -394,9 +417,9 @@ var blendModeWebGL = PIXI.blendModesWebGL[renderSession.spriteBatch.currentBlendMode]; renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - + PIXI.WebGLGraphics.renderGraphics(this, renderSession); - + // only render if it has children! if(this.children.length) { @@ -413,7 +436,7 @@ if(this._filters)renderSession.filterManager.popFilter(); if(this._mask)renderSession.maskManager.popMask(renderSession); - + renderSession.drawCount++; renderSession.spriteBatch.start(); @@ -424,17 +447,17 @@ * Renders the object using the Canvas renderer * * @method _renderCanvas -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.Graphics.prototype._renderCanvas = function(renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - + var context = renderSession.context; var transform = this.worldTransform; - + if(this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; @@ -528,7 +551,7 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - + var minX = Infinity; var maxX = -Infinity; @@ -606,7 +629,7 @@ { var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height); var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); - + this._cachedSprite = new PIXI.Sprite(texture); this._cachedSprite.buffer = canvasBuffer; @@ -623,7 +646,7 @@ // this._cachedSprite.buffer.context.save(); this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y); - + PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context); this._cachedSprite.alpha = this.alpha; @@ -645,3 +668,4 @@ PIXI.Graphics.RECT = 1; PIXI.Graphics.CIRC = 2; PIXI.Graphics.ELIP = 3; +PIXI.Graphics.RREC = 4; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index cdb4b87..e29392b 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -145,6 +145,42 @@ context.stroke(); } } + else if (data.type === PIXI.Graphics.RREC) + { + var rx = points[0]; + var ry = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + var maxRadius = Math.min(width, height) / 2 | 0; + radius = radius > maxRadius ? maxRadius : radius; + + context.beginPath(); + context.moveTo(rx, ry + radius); + context.lineTo(rx, ry + height - radius); + context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); + context.lineTo(rx + width - radius, ry + height); + context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); + context.lineTo(rx + width, ry + radius); + context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); + context.lineTo(rx + radius, ry); + context.quadraticCurveTo(rx, ry, rx, ry + radius); + context.closePath(); + + if(data.fillColor || data.fillColor === 0) + { + context.globalAlpha = data.fillAlpha * worldAlpha; + context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fill(); + + } + if(data.lineWidth) + { + context.globalAlpha = data.lineAlpha * worldAlpha; + context.stroke(); + } + } } }; @@ -233,5 +269,28 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } + else if (data.type === PIXI.Graphics.RREC) + { + var rx = points[0]; + var ry = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + var maxRadius = Math.min(width, height) / 2 | 0; + radius = radius > maxRadius ? maxRadius : radius; + + context.beginPath(); + context.moveTo(rx, ry + radius); + context.lineTo(rx, ry + height - radius); + context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); + context.lineTo(rx + width - radius, ry + height); + context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); + context.lineTo(rx + width, ry + radius); + context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); + context.lineTo(rx + radius, ry); + context.quadraticCurveTo(rx, ry, rx, ry + radius); + context.closePath(); + } } }; diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 1249672..3530b17 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -99,7 +99,7 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics, gl) { var webGL = graphics._webGL[gl.id]; - + for (var i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; @@ -125,11 +125,15 @@ { PIXI.WebGLGraphics.buildCircle(data, webGL); } + else if(data.type === PIXI.Graphics.RREC) + { + PIXI.WebGLGraphics.buildRoundedRectangle(data, webGL); + } } webGL.lastIndex = graphics.graphicsData.length; - + webGL.glPoints = new Float32Array(webGL.points); @@ -212,6 +216,123 @@ }; /** + * Builds a rounded rectangle to draw + * + * @static + * @private + * @method buildRoundedRectangle + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {Object} + */ +PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) +{ + /** + * Calcul the points for a quadratic bezier curve. + * Based on : https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * + * @param {number} fromX Origin point x + * @param {number} fromY Origin point x + * @param {number} cpX Control point x + * @param {number} cpY Control point y + * @param {number} toX Destination point x + * @param {number} toY Destination point y + * @return {number[]} + */ + function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY) { + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + points = []; + + function getPt(n1 , n2, perc) { + var diff = n2 - n1; + + return n1 + ( diff * perc ); + } + + var j = 0; + for (var i = 0; i <= n; i++ ) + { + j = i / n; + + // The Green Line + xa = getPt( fromX , cpX , j ); + ya = getPt( fromY , cpY , j ); + xb = getPt( cpX , toX , j ); + yb = getPt( cpY , toY , j ); + + // The Black Dot + x = getPt( xa , xb , j ); + y = getPt( ya , yb , j ); + + points.push(x, y); + } + return points; + } + + var points = graphicsData.points; + var x = points[0]; + var y = points[1]; + var width = points[2]; + var height = points[3]; + var radius = points[4]; + + + var recPoints = []; + recPoints.push(x, y + radius); + recPoints = recPoints.concat(quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); + recPoints = recPoints.concat(quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); + recPoints = recPoints.concat(quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); + recPoints = recPoints.concat(quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); + + + if (graphicsData.fill) { + var color = PIXI.hex2rgb(graphicsData.fillColor); + var alpha = graphicsData.fillAlpha; + + var r = color[0] * alpha; + var g = color[1] * alpha; + var b = color[2] * alpha; + + var verts = webGLData.points; + var indices = webGLData.indices; + + var vecPos = verts.length/6; + + var triangles = PIXI.PolyK.Triangulate(recPoints); + + var i = 0; + for (i = 0; i < triangles.length; i+=3) + { + indices.push(triangles[i] + vecPos); + indices.push(triangles[i] + vecPos); + indices.push(triangles[i+1] + vecPos); + indices.push(triangles[i+2] + vecPos); + indices.push(triangles[i+2] + vecPos); + } + + for (i = 0; i < recPoints.length; i++) + { + verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); + } + } + + if (graphicsData.lineWidth) { + var tempPoints = graphicsData.points; + + graphicsData.points = recPoints; + + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** * Builds a circle to draw * * @static @@ -222,7 +343,7 @@ */ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData) { - + // need to convert points to a nice regular data var rectData = graphicsData.points; var x = rectData[0]; diff --git a/test/unit/pixi/primitives/Graphics.js b/test/unit/pixi/primitives/Graphics.js index 2149403..d667df6 100644 --- a/test/unit/pixi/primitives/Graphics.js +++ b/test/unit/pixi/primitives/Graphics.js @@ -11,6 +11,7 @@ expect(Graphics).itself.to.have.property('RECT', 1); expect(Graphics).itself.to.have.property('CIRC', 2); expect(Graphics).itself.to.have.property('ELIP', 3); + expect(Graphics).itself.to.have.property('RREC', 4); }); it('Confirm new instance', function () { @@ -26,6 +27,7 @@ expect(obj).to.respondTo('beginFill'); expect(obj).to.respondTo('endFill'); expect(obj).to.respondTo('drawRect'); + expect(obj).to.respondTo('drawRoundedRect'); expect(obj).to.respondTo('drawCircle'); expect(obj).to.respondTo('drawEllipse'); expect(obj).to.respondTo('clear'); diff --git a/test/unit/pixi/renderers/webgl/WebGLGraphics.js b/test/unit/pixi/renderers/webgl/WebGLGraphics.js index 41bf941..5867b28 100644 --- a/test/unit/pixi/renderers/webgl/WebGLGraphics.js +++ b/test/unit/pixi/renderers/webgl/WebGLGraphics.js @@ -12,6 +12,7 @@ expect(WebGLGraphics).itself.to.respondTo('renderGraphics'); expect(WebGLGraphics).itself.to.respondTo('updateGraphics'); expect(WebGLGraphics).itself.to.respondTo('buildRectangle'); + expect(WebGLGraphics).itself.to.respondTo('buildRoundedRectangle'); expect(WebGLGraphics).itself.to.respondTo('buildCircle'); expect(WebGLGraphics).itself.to.respondTo('buildLine'); expect(WebGLGraphics).itself.to.respondTo('buildPoly');