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

feat: add FeGaussianBlur filter (#2352)

Browse Source 
# 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
Download Patch File Download Diff File Expand all files Collapse all files
apps/examples/src/examples/Filters/FeGaussianBlur.tsx
+92
View File
@@ -0,0 +1,92 @@
import React, {Component} from 'react';
import {Circle, FeGaussianBlur, Filter, G, Svg} from 'react-native-svg';
class StdDeviation5Example extends Component {
static title = 'stdDeviation="5"';
render() {
return (
<Svg height="150" width="150">
<Filter id="filter">
<FeGaussianBlur stdDeviation="5" />
</Filter>
<G filter="url(#filter)">
<Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
<Circle cx="55" cy="90" r="40" fill="green" fillOpacity="0.5" />
<Circle cx="95" cy="90" r="40" fill="red" fillOpacity="0.5" />
</G>
</Svg>
);
}
}
class StdDeviation20Example extends Component {
static title = 'stdDeviation="20"';
render() {
return (
<Svg height="150" width="150">
<Filter id="filter">
<FeGaussianBlur stdDeviation="20" />
</Filter>
<G filter="url(#filter)">
<Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
<Circle cx="55" cy="90" r="40" fill="green" fillOpacity="0.5" />
<Circle cx="95" cy="90" r="40" fill="red" fillOpacity="0.5" />
</G>
</Svg>
);
}
}
class StdDeviation250Example extends Component {
static title = 'stdDeviation="25 0"';
render() {
return (
<Svg height="150" width="150">
<Filter id="filter">
<FeGaussianBlur stdDeviation="25 0" />
</Filter>
<G filter="url(#filter)">
<Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
<Circle cx="55" cy="90" r="40" fill="green" fillOpacity="0.5" />
<Circle cx="95" cy="90" r="40" fill="red" fillOpacity="0.5" />
</G>
</Svg>
);
}
}
class StdDeviation050Example extends Component {
static title = 'stdDeviation="0 50"';
render() {
return (
<Svg height="150" width="150">
<Filter id="filter">
<FeGaussianBlur stdDeviation="0 50" />
</Filter>
<G filter="url(#filter)">
<Circle cx="75" cy="50" r="40" fill="blue" fillOpacity="0.5" />
<Circle cx="55" cy="90" r="40" fill="green" fillOpacity="0.5" />
<Circle cx="95" cy="90" r="40" fill="red" fillOpacity="0.5" />
</G>
</Svg>
);
}
}
const icon = (
<Svg height="30" width="30" viewBox="0 0 20 20">
<Filter id="filter">
<FeGaussianBlur stdDeviation="6" />
</Filter>
<G filter="url(#filter)">
<Circle cx="10" cy="7.5" r="5" fill="blue" fillOpacity="0.5" />
<Circle cx="7.5" cy="12.5" r="5" fill="green" fillOpacity="0.5" />
<Circle cx="12.5" cy="12.5" r="5" fill="red" fillOpacity="0.5" />
</G>
</Svg>
);
const samples = [
StdDeviation5Example,
StdDeviation20Example,
StdDeviation250Example,
StdDeviation050Example,
];
export {icon, samples};
apps/examples/src/examples/Filters/examples.tsx
+2 -1
View File
@@ -1,3 +1,4 @@
import * as FeColorMatrix from './FeColorMatrix';
import * as FeGaussianBlur from './FeGaussianBlur';
import * as ReanimatedFeColorMatrix from './ReanimatedFeColorMatrix';
export {FeColorMatrix, ReanimatedFeColorMatrix};
export {FeColorMatrix, FeGaussianBlur, ReanimatedFeColorMatrix};