Add drawPath, cubicCurveTo and make path force-closing closer to Flash (#1140)

Author: Fancy2209

starling/src/starling/display/Canvas.as

@@ -21,6 +21,7 @@ package starling.display
     import starling.geom.Polygon;
     import starling.rendering.IndexData;
     import starling.rendering.VertexData;
+    import starling.rendering.Painter;
     import starling.utils.rad2deg;
 
     /** A display object supporting basic vector drawing functionality. In its current state,
@@ -37,10 +38,19 @@ package starling.display
         public function Canvas()
         {
             _polygons  = new <Polygon>[];
-            _currentPath = new Vector.<Number>();
+            _currentPath = new <Number>[];
             _fillColor = 0xffffff;
             _fillAlpha = 1.0;
             touchGroup = true;
+            
+        }
+
+        /** @inheritDoc */
+        public override function render(painter:Painter):void
+        {
+            // Behave like Flash's Graphics: if path is attempted to be rendered and unfinished, force close it.
+            closeCurrentPathIfNeeded();
+            super.render(painter);
         }
 
         /** @inheritDoc */
@@ -176,6 +186,20 @@ package starling.display
             tesselateCurve(lastX, lastY, controlX, controlY, anchorX, anchorY, _currentPath);
             drawPathIfClosed();
         }
+
+        public function cubicCurveTo(controlX1:Number, controlY1:Number, controlX2:Number, controlY2:Number, anchorX:Number, anchorY:Number):void
+        {
+            if (_currentPath.length == 0)
+            {
+                // Behave like Flash's Graphics: if there's no current point, start at (0, 0).
+                _currentPath.push(0.0, 0.0);
+            }
+            const lastX:Number = _currentPath[_currentPath.length - 2];
+            const lastY:Number = _currentPath[_currentPath.length - 1];
+            tesselateCubicCurve(lastX, lastY, controlX1, controlY1, controlX2, controlY2, anchorX, anchorY, _currentPath, 0);
+            drawPathIfClosed();
+        }
+
         /** Closes the current path if it contains an unfinished polygon. */
         private function closeCurrentPathIfNeeded():void
         {
@@ -198,58 +222,67 @@ package starling.display
         }
 
         /**  Submits a series of IGraphicsData instances for drawing.
-        *
-        * @param graphicsData      A Vector containing graphics objects, each of which much implement the flash.display.IGraphicsData interface.
-        */
+         *
+         * @param graphicsData      A Vector containing graphics objects, each of which must implement the flash.display.IGraphicsData interface.
+         */
         public function drawGraphicsData(graphicsData:Vector.<IGraphicsData>):void
         {
             var graphicsDataLength:int = graphicsData.length;
-            for(var graphPropIndex:int = 0; graphPropIndex < graphicsDataLength; graphPropIndex++)
+            for (var graphPropIndex:int = 0; graphPropIndex < graphicsDataLength; graphPropIndex++)
             {
                 var graphicsProperties:IGraphicsData = graphicsData[graphPropIndex];
 
                 if (graphicsProperties is GraphicsSolidFill)
-                    beginFill((graphicsProperties as GraphicsSolidFill).color, (graphicsProperties as GraphicsSolidFill).alpha);
+                    beginFill(
+                        (graphicsProperties as GraphicsSolidFill).color, 
+                        (graphicsProperties as GraphicsSolidFill).alpha
+                    );
 
                 else if (graphicsProperties is GraphicsPath)
-                {
-                    var i:int = 0;
-                    var data:Vector.<Number> = (graphicsProperties as GraphicsPath).data;
-
-                    var commandLength:int = (graphicsProperties as GraphicsPath).commands.length;
-                    for (var commandIndex:int = 0; commandIndex < commandLength; commandIndex++)
-                    {
-                        var command:int = (graphicsProperties as GraphicsPath).commands[commandIndex];
-                        switch (command)
-                        {
-                            case GraphicsPathCommand.MOVE_TO:
-                                moveTo(data[i], data[i + 1]);
-                                i += 2;
-                                break;
-
-                            case GraphicsPathCommand.LINE_TO:
-                                lineTo(data[i], data[i + 1]);
-                                i += 2;
-                                break;
-
-                            case GraphicsPathCommand.CURVE_TO:
-                                curveTo(data[i], data[i + 1], data[i + 2], data[i + 3]);
-                                i += 4;
-                                break;
-
-                            default:
-                                trace("[Starling] Canvas.drawGraphicsData: Unimplemented Command in Graphics Path of type", command);
-                                break;
-                        }
-                    }
-                }
+                    drawPath((graphicsProperties as GraphicsPath).commands, (graphicsProperties as GraphicsPath).data, (graphicsProperties as GraphicsPath).winding);
 
                 else if (graphicsProperties is GraphicsEndFill)
                     endFill();
 
                 else
                     trace("[Starling] Canvas.drawGraphicsData: Unimplemented Graphics Data in input: ",
-                    graphicsProperties, " at index ", graphicsData.indexOf(graphicsProperties));
+                            graphicsProperties, " at index ", graphicsData.indexOf(graphicsProperties));
+            }
+        }
+
+        public function drawPath(commands:Vector.<int>, data:Vector.<Number>, winding:String = "evenOdd"):void
+        {
+            var i:int = 0;
+            const commandLength:int = commands.length;
+            for (var commandIndex:int = 0; commandIndex < commandLength; commandIndex++)
+            {
+                var command:int = commands[commandIndex];
+                switch (command)
+                {
+                    case GraphicsPathCommand.MOVE_TO:
+                        moveTo(data[i], data[i + 1]);
+                        i += 2;
+                        break;
+
+                    case GraphicsPathCommand.LINE_TO:
+                        lineTo(data[i], data[i + 1]);
+                        i += 2;
+                        break;
+
+                    case GraphicsPathCommand.CURVE_TO:
+                        curveTo(data[i], data[i + 1], data[i + 2], data[i + 3]);
+                        i += 4;
+                        break;
+
+                    case GraphicsPathCommand.CUBIC_CURVE_TO:
+                        cubicCurveTo(data[i], data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5]);
+                        i += 6;
+                        break;
+
+                    default:
+                        trace("[Starling] Canvas.drawPath: Unimplemented Command in Graphics Path of type", command);
+                        break;
+                }
             }
         }
 
@@ -276,7 +309,7 @@ package starling.display
             _polygons[_polygons.length] = polygon;
         }
 
-        /**   Func to tesselate a quadratic Curve using recursion, used in curveTo; converted to AS3 from AwayJS.
+        /**   Func to tesselate a quadratic curve using recursion, used in curveTo; converted to AS3 from AwayJS.
          *    https://github.com/awayjs/graphics/blob/19c9c9912d0254934ba54c9b7049d1b898bf97f2/lib/draw/GraphicsFactoryHelper.ts#L376-L468
          */
         private static function tesselateCurve(startx:Number, starty:Number, cx:Number, cy:Number, endx:Number,
@@ -344,6 +377,79 @@ package starling.display
             tesselateCurve(ax, ay, c2x, c2y, endx, endy, array_out, iterationCnt);
         }
 
+        /**   Func to tesselate a cubic curve using recursion, used in curveTo; converted to AS3 from AwayJS.
+         *    https://github.com/awayjs/graphics/blob/19c9c9912d0254934ba54c9b7049d1b898bf97f2/lib/draw/GraphicsFactoryHelper.ts#L470-L550
+         */
+        private static function tesselateCubicCurve(startx:Number, starty:Number, cx:Number, cy:Number, cx2:Number, cy2:Number, 
+                                                    endx:Number, endy:Number, array_out:Vector.<Number>, iterationCnt:Number = 0):void
+        {
+            const maxIterations:Number = 6;
+            const minAngle:Number = 1;
+            const minLengthSqr:Number = 1;
+
+            // calculate length of segment
+            // this does not include the crtl-point positions
+            const diff_x:Number = endx - startx;
+            const diff_y:Number = endy - starty;
+            const lenSq:Number= diff_x * diff_x + diff_y * diff_y;
+
+            // stop subdividing if the angle or the length is to small
+            if (lenSq < minLengthSqr) {
+                array_out.push(endx, endy);
+                return;
+            }
+
+            // subdivide the curve
+            const c1x:Number = (startx + cx) * 0.5;// new controlpoint 1
+            const c1y:Number = (starty + cy) * 0.5;
+            const c2x:Number = (cx + cx2) * 0.5;// new controlpoint 2
+            const c2y:Number = (cy + cy2) * 0.5;
+            const c3x:Number = (cx2 + endx) * 0.5;// new controlpoint 3
+            const c3y:Number = (cy2 + endy) * 0.5;
+
+            const d1x:Number = (c1x + c2x) * 0.5;// new controlpoint 1
+            const d1y:Number = (c1y + c2y) * 0.5;
+            const d2x:Number = (c2x + c3x) * 0.5;// new controlpoint 2
+            const d2y:Number = (c2y + c3y) * 0.5;
+
+            const ax:Number = (d1x + d2x) * 0.5;// new middlepoint 1
+            const ay:Number = (d1y + d2y) * 0.5;
+
+            // stop tesselation on maxIteration level. Set it to 0 for no tesselation at all.
+            if (iterationCnt >= maxIterations) {
+                array_out.push(ax, ay, endx, endy);
+                return;
+            }
+
+            // calculate angle between segments
+            const angle_1:Number = rad2deg(Math.atan2(cy - starty, cx - startx));
+            const angle_2:Number = rad2deg(Math.atan2(endy - cy, endx - cx));
+            var angle_delta:Number = angle_2 - angle_1;
+
+            // make sure angle is in range -180 - 180
+            while (angle_delta > 180) {
+                angle_delta -= 360;
+            }
+            while (angle_delta < -180) {
+                angle_delta += 360;
+            }
+
+            angle_delta = angle_delta < 0 ? -angle_delta : angle_delta;
+
+            // stop subdividing if the angle or the length is to small
+            if (angle_delta <= minAngle) {
+                array_out.push(endx, endy);
+                return;
+            }
+
+            iterationCnt++;
+
+            tesselateCubicCurve(
+                startx, starty, c1x, c1y, d1x, d1y, ax, ay, array_out, iterationCnt);
+            tesselateCubicCurve(
+                ax, ay, d2x, d2y, c3x, c3y, endx, endy, array_out, iterationCnt);
+	}
+
         private function drawPathIfClosed():void
         {
             if (_currentPath.length < 4) return; // need at least two points