Added stroke alignment property to lineStyle (#4886)

No allows you to specify if a line is inner or outer aligned. 0 =
inner, 1 = outer, 0.5 = middle (default)

src/core/graphics/Graphics.js

@@ -65,6 +65,14 @@ export default class Graphics extends Container
          */
         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
          *
@@ -207,6 +215,7 @@ export default class Graphics extends Container
         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 @@ export default class Graphics extends Container
      * @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 @@ export default class Graphics extends Container
                 this.currentPath.lineWidth = this.lineWidth;
                 this.currentPath.lineColor = this.lineColor;
                 this.currentPath.lineAlpha = this.lineAlpha;
+                this.currentPath.lineAlignment = this.lineAlignment;
             }
         }
 
@@ -733,6 +745,8 @@ export default class Graphics extends Container
         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 @@ export default class Graphics extends Container
             this.fillAlpha,
             this.filling,
             this.nativeLines,
-            shape
+            shape,
+            this.lineAlignment
         );
 
         this.graphicsData.push(data);

src/core/graphics/GraphicsData.js

@@ -16,15 +16,24 @@ export default class GraphicsData
      * @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
          * @member {number}
          */
         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}

src/core/graphics/webgl/utils/buildCircle.js

@@ -85,8 +85,8 @@ export default function buildCircle(graphicsData, webGLData, webGLDataNativeLine
         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)
             );
         }
 

src/core/graphics/webgl/utils/buildLine.js

@@ -112,16 +112,20 @@ function buildLine(graphicsData, webGLData)
     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 @@ function buildLine(graphicsData, webGLData)
         {
             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 @@ function buildLine(graphicsData, webGLData)
             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 @@ function buildLine(graphicsData, webGLData)
     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);