diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f18c736..5bdecf4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1036,6 +1036,30 @@ return texture; }; +Graphics.prototype.closePath = function () +{ + // ok so close path assumes next one is a hole! + var currentPath = this.currentPath; + if (currentPath && currentPath.shape) + { + currentPath.shape.close(); + } + return this; +}; + +Graphics.prototype.addHole = function() +{ + // this is a hole! + var hole = this.graphicsData.pop(); + + this.currentPath = this.graphicsData[this.graphicsData.length-1]; + + this.currentPath.addHole(hole.shape); + this.currentPath = null; + + return this; +}; + /** * Destroys the Graphics object. */ diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f18c736..5bdecf4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1036,6 +1036,30 @@ return texture; }; +Graphics.prototype.closePath = function () +{ + // ok so close path assumes next one is a hole! + var currentPath = this.currentPath; + if (currentPath && currentPath.shape) + { + currentPath.shape.close(); + } + return this; +}; + +Graphics.prototype.addHole = function() +{ + // this is a hole! + var hole = this.graphicsData.pop(); + + this.currentPath = this.graphicsData[this.graphicsData.length-1]; + + this.currentPath.addHole(hole.shape); + this.currentPath = null; + + return this; +}; + /** * Destroys the Graphics object. */ diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index bf9b044..7fe1176 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -51,6 +51,9 @@ */ this.fill = fill; + + this.holes = []; + /* * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ @@ -83,9 +86,15 @@ ); }; +GraphicsData.prototype.addHole = function (shape) +{ + this.holes.push(shape); +}; + /** * Destroys the Graphics data. */ GraphicsData.prototype.destroy = function () { this.shape = null; + this.holes = null; }; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f18c736..5bdecf4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1036,6 +1036,30 @@ return texture; }; +Graphics.prototype.closePath = function () +{ + // ok so close path assumes next one is a hole! + var currentPath = this.currentPath; + if (currentPath && currentPath.shape) + { + currentPath.shape.close(); + } + return this; +}; + +Graphics.prototype.addHole = function() +{ + // this is a hole! + var hole = this.graphicsData.pop(); + + this.currentPath = this.graphicsData[this.graphicsData.length-1]; + + this.currentPath.addHole(hole.shape); + this.currentPath = null; + + return this; +}; + /** * Destroys the Graphics object. */ diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index bf9b044..7fe1176 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -51,6 +51,9 @@ */ this.fill = fill; + + this.holes = []; + /* * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ @@ -83,9 +86,15 @@ ); }; +GraphicsData.prototype.addHole = function (shape) +{ + this.holes.push(shape); +}; + /** * Destroys the Graphics data. */ GraphicsData.prototype.destroy = function () { this.shape = null; + this.holes = null; }; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index eadb5d4..54e9a9b 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -15,20 +15,21 @@ var points = graphicsData.points; - // need to add the points the the graphics object.. - if (graphicsData.shape.closed) - { - // close the poly if the value is true! - if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) - { - points.push(points[0], points[1]); - } - } - - if(graphicsData.fill && points.length > 6) { + var holeArray = []; + // Process holes.. + var holes = graphicsData.holes; + + for (var i = 0; i < holes.length; i++) { + var hole = holes[i]; + + holeArray.push(points.length/2); + + points = points.concat(hole.points); + } + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -42,7 +43,7 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = earcut(points, null, 2); + var triangles = earcut(points, holeArray, 2); if (!triangles) { return; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f18c736..5bdecf4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1036,6 +1036,30 @@ return texture; }; +Graphics.prototype.closePath = function () +{ + // ok so close path assumes next one is a hole! + var currentPath = this.currentPath; + if (currentPath && currentPath.shape) + { + currentPath.shape.close(); + } + return this; +}; + +Graphics.prototype.addHole = function() +{ + // this is a hole! + var hole = this.graphicsData.pop(); + + this.currentPath = this.graphicsData[this.graphicsData.length-1]; + + this.currentPath.addHole(hole.shape); + this.currentPath = null; + + return this; +}; + /** * Destroys the Graphics object. */ diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index bf9b044..7fe1176 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -51,6 +51,9 @@ */ this.fill = fill; + + this.holes = []; + /* * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ @@ -83,9 +86,15 @@ ); }; +GraphicsData.prototype.addHole = function (shape) +{ + this.holes.push(shape); +}; + /** * Destroys the Graphics data. */ GraphicsData.prototype.destroy = function () { this.shape = null; + this.holes = null; }; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index eadb5d4..54e9a9b 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -15,20 +15,21 @@ var points = graphicsData.points; - // need to add the points the the graphics object.. - if (graphicsData.shape.closed) - { - // close the poly if the value is true! - if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) - { - points.push(points[0], points[1]); - } - } - - if(graphicsData.fill && points.length > 6) { + var holeArray = []; + // Process holes.. + var holes = graphicsData.holes; + + for (var i = 0; i < holes.length; i++) { + var hole = holes[i]; + + holeArray.push(points.length/2); + + points = points.concat(hole.points); + } + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -42,7 +43,7 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = earcut(points, null, 2); + var triangles = earcut(points, holeArray, 2); if (!triangles) { return; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 3119ac9..47b2d4e 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -70,6 +70,18 @@ return new Polygon(this.points.slice()); }; + +Polygon.prototype.close = function () +{ + var points = this.points; + + // close the poly if the value is true! + if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) + { + points.push(points[0], points[1]); + } +}; + /** * Checks whether the x and y coordinates passed to this function are contained within this polygon *