fix: units in linear and radial gradients

fixes #1110 fixes #1118
software-mansion · Sep 27, 2019 · 70c54e6 · 70c54e6
1 parent e91b406
commit 70c54e6
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 140 deletions.
diff --git a/android/src/main/java/com/horcrux/svg/Brush.java b/android/src/main/java/com/horcrux/svg/Brush.java
@@ -171,10 +171,10 @@ void setupPaint(Paint paint, RectF pathBoundingBox, float scale, float opacity)
         }
 
         if (mType == BrushType.LINEAR_GRADIENT) {
-            double x1 = PropHelper.fromRelative(mPoints[0], width, offsetX, scale, textSize);
-            double y1 = PropHelper.fromRelative(mPoints[1], height, offsetY, scale, textSize);
-            double x2 = PropHelper.fromRelative(mPoints[2], width, offsetX, scale, textSize);
-            double y2 = PropHelper.fromRelative(mPoints[3], height, offsetY, scale, textSize);
+            double x1 = getVal(mPoints[0], width, scale, textSize) + offsetX;
+            double y1 = getVal(mPoints[1], height, scale, textSize) + offsetY;
+            double x2 = getVal(mPoints[2], width, scale, textSize) + offsetX;
+            double y2 = getVal(mPoints[3], height, scale, textSize) + offsetY;
 
             Shader linearGradient = new LinearGradient(
                 (float) x1,
@@ -193,13 +193,18 @@ void setupPaint(Paint paint, RectF pathBoundingBox, float scale, float opacity)
 
             paint.setShader(linearGradient);
         } else if (mType == BrushType.RADIAL_GRADIENT) {
-            double rx = PropHelper.fromRelative(mPoints[2], width, 0f, scale, textSize);
-            double ry = PropHelper.fromRelative(mPoints[3], height, 0f, scale, textSize);
-            double cx = PropHelper.fromRelative(mPoints[4], width, offsetX, scale, textSize);
-            double cy = PropHelper.fromRelative(mPoints[5], height, offsetY, scale, textSize) / (ry / rx);
+            double rx = getVal(mPoints[2], width, scale, textSize);
+            double ry = getVal(mPoints[3], height, scale, textSize);
+
+            double ratio = ry / rx;
+
+            double cx = getVal(mPoints[4], width, scale, textSize) + offsetX;
+            double cy = getVal(mPoints[5], height, scale, textSize) + offsetY / ratio;
+
             // TODO: support focus point.
             //double fx = PropHelper.fromRelative(mPoints[0], width, offsetX, scale);
             //double fy = PropHelper.fromRelative(mPoints[1], height, offsetY, scale) / (ry / rx);
+
             Shader radialGradient = new RadialGradient(
                     (float) cx,
                     (float) cy,
@@ -210,7 +215,7 @@ void setupPaint(Paint paint, RectF pathBoundingBox, float scale, float opacity)
             );
 
             Matrix radialMatrix = new Matrix();
-            radialMatrix.preScale(1f, (float) (ry / rx));
+            radialMatrix.preScale(1f, (float) ratio);
 
             if (mMatrix != null) {
                 radialMatrix.preConcat(mMatrix);

diff --git a/ios/Brushes/RNSVGBrush.h b/ios/Brushes/RNSVGBrush.h
@@ -8,7 +8,6 @@
 
 #import <CoreGraphics/CoreGraphics.h>
 #import <Foundation/Foundation.h>
-#import "RNSVGPercentageConverter.h"
 #import "RNSVGPainter.h"
 
 @interface RNSVGBrush : NSObject

diff --git a/ios/Brushes/RNSVGPainter.m b/ios/Brushes/RNSVGPainter.m
@@ -8,7 +8,6 @@
 
 #import "RNSVGPainter.h"
 #import "RNSVGPattern.h"
-#import "RNSVGPercentageConverter.h"
 #import "RNSVGViewBox.h"
 
 @implementation RNSVGPainter
@@ -188,7 +187,6 @@ - (void)paintPattern:(CGContextRef)context bounds:(CGRect)bounds
 
 - (void)paintLinearGradient:(CGContextRef)context bounds:(CGRect)bounds
 {
-
     CGGradientRef gradient = CGGradientRetain([RCTConvert RNSVGCGGradient:_colors]);
     CGGradientDrawingOptions extendOptions = kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation;
 
@@ -198,19 +196,10 @@ - (void)paintLinearGradient:(CGContextRef)context bounds:(CGRect)bounds
     CGFloat offsetX = CGRectGetMinX(rect);
     CGFloat offsetY = CGRectGetMinY(rect);
 
-    CGFloat x1 = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:0]
-                                                relative:width
-                                                  offset:offsetX];
-    CGFloat y1 = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:1]
-                                                relative:height
-                                                  offset:offsetY];
-    CGFloat x2 = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:2]
-                                                relative:width
-                                                  offset:offsetX];
-    CGFloat y2 = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:3]
-                                                relative:height
-                                                  offset:offsetY];
-
+    CGFloat x1 = [self getVal:[_points objectAtIndex:0] relative:width] + offsetX;
+    CGFloat y1 = [self getVal:[_points objectAtIndex:1] relative:height] + offsetY;
+    CGFloat x2 = [self getVal:[_points objectAtIndex:2] relative:width] + offsetX;
+    CGFloat y2 = [self getVal:[_points objectAtIndex:3] relative:height] + offsetY;
 
     CGContextConcatCTM(context, _transform);
     CGContextDrawLinearGradient(context, gradient, CGPointMake(x1, y1), CGPointMake(x2, y2), extendOptions);
@@ -223,31 +212,25 @@ - (void)paintRadialGradient:(CGContextRef)context bounds:(CGRect)bounds
     CGGradientDrawingOptions extendOptions = kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation;
 
     CGRect rect = [self getPaintRect:context bounds:bounds];
-    CGFloat height = CGRectGetHeight(rect);
+
     CGFloat width = CGRectGetWidth(rect);
+    CGFloat height = CGRectGetHeight(rect);
+
     CGFloat offsetX = CGRectGetMinX(rect);
     CGFloat offsetY = CGRectGetMinY(rect);
 
-    CGFloat rx = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:2]
-                                                relative:width
-                                                  offset:0];
-    CGFloat ry = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:3]
-                                                relative:height
-                                                  offset:0];
-    CGFloat fx = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:0]
-                                                relative:width
-                                                  offset:offsetX];
-    CGFloat fy = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:1]
-                                                relative:height
-                                                  offset:offsetY] / (ry / rx);
-    CGFloat cx = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:4]
-                                                relative:width
-                                                  offset:offsetX];
-    CGFloat cy = [RNSVGPercentageConverter lengthToFloat:[_points objectAtIndex:5]
-                                                relative:height
-                                                  offset:offsetY] / (ry / rx);
-
-    CGAffineTransform transform = CGAffineTransformMakeScale(1, ry / rx);
+    CGFloat rx = [self getVal:[_points objectAtIndex:2] relative:width];
+    CGFloat ry = [self getVal:[_points objectAtIndex:3] relative:height];
+
+    double ratio = ry / rx;
+
+    CGFloat fx = [self getVal:[_points objectAtIndex:0] relative:width] + offsetX;
+    CGFloat fy = ([self getVal:[_points objectAtIndex:1] relative:height] + offsetY) / ratio;
+
+    CGFloat cx = [self getVal:[_points objectAtIndex:4] relative:width] + offsetX;
+    CGFloat cy = ([self getVal:[_points objectAtIndex:5] relative:height] + offsetY) / ratio;
+
+    CGAffineTransform transform = CGAffineTransformMakeScale(1, ratio);
     CGContextConcatCTM(context, transform);
 
     CGContextConcatCTM(context, _transform);

diff --git a/ios/RNSVGRenderable.h b/ios/RNSVGRenderable.h
@@ -13,7 +13,6 @@
 #import "RNSVGNode.h"
 #import "RNSVGLength.h"
 #import "RNSVGVectorEffect.h"
-#import "RNSVGPercentageConverter.h"
 
 @interface RNSVGRenderable : RNSVGNode
 

diff --git a/ios/Utils/RNSVGPercentageConverter.h b/ios/Utils/RNSVGPercentageConverter.h
diff --git a/ios/Utils/RNSVGPercentageConverter.m b/ios/Utils/RNSVGPercentageConverter.m
diff --git a/src/elements/RadialGradient.tsx b/src/elements/RadialGradient.tsx
@@ -21,16 +21,14 @@ export default class RadialGradient extends Shape<{
   static displayName = 'RadialGradient';
 
   static defaultProps = {
-    fx: '50%',
-    fy: '50%',
     cx: '50%',
     cy: '50%',
     r: '50%',
   };
 
   render() {
     const { props } = this;
-    const { fx, fy, rx, ry, r, cx, cy } = props;
+    const { rx, ry, r, cx, cy, fx = cx, fy = cy } = props;
     return (
       <RNSVGRadialGradient
         ref={this.refMethod}