Skip to content
This repository has been archived by the owner on Mar 21, 2022. It is now read-only.

Commit

Permalink
fix: units in linear and radial gradients
Browse files Browse the repository at this point in the history 
fixes software-mansion#1110
fixes software-mansion#1118
  • Loading branch information
@msand
msand committed Sep 27, 2019
1 parent e91b406 commit 70c54e6
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 140 deletions.
23 changes: 14 additions & 9 deletions android/src/main/java/com/horcrux/svg/Brush.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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);
Expand Down
1 change: 0 additions & 1 deletion ios/Brushes/RNSVGBrush.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

#import <CoreGraphics/CoreGraphics.h>
#import <Foundation/Foundation.h>
#import "RNSVGPercentageConverter.h"
#import "RNSVGPainter.h"

@interface RNSVGBrush : NSObject
Expand Down
55 changes: 19 additions & 36 deletions ios/Brushes/RNSVGPainter.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

#import "RNSVGPainter.h"
#import "RNSVGPattern.h"
#import "RNSVGPercentageConverter.h"
#import "RNSVGViewBox.h"

@implementation RNSVGPainter
Expand Down Expand Up @@ -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;

Expand All @@ -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);
Expand All @@ -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);
Expand Down
1 change: 0 additions & 1 deletion ios/RNSVGRenderable.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
#import "RNSVGNode.h"
#import "RNSVGLength.h"
#import "RNSVGVectorEffect.h"
#import "RNSVGPercentageConverter.h"

@interface RNSVGRenderable : RNSVGNode

Expand Down
23 changes: 0 additions & 23 deletions ios/Utils/RNSVGPercentageConverter.h
View file

This file was deleted.

67 changes: 0 additions & 67 deletions ios/Utils/RNSVGPercentageConverter.m
View file

This file was deleted.

4 changes: 1 addition & 3 deletions src/elements/RadialGradient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit 70c54e6

Please sign in to comment.