diff --git a/apple/Filters/RNSVGFeGaussianBlur.mm b/apple/Filters/RNSVGFeGaussianBlur.mm index 850d82a4..9d30c1ca 100644 --- a/apple/Filters/RNSVGFeGaussianBlur.mm +++ b/apple/Filters/RNSVGFeGaussianBlur.mm @@ -1,4 +1,5 @@ #import "RNSVGFeGaussianBlur.h" +#import "RNSVGRenderUtils.h" #ifdef RCT_NEW_ARCH_ENABLED #import @@ -62,17 +63,20 @@ using namespace facebook::react; return nil; } + // We need to multiply stdDeviation by screenScale to achive the same results as on web + CGFloat screenScale = [RNSVGRenderUtils getScreenScale]; + CIFilter *filter = [CIFilter filterWithName:(_stdDeviationX == _stdDeviationY ? @"CIGaussianBlur" : @"CIMotionBlur")]; [filter setDefaults]; [filter setValue:inputImage forKey:@"inputImage"]; - [filter setValue:_stdDeviationX forKey:@"inputRadius"]; + [filter setValue:@([_stdDeviationX floatValue] * screenScale) forKey:@"inputRadius"]; if (_stdDeviationX != _stdDeviationY) { // X axis [filter setValue:[NSNumber numberWithFloat:0] forKey:@"inputAngle"]; // Y axis [filter setValue:[filter valueForKey:@"outputImage"] forKey:@"inputImage"]; - [filter setValue:_stdDeviationY forKey:@"inputRadius"]; + [filter setValue:@([_stdDeviationY floatValue] * screenScale) forKey:@"inputRadius"]; [filter setValue:[NSNumber numberWithFloat:M_PI_2] forKey:@"inputAngle"]; } diff --git a/apps/examples/src/examples/Filters/FeGaussianBlur.tsx b/apps/examples/src/examples/Filters/FeGaussianBlur.tsx index aa379d8d..0659c0e3 100644 --- a/apps/examples/src/examples/Filters/FeGaussianBlur.tsx +++ b/apps/examples/src/examples/Filters/FeGaussianBlur.tsx @@ -1,13 +1,13 @@ import React, {Component} from 'react'; import {Circle, FeGaussianBlur, Filter, G, Svg} from 'react-native-svg'; -class StdDeviation5Example extends Component { - static title = 'stdDeviation="5"'; +class StdDeviation3Example extends Component { + static title = 'stdDeviation="3"'; render() { return ( - + @@ -18,13 +18,13 @@ class StdDeviation5Example extends Component { ); } } -class StdDeviation20Example extends Component { - static title = 'stdDeviation="20"'; +class StdDeviation7Example extends Component { + static title = 'stdDeviation="7"'; render() { return ( - + @@ -35,13 +35,13 @@ class StdDeviation20Example extends Component { ); } } -class StdDeviation250Example extends Component { - static title = 'stdDeviation="25 0"'; +class StdDeviation150Example extends Component { + static title = 'stdDeviation="15 0"'; render() { return ( - + @@ -52,13 +52,13 @@ class StdDeviation250Example extends Component { ); } } -class StdDeviation050Example extends Component { - static title = 'stdDeviation="0 50"'; +class StdDeviation025Example extends Component { + static title = 'stdDeviation="0 25"'; render() { return ( - + @@ -73,7 +73,7 @@ class StdDeviation050Example extends Component { const icon = ( - + @@ -84,9 +84,9 @@ const icon = ( ); const samples = [ - StdDeviation5Example, - StdDeviation20Example, - StdDeviation250Example, - StdDeviation050Example, + StdDeviation3Example, + StdDeviation7Example, + StdDeviation150Example, + StdDeviation025Example, ]; export {icon, samples};