diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 8083d2a..1f66403 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -66,6 +66,14 @@ this.lineColor = 0; /** + * The alignment of any lines drawn (0.5 = middle, 1 = outter, 0 = inner). + * + * @member {number} + * @default 0 + */ + this.lineAlignment = 0.5; + + /** * Graphics data * * @member {PIXI.GraphicsData[]} @@ -207,6 +215,7 @@ clone.fillAlpha = this.fillAlpha; clone.lineWidth = this.lineWidth; clone.lineColor = this.lineColor; + clone.lineAlignment = this.lineAlignment; clone.tint = this.tint; clone.blendMode = this.blendMode; clone.isMask = this.isMask; @@ -234,13 +243,15 @@ * @param {number} [lineWidth=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style + * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - lineStyle(lineWidth = 0, color = 0, alpha = 1) + lineStyle(lineWidth = 0, color = 0, alpha = 1, alignment = 0.5) { this.lineWidth = lineWidth; this.lineColor = color; this.lineAlpha = alpha; + this.lineAlignment = alignment; if (this.currentPath) { @@ -259,6 +270,7 @@ this.currentPath.lineWidth = this.lineWidth; this.currentPath.lineColor = this.lineColor; this.currentPath.lineAlpha = this.lineAlpha; + this.currentPath.lineAlignment = this.lineAlignment; } } @@ -733,6 +745,8 @@ if (this.lineWidth || this.filling || this.graphicsData.length > 0) { this.lineWidth = 0; + this.lineAlignment = 0.5; + this.filling = false; this.boundsDirty = -1; @@ -1074,7 +1088,8 @@ this.fillAlpha, this.filling, this.nativeLines, - shape + shape, + this.lineAlignment ); this.graphicsData.push(data); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 8083d2a..1f66403 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -66,6 +66,14 @@ this.lineColor = 0; /** + * The alignment of any lines drawn (0.5 = middle, 1 = outter, 0 = inner). + * + * @member {number} + * @default 0 + */ + this.lineAlignment = 0.5; + + /** * Graphics data * * @member {PIXI.GraphicsData[]} @@ -207,6 +215,7 @@ clone.fillAlpha = this.fillAlpha; clone.lineWidth = this.lineWidth; clone.lineColor = this.lineColor; + clone.lineAlignment = this.lineAlignment; clone.tint = this.tint; clone.blendMode = this.blendMode; clone.isMask = this.isMask; @@ -234,13 +243,15 @@ * @param {number} [lineWidth=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style + * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - lineStyle(lineWidth = 0, color = 0, alpha = 1) + lineStyle(lineWidth = 0, color = 0, alpha = 1, alignment = 0.5) { this.lineWidth = lineWidth; this.lineColor = color; this.lineAlpha = alpha; + this.lineAlignment = alignment; if (this.currentPath) { @@ -259,6 +270,7 @@ this.currentPath.lineWidth = this.lineWidth; this.currentPath.lineColor = this.lineColor; this.currentPath.lineAlpha = this.lineAlpha; + this.currentPath.lineAlignment = this.lineAlignment; } } @@ -733,6 +745,8 @@ if (this.lineWidth || this.filling || this.graphicsData.length > 0) { this.lineWidth = 0; + this.lineAlignment = 0.5; + this.filling = false; this.boundsDirty = -1; @@ -1074,7 +1088,8 @@ this.fillAlpha, this.filling, this.nativeLines, - shape + shape, + this.lineAlignment ); this.graphicsData.push(data); diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index f9ff7ed..382074d 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -16,8 +16,9 @@ * @param {boolean} fill - whether or not the shape is filled with a colour * @param {boolean} nativeLines - the method for drawing lines * @param {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Polygon} shape - The shape object to draw. + * @param {number} lineAlignment - the alignment of the line. */ - constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape) + constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape, lineAlignment) { /** * the width of the line to draw @@ -26,6 +27,14 @@ this.lineWidth = lineWidth; /** + * The alignment of any lines drawn (0.5 = middle, 1 = outter, 0 = inner). + * + * @member {number} + * @default 0 + */ + this.lineAlignment = lineAlignment; + + /** * if true the liens will be draw using LINES instead of TRIANGLE_STRIP * @member {boolean} */ diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 8083d2a..1f66403 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -66,6 +66,14 @@ this.lineColor = 0; /** + * The alignment of any lines drawn (0.5 = middle, 1 = outter, 0 = inner). + * + * @member {number} + * @default 0 + */ + this.lineAlignment = 0.5; + + /** * Graphics data * * @member {PIXI.GraphicsData[]} @@ -207,6 +215,7 @@ clone.fillAlpha = this.fillAlpha; clone.lineWidth = this.lineWidth; clone.lineColor = this.lineColor; + clone.lineAlignment = this.lineAlignment; clone.tint = this.tint; clone.blendMode = this.blendMode; clone.isMask = this.isMask; @@ -234,13 +243,15 @@ * @param {number} [lineWidth=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style + * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - lineStyle(lineWidth = 0, color = 0, alpha = 1) + lineStyle(lineWidth = 0, color = 0, alpha = 1, alignment = 0.5) { this.lineWidth = lineWidth; this.lineColor = color; this.lineAlpha = alpha; + this.lineAlignment = alignment; if (this.currentPath) { @@ -259,6 +270,7 @@ this.currentPath.lineWidth = this.lineWidth; this.currentPath.lineColor = this.lineColor; this.currentPath.lineAlpha = this.lineAlpha; + this.currentPath.lineAlignment = this.lineAlignment; } } @@ -733,6 +745,8 @@ if (this.lineWidth || this.filling || this.graphicsData.length > 0) { this.lineWidth = 0; + this.lineAlignment = 0.5; + this.filling = false; this.boundsDirty = -1; @@ -1074,7 +1088,8 @@ this.fillAlpha, this.filling, this.nativeLines, - shape + shape, + this.lineAlignment ); this.graphicsData.push(data); diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index f9ff7ed..382074d 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -16,8 +16,9 @@ * @param {boolean} fill - whether or not the shape is filled with a colour * @param {boolean} nativeLines - the method for drawing lines * @param {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Polygon} shape - The shape object to draw. + * @param {number} lineAlignment - the alignment of the line. */ - constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape) + constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape, lineAlignment) { /** * the width of the line to draw @@ -26,6 +27,14 @@ this.lineWidth = lineWidth; /** + * The alignment of any lines drawn (0.5 = middle, 1 = outter, 0 = inner). + * + * @member {number} + * @default 0 + */ + this.lineAlignment = lineAlignment; + + /** * if true the liens will be draw using LINES instead of TRIANGLE_STRIP * @member {boolean} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 14dcdbb..cbcf1bd 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -85,8 +85,8 @@ for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push( - x + (Math.sin(seg * i) * width), - y + (Math.cos(seg * i) * height) + x + (Math.sin(seg * -i) * width), + y + (Math.cos(seg * -i) * height) ); } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 8083d2a..1f66403 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -66,6 +66,14 @@ this.lineColor = 0; /** + * The alignment of any lines drawn (0.5 = middle, 1 = outter, 0 = inner). + * + * @member {number} + * @default 0 + */ + this.lineAlignment = 0.5; + + /** * Graphics data * * @member {PIXI.GraphicsData[]} @@ -207,6 +215,7 @@ clone.fillAlpha = this.fillAlpha; clone.lineWidth = this.lineWidth; clone.lineColor = this.lineColor; + clone.lineAlignment = this.lineAlignment; clone.tint = this.tint; clone.blendMode = this.blendMode; clone.isMask = this.isMask; @@ -234,13 +243,15 @@ * @param {number} [lineWidth=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style + * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - lineStyle(lineWidth = 0, color = 0, alpha = 1) + lineStyle(lineWidth = 0, color = 0, alpha = 1, alignment = 0.5) { this.lineWidth = lineWidth; this.lineColor = color; this.lineAlpha = alpha; + this.lineAlignment = alignment; if (this.currentPath) { @@ -259,6 +270,7 @@ this.currentPath.lineWidth = this.lineWidth; this.currentPath.lineColor = this.lineColor; this.currentPath.lineAlpha = this.lineAlpha; + this.currentPath.lineAlignment = this.lineAlignment; } } @@ -733,6 +745,8 @@ if (this.lineWidth || this.filling || this.graphicsData.length > 0) { this.lineWidth = 0; + this.lineAlignment = 0.5; + this.filling = false; this.boundsDirty = -1; @@ -1074,7 +1088,8 @@ this.fillAlpha, this.filling, this.nativeLines, - shape + shape, + this.lineAlignment ); this.graphicsData.push(data); diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index f9ff7ed..382074d 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -16,8 +16,9 @@ * @param {boolean} fill - whether or not the shape is filled with a colour * @param {boolean} nativeLines - the method for drawing lines * @param {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Polygon} shape - The shape object to draw. + * @param {number} lineAlignment - the alignment of the line. */ - constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape) + constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape, lineAlignment) { /** * the width of the line to draw @@ -26,6 +27,14 @@ this.lineWidth = lineWidth; /** + * The alignment of any lines drawn (0.5 = middle, 1 = outter, 0 = inner). + * + * @member {number} + * @default 0 + */ + this.lineAlignment = lineAlignment; + + /** * if true the liens will be draw using LINES instead of TRIANGLE_STRIP * @member {boolean} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 14dcdbb..cbcf1bd 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -85,8 +85,8 @@ for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push( - x + (Math.sin(seg * i) * width), - y + (Math.cos(seg * i) * height) + x + (Math.sin(seg * -i) * width), + y + (Math.cos(seg * -i) * height) ); } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 07d9672..d520228 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -112,16 +112,20 @@ perpx *= width; perpy *= width; + const ratio = graphicsData.lineAlignment;// 0.5; + const r1 = (1 - ratio) * 2; + const r2 = ratio * 2; + // start verts.push( - p1x - perpx, - p1y - perpy, + p1x - (perpx * r1), + p1y - (perpy * r1), r, g, b, alpha ); verts.push( - p1x + perpx, - p1y + perpy, + p1x + (perpx * r2), + p1y + (perpy * r2), r, g, b, alpha ); @@ -167,14 +171,14 @@ { denom += 10.1; verts.push( - p2x - perpx, - p2y - perpy, + p2x - (perpx * r1), + p2y - (perpy * r1), r, g, b, alpha ); verts.push( - p2x + perpx, - p2y + perpy, + p2x + (perpx * r2), + p2y + (perpy * r2), r, g, b, alpha ); @@ -196,23 +200,23 @@ perp3x *= width; perp3y *= width; - verts.push(p2x - perp3x, p2y - perp3y); + verts.push(p2x - (perp3x * r1), p2y - (perp3y * r1)); verts.push(r, g, b, alpha); - verts.push(p2x + perp3x, p2y + perp3y); + verts.push(p2x + (perp3x * r2), p2y + (perp3y * r2)); verts.push(r, g, b, alpha); - verts.push(p2x - perp3x, p2y - perp3y); + verts.push(p2x - (perp3x * r2 * r1), p2y - (perp3y * r1)); verts.push(r, g, b, alpha); indexCount++; } else { - verts.push(px, py); + verts.push(p2x + ((px - p2x) * r1), p2y + ((py - p2y) * r1)); verts.push(r, g, b, alpha); - verts.push(p2x - (px - p2x), p2y - (py - p2y)); + verts.push(p2x - ((px - p2x) * r2), p2y - ((py - p2y) * r2)); verts.push(r, g, b, alpha); } } @@ -232,10 +236,10 @@ perpx *= width; perpy *= width; - verts.push(p2x - perpx, p2y - perpy); + verts.push(p2x - (perpx * r1), p2y - (perpy * r1)); verts.push(r, g, b, alpha); - verts.push(p2x + perpx, p2y + perpy); + verts.push(p2x + (perpx * r2), p2y + (perpy * r2)); verts.push(r, g, b, alpha); indices.push(indexStart);