fix(ui-canvas): iOS drawPath and clipPath ignored fill rule

Author: CatchABus

src/ui-canvas/canvas.ios.ts

@@ -494,19 +494,19 @@ export class Matrix implements IMatrix {
         return CGAffineTransformIsIdentity(this.mTransform);
     }
     // public toString(): string {
-    //     return NSStringFromCGAffineTransform(this._transform);
+    //     return NSStringFromCGAffineTransform(this.mTransform);
     // }
     public preTranslate(tx: number, ty: number): boolean {
         return this.preConcat(CGAffineTransformMakeTranslation(tx, ty));
     }
     public setValues(values: number[]): void {
         this.mTransform = CGAffineTransformMake(values[0], values[3], values[1], values[4], values[2], values[5]);
-        // this._transform.a = values[0];
-        // this._transform.c = values[1];
-        // this._transform.tx = values[2];
-        // this._transform.b = values[3];
-        // this._transform.d = values[4];
-        // this._transform.ty = values[5];
+        // this.mTransform.a = values[0];
+        // this.mTransform.c = values[1];
+        // this.mTransform.tx = values[2];
+        // this.mTransform.b = values[3];
+        // this.mTransform.d = values[4];
+        // this.mTransform.ty = values[5];
     }
     public invert(output: IMatrix): boolean {
         (output as Matrix).mTransform = CGAffineTransformInvert(this.mTransform);
@@ -1693,30 +1693,42 @@ export class Canvas implements ICanvas {
         const path = args[0] as Path;
         const op = args[1] as Op;
         const ctx = this.ctx;
+
+        let clipCGPath;
+
         if (op !== undefined) {
             const cgPath = ctx.path;
-            let clipPath = cgPath ? UIBezierPath.bezierPathWithCGPath(cgPath) : UIBezierPath.bezierPathWithRect(CGRectMake(0, 0, this.mWidth, this.mHeight));
+            let clipBPath = cgPath ? UIBezierPath.bezierPathWithCGPath(cgPath) : UIBezierPath.bezierPathWithRect(CGRectMake(0, 0, this.mWidth, this.mHeight));
+
             if (op === Op.DIFFERENCE) {
-                clipPath.appendPath(path.getOrCreateBPath().bezierPathByReversingPath());
+                clipBPath.appendPath(path.getOrCreateBPath().bezierPathByReversingPath());
             } else if (op === Op.REVERSE_DIFFERENCE) {
-                clipPath = clipPath.bezierPathByReversingPath();
-                clipPath.appendPath(path.getOrCreateBPath());
+                clipBPath = clipBPath.bezierPathByReversingPath();
+                clipBPath.appendPath(path.getOrCreateBPath());
             } else if (op === Op.UNION) {
-                clipPath.appendPath(path.getOrCreateBPath());
+                clipBPath.appendPath(path.getOrCreateBPath());
             } else if (op === Op.REPLACE) {
                 CGContextResetClip(ctx);
-                clipPath = path.getOrCreateBPath();
+                clipBPath = path.getOrCreateBPath();
             } else if (op === Op.INTERSECT) {
                 console.error('clipPath Op.INTERSECT not implemented yet');
             } else if (op === Op.XOR) {
                 console.error('clipPath Op.INTERSECT not implemented yet');
             }
-            CGContextAddPath(ctx, clipPath.CGPath);
-            CGContextClip(ctx);
+
+            clipCGPath = clipBPath.CGPath;
+        } else {
+            clipCGPath = path.getCGPath();
+        }
+
+        CGContextAddPath(ctx, clipCGPath);
+
+        if (path.getFillType() === FillType.EVEN_ODD || path.getFillType() === FillType.INVERSE_EVEN_ODD) {
+            CGContextEOClip(ctx);
         } else {
-            CGContextAddPath(ctx, path.getCGPath());
             CGContextClip(ctx);
         }
+
         // clipPath(path: IPath): boolean;
         // clipPath(path: IPath, op: Op): boolean;
         // clipPath(path: any, op?: any)
@@ -1920,18 +1932,20 @@ export class Canvas implements ICanvas {
         } else {
             cgPath = path;
         }
-        function createBPath() {
+
+        const createBPath = () => {
             if (!bPath) {
                 if (!cgPath) {
                     cgPath = CGContextCopyPath(ctx);
                 }
                 bPath = UIBezierPath.bezierPathWithCGPath(cgPath);
             }
-        }
+        };
+
         if (paint.shader && !cgPath) {
             cgPath = CGContextCopyPath(ctx);
         }
-        if (path && (path._fillType === FillType.INVERSE_WINDING || path._fillType === FillType.INVERSE_EVEN_ODD)) {
+        if (path && (path.getFillType() === FillType.INVERSE_WINDING || path.getFillType() === FillType.INVERSE_EVEN_ODD)) {
             createBPath();
             bPath = bPath.bezierPathByReversingPath();
             cgPath = bPath.CGPath;
@@ -1977,15 +1991,15 @@ export class Canvas implements ICanvas {
                 }
                 if (paint.style === Style.FILL) {
                     // CGContextFillPath(ctx);
-                    if (path && (path._fillType === FillType.EVEN_ODD || path._fillType === FillType.INVERSE_EVEN_ODD)) {
+                    if (path && (path.getFillType() === FillType.EVEN_ODD || path.getFillType() === FillType.INVERSE_EVEN_ODD)) {
                         CGContextDrawPath(ctx, CGPathDrawingMode.kCGPathEOFill);
                     } else {
                         CGContextDrawPath(ctx, CGPathDrawingMode.kCGPathFill);
                     }
                 } else if (paint.style === Style.STROKE) {
                     CGContextDrawPath(ctx, CGPathDrawingMode.kCGPathStroke);
                 } else {
-                    if (path && (path._fillType === FillType.EVEN_ODD || path._fillType === FillType.INVERSE_EVEN_ODD)) {
+                    if (path && (path.getFillType() === FillType.EVEN_ODD || path.getFillType() === FillType.INVERSE_EVEN_ODD)) {
                         CGContextDrawPath(ctx, CGPathDrawingMode.kCGPathEOFillStroke);
                     } else {
                         CGContextDrawPath(ctx, CGPathDrawingMode.kCGPathFillStroke);