diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index 49436c7..637416c 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -267,6 +267,11 @@ lineTextureStyle(width = 0, texture = Texture.WHITE, color = 0xFFFFFF, alpha = 1, matrix = null, alignment = 0.5, native = false) { + if (this.currentPath) + { + this.startPoly(); + } + const visible = width > 0 && alpha > 0; if (!visible) @@ -275,25 +280,6 @@ } else { - if (this.currentPath) - { - if (this.currentPath.points.length) - { - // TODO we need to add a fix here for multiple lines - // with different styles.. - - // const shape = new Polygon(this.currentPath.points.slice(-2)); - - // shape.closed = false; - - // this.drawShape(shape); - } - else - { - // this.currentPath.points.length = 0; - } - } - Object.assign(this._lineStyle, { color, width, @@ -306,24 +292,6 @@ }); } - /* if (this.currentPath) - { - if (this.currentPath.shape.points.length) - { - // halfway through a line? start a new one! - const shape = new Polygon(this.currentPath.shape.points.slice(-2)); - - shape.closed = false; - - this.drawShape(shape); - } - else - { - // otherwise its empty so lets just set the line properties - this.currentPath.lineStyle = style; - } - }*/ - return this; } @@ -333,8 +301,24 @@ */ startPoly() { - this.currentPath = new Polygon(); - this.currentPath.closed = false; + if (this.currentPath) + { + const points = this.currentPath.points; + const len = this.currentPath.points.length; + + if (len > 2) + { + this.drawShape(this.currentPath); + this.currentPath = new Polygon(); + this.currentPath.closed = false; + this.currentPath.points.push(points[len - 2], points[len - 1]); + } + } + else + { + this.currentPath = new Polygon(); + this.currentPath.closed = false; + } } /** @@ -367,7 +351,8 @@ moveTo(x, y) { this.startPoly(); - this.currentPath.points.push(x, y); + this.currentPath.points[0] = x; + this.currentPath.points[1] = y; return this; } @@ -583,6 +568,11 @@ */ beginTextureFill(texture = Texture.WHITE, color = 0xFFFFFF, alpha = 1, matrix = null) { + if (this.currentPath) + { + this.startPoly(); + } + const visible = alpha > 0; if (!visible) @@ -591,11 +581,6 @@ } else { - if (this.currentPath) - { - this.finishPoly(); - } - Object.assign(this._fillStyle, { color, alpha, diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index 49436c7..637416c 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -267,6 +267,11 @@ lineTextureStyle(width = 0, texture = Texture.WHITE, color = 0xFFFFFF, alpha = 1, matrix = null, alignment = 0.5, native = false) { + if (this.currentPath) + { + this.startPoly(); + } + const visible = width > 0 && alpha > 0; if (!visible) @@ -275,25 +280,6 @@ } else { - if (this.currentPath) - { - if (this.currentPath.points.length) - { - // TODO we need to add a fix here for multiple lines - // with different styles.. - - // const shape = new Polygon(this.currentPath.points.slice(-2)); - - // shape.closed = false; - - // this.drawShape(shape); - } - else - { - // this.currentPath.points.length = 0; - } - } - Object.assign(this._lineStyle, { color, width, @@ -306,24 +292,6 @@ }); } - /* if (this.currentPath) - { - if (this.currentPath.shape.points.length) - { - // halfway through a line? start a new one! - const shape = new Polygon(this.currentPath.shape.points.slice(-2)); - - shape.closed = false; - - this.drawShape(shape); - } - else - { - // otherwise its empty so lets just set the line properties - this.currentPath.lineStyle = style; - } - }*/ - return this; } @@ -333,8 +301,24 @@ */ startPoly() { - this.currentPath = new Polygon(); - this.currentPath.closed = false; + if (this.currentPath) + { + const points = this.currentPath.points; + const len = this.currentPath.points.length; + + if (len > 2) + { + this.drawShape(this.currentPath); + this.currentPath = new Polygon(); + this.currentPath.closed = false; + this.currentPath.points.push(points[len - 2], points[len - 1]); + } + } + else + { + this.currentPath = new Polygon(); + this.currentPath.closed = false; + } } /** @@ -367,7 +351,8 @@ moveTo(x, y) { this.startPoly(); - this.currentPath.points.push(x, y); + this.currentPath.points[0] = x; + this.currentPath.points[1] = y; return this; } @@ -583,6 +568,11 @@ */ beginTextureFill(texture = Texture.WHITE, color = 0xFFFFFF, alpha = 1, matrix = null) { + if (this.currentPath) + { + this.startPoly(); + } + const visible = alpha > 0; if (!visible) @@ -591,11 +581,6 @@ } else { - if (this.currentPath) - { - this.finishPoly(); - } - Object.assign(this._fillStyle, { color, alpha, diff --git a/packages/graphics/test/index.js b/packages/graphics/test/index.js index 4330b06..8bbe9ad 100644 --- a/packages/graphics/test/index.js +++ b/packages/graphics/test/index.js @@ -365,4 +365,49 @@ } })); }); + + describe('startPoly', function () + { + it('should fill two triangles', withGL(function () + { + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0xffffff, 1.0); + graphics.moveTo(50, 50); + graphics.lineTo(250, 50); + graphics.lineTo(100, 100); + graphics.lineTo(50, 50); + + graphics.moveTo(250, 50); + graphics.lineTo(450, 50); + graphics.lineTo(300, 100); + graphics.lineTo(250, 50); + graphics.endFill(); + + const data = graphics.geometry.graphicsData; + + expect(data.length).to.equals(2); + expect(data[0].shape.points).to.eql([50, 50, 250, 50, 100, 100, 50, 50]); + expect(data[1].shape.points).to.eql([250, 50, 450, 50, 300, 100, 250, 50]); + })); + + it('should honor lineStyle break', withGL(function () + { + const graphics = new PIXI.Graphics(); + + graphics.lineStyle(1.0, 0xffffff); + graphics.moveTo(50, 50); + graphics.lineTo(250, 50); + graphics.lineStyle(2.0, 0xffffff); + graphics.lineTo(100, 100); + graphics.lineTo(50, 50); + graphics.lineStyle(0.0); + + const data = graphics.geometry.graphicsData; + + expect(data.length).to.equals(2); + expect(data[0].shape.points).to.eql([50, 50, 250, 50]); + expect(data[1].shape.points).to.eql([250, 50, 100, 100, 50, 50]); + })); + }); });