feat: add FeGaussianBlur filter (#2352)

# Summary

Continuation of #2316 
Introducing new filter `FeGaussianBlur`.

### Implementation notes

On Android there is no easy way to fully implement Gaussian blur, as
there is no native api for this. While a basic implementation is
possible with `RenderScript`, it does not allow for blur in one axis and
greater than `25`

## Test Plan

Example app -> Filters -> FeGaussianBlur

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |         |
| Android |         |
This commit is contained in:
Jakub Grzywacz
2024-07-25 11:46:45 +02:00
committed by GitHub
parent ba7d77548f
commit 44254df9fb
27 changed files with 624 additions and 13 deletions

View File

@@ -12,7 +12,7 @@
#import "RCTConvert+RNSVG.h"
#import "RNSVGCGFCRule.h"
#import "RNSVGColorMatrixType.h"
#import "RNSVGEdgeModeTypes.h"
#import "RNSVGEdgeMode.h"
#import "RNSVGLength.h"
#import "RNSVGMaskType.h"
#import "RNSVGPathParser.h"

View File

@@ -52,13 +52,13 @@ RCT_ENUM_CONVERTER(
intValue)
RCT_ENUM_CONVERTER(
RNSVGEdgeModeTypes,
RNSVGEdgeMode,
(@{
@"duplicate" : @(SVG_EDGEMODE_DUPLICATE),
@"wrap" : @(SVG_EDGEMODE_WRAP),
@"none" : @(SVG_EDGEMODE_NONE),
}),
SVG_FECOLORMATRIX_TYPE_UNKNOWN,
SVG_EDGEMODE_UNKNOWN,
intValue)
RCT_ENUM_CONVERTER(

View File

@@ -1,7 +1,7 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <react/renderer/components/rnsvg/Props.h>
#import "RNSVGColorMatrixType.h"
#import "RNSVGEdgeModeTypes.h"
#import "RNSVGEdgeMode.h"
#import "RNSVGUnits.h"
namespace react = facebook::react;
@@ -11,6 +11,7 @@ namespace react = facebook::react;
+ (RNSVGUnits)RNSVGUnitsFromFilterUnitsCppEquivalent:(react::RNSVGFilterFilterUnits)svgUnits;
+ (RNSVGUnits)RNSVGUnitsFromPrimitiveUnitsCppEquivalent:(react::RNSVGFilterPrimitiveUnits)svgUnits;
+ (RNSVGColorMatrixType)RNSVGColorMatrixTypeFromCppEquivalent:(react::RNSVGFeColorMatrixType)type;
+ (RNSVGEdgeMode)RNSVGEdgeModeFromCppEquivalent:(react::RNSVGFeGaussianBlurEdgeMode)edgeMode;
@end

View File

@@ -23,7 +23,7 @@
}
}
+ (RNSVGColorMatrixType)RNSVGColorMatrixTypeFromCppEquivalent:(react::RNSVGFeColorMatrixType)type;
+ (RNSVGColorMatrixType)RNSVGColorMatrixTypeFromCppEquivalent:(react::RNSVGFeColorMatrixType)type
{
switch (type) {
case react::RNSVGFeColorMatrixType::Matrix:
@@ -37,6 +37,20 @@
}
}
+ (RNSVGEdgeMode)RNSVGEdgeModeFromCppEquivalent:(react::RNSVGFeGaussianBlurEdgeMode)edgeMode
{
switch (edgeMode) {
case react::RNSVGFeGaussianBlurEdgeMode::Duplicate:
return SVG_EDGEMODE_DUPLICATE;
case react::RNSVGFeGaussianBlurEdgeMode::Wrap:
return SVG_EDGEMODE_WRAP;
case react::RNSVGFeGaussianBlurEdgeMode::None:
return SVG_EDGEMODE_NONE;
default:
return SVG_EDGEMODE_UNKNOWN;
}
}
@end
#endif // RCT_NEW_ARCH_ENABLED