Revert "Revert "change circle radius percentage calculation""

This reverts commit f717d8bd93.

Example/examples/Circle.js

@@ -11,12 +11,12 @@ class CircleExample extends Component{
     render() {
         return <Svg
             height="100"
-            width="100"
+            width="140"
         >
             <Circle
-                cx="50"
+                cx="50%"
-                cy="50"
+                cy="50%"
-                r="50"
+                r="40%"
                 fill="pink"
             />
         </Svg>;

Example/examples/Ellipse.js

@@ -14,10 +14,10 @@ class EllipseExample extends Component{
             width="110"
         >
             <Ellipse
-                cx="55"
+                cx="50%"
-                cy="55"
+                cy="50%"
-                rx="50"
+                rx="45%"
-                ry="30"
+                ry="30%"
                 stroke="purple"
                 strokeWidth="2"
                 fill="yellow"

Example/examples/Line.js

@@ -15,10 +15,10 @@ class LineExample extends Component{
             width="100"
         >
             <Line
-                x1="0"
+                x1="10%"
-                y1="0"
+                y1="10%"
-                x2="100"
+                x2="90%"
-                y2="100"
+                y2="90%"
                 stroke="red"
                 strokeWidth="2"
             />

Example/examples/Rect.js

@@ -14,10 +14,10 @@ class RectExample extends Component{
             height="60"
         >
             <Rect
-                x="25"
+                x="5%"
-                y="5"
+                y="5%"
-                width="150"
+                width="90%"
-                height="50"
+                height="90%"
                 fill="rgb(0,0,255)"
                 strokeWidth="3"
                 stroke="rgb(0,0,0)"

README.md

@@ -568,8 +568,6 @@ npm install
 
 #### Thanks:
 
-* [SVG bounding Algorithm](https://github.com/icons8/svg-path-bounding-box)
-* [Circle drawing with svg arc path](http://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path/10477334#10477334)
 * [w3schools.com SVG Tutorial](http://www.w3schools.com/svg/)
 * [SVG Tutorial](http://tutorials.jenkov.com/svg/index.html)
 * [MDN](https://developer.mozilla.org/en/docs/Web/SVG)

android/src/main/java/com/horcrux/svg/RNSVGShapeShadowNode.java

@@ -14,6 +14,7 @@ import android.graphics.Paint;
 import android.graphics.Path;
 import android.graphics.Rect;
 import android.graphics.RectF;
+import android.util.Log;
 
 import com.facebook.common.logging.FLog;
 import com.facebook.react.bridge.ReadableMap;
@@ -51,7 +52,18 @@ public class RNSVGShapeShadowNode extends RNSVGPathShadowNode {
                     // TODO:
                     float cx = getActualProp("cx", width);
                     float cy = getActualProp("cy", height);
-                    float r = getActualProp("r", width);
+
+                    float r;
+                    ReadableMap value = mShape.getMap("r");
+                    if (value.getBoolean("percentage")) {
+                        float percent = (float)value.getDouble("value");
+                        float powX = (float)Math.pow((width * percent), 2);
+                        float powY = (float)Math.pow((height*percent), 2);
+                        r = (float)Math.sqrt(powX + powY) / (float)Math.sqrt(2);
+                    } else {
+                        r =  (float)value.getDouble("value") * mScale;
+                    }
+
                     mPath.addCircle(cx, cy, r, Path.Direction.CW);
                     break;
                 }
@@ -120,7 +132,7 @@ public class RNSVGShapeShadowNode extends RNSVGPathShadowNode {
             ReadableMap value = mShape.getMap(name);
 
             if (value.getBoolean("percentage")) {
-                return (float)value.getDouble("value") * relative * mScale;
+                return (float)value.getDouble("value") * relative;
             } else {
                 return (float)value.getDouble("value") * mScale;
             }

ios/RNSVGShape.m

@@ -30,7 +30,20 @@
             // draw circle
             CGFloat cx = [self getActualProp:@"cx" relative:width];
             CGFloat cy = [self getActualProp:@"cy" relative:height];
-            CGFloat r = [self getActualProp:@"r" relative:height];
+            
+            
+            CGFloat r;
+            // radius in percentage calculate formula:
+            // radius = sqrt(pow((width*percent), 2) + pow((height*percent), 2)) / sqrt(2)
+            NSDictionary *prop = [self.shape objectForKey:@"r"];
+            CGFloat value = [[prop objectForKey:@"value"] floatValue];
+            if ([[prop objectForKey:@"percentage"] integerValue] == 1) {
+                r = sqrt(pow((width * value), 2) + pow((height * value), 2)) / sqrt(2);
+
+            } else {
+                r = value;
+            }
+            
             CGPathAddArc(path, nil, cx, cy, r, -M_PI, M_PI, YES);
             break;
         }

lib/percentToFloat.js

@@ -1,5 +1,10 @@
 let percentReg = /^(\-?\d+(?:\.\d+)?)(%?)$/;
 export default function (percent) {
     let matched = percent.match(percentReg);
+    if (!matched) {
+        console.warn(`\`${percent}\` is not a valid number or percentage string.`);
+        return 0;
+    }
+
     return matched[2] ? matched[1] / 100 : +matched[1];
 }