zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-06 07:06:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: FeGaussianBlur stdDeviation on Apple (#2388)

Browse Source 
Scale stdDeviation by screenScale (density) on Apple devices in order to
achive the same results as on web
This commit is contained in:
Jakub Grzywacz
2024-08-01 15:36:18 +02:00
committed by GitHub
parent e8ed74fffa
commit b3a72e871f
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apple/Filters/RNSVGFeGaussianBlur.mm
View File

@@ -1,4 +1,5 @@
#import "RNSVGFeGaussianBlur.h"
#import "RNSVGRenderUtils.h"
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
@@ -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"];
}

34
apps/examples/src/examples/Filters/FeGaussianBlur.tsx
View File

@@ -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 (
<Svg height="150" width="150">
<Filter id="filter1">
<FeGaussianBlur stdDeviation="5" />
<FeGaussianBlur stdDeviation="3" />
</Filter>
<G filter="url(#filter1)">
<Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
@@ -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 (
<Svg height="150" width="150">
<Filter id="filter2">
<FeGaussianBlur stdDeviation="20" />
<FeGaussianBlur stdDeviation="7" />
</Filter>
<G filter="url(#filter2)">
<Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
@@ -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 (
<Svg height="150" width="150">
<Filter id="filter3">
<FeGaussianBlur stdDeviation="25 0" />
<FeGaussianBlur stdDeviation="15 0" />
</Filter>
<G filter="url(#filter3)">
<Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
@@ -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 (
<Svg height="150" width="150">
<Filter id="filter4">
<FeGaussianBlur stdDeviation="0 50" />
<FeGaussianBlur stdDeviation="0 25" />
</Filter>
<G filter="url(#filter4)">
<Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
@@ -73,7 +73,7 @@ class StdDeviation050Example extends Component {
const icon = (
<Svg height="30" width="30" viewBox="0 0 20 20">
<Filter id="filter5">
<FeGaussianBlur stdDeviation="6" />
<FeGaussianBlur stdDeviation="3" />
</Filter>
<G filter="url(#filter5)">
<Circle cx="10" cy="7.5" r="5" fill="blue" fillOpacity="0.5" />
@@ -84,9 +84,9 @@ const icon = (
);
const samples = [
StdDeviation5Example,
StdDeviation20Example,
StdDeviation250Example,
StdDeviation050Example,
StdDeviation3Example,
StdDeviation7Example,
StdDeviation150Example,
StdDeviation025Example,
];
export {icon, samples};