feat: FeDropShadow (#2514)

# Summary

Continuation of #2362 introducing highly requested  `FeDropShadow` 
filter. This addition is straightforward since it's essentially a
shorthand (as specified in the spec) for filters that are already
implemented: https://www.w3.org/TR/filter-effects-1/#feDropShadowElement

<img width="532" alt="image"
src="https://github.com/user-attachments/assets/b221ee4c-d8b0-469b-acb0-71224fb2b1e0">

## Test Plan

Example app -> Filters -> FeDropShadow

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| macOS   |          |
| Android |          |
| Web     |          |
This commit is contained in:
Jakub Grzywacz
2024-10-28 14:44:36 +01:00
committed by GitHub
parent 36ca5c4584
commit e6a27f8a3d
4 changed files with 88 additions and 5 deletions
+25 -3
View File
@@ -1,12 +1,20 @@
import { ColorValue } from 'react-native';
import { NumberArray, NumberProp } from '../../lib/extract/types';
import { warnUnimplementedFilter } from '../../lib/util';
import FeFlood from './FeFlood';
import FeGaussianBlur from './FeGaussianBlur';
import FeMerge from './FeMerge';
import FeMergeNode from './FeMergeNode';
import FeOffset from './FeOffset';
import FilterPrimitive from './FilterPrimitive';
import FeComposite from './FeComposite';
export interface FeDropShadowProps {
in?: string;
stdDeviation?: NumberArray;
dx?: NumberProp;
dy?: NumberProp;
floodColor?: ColorValue;
floodOpacity?: NumberProp;
}
export default class FeDropShadow extends FilterPrimitive<FeDropShadowProps> {
@@ -17,7 +25,21 @@ export default class FeDropShadow extends FilterPrimitive<FeDropShadowProps> {
};
render() {
warnUnimplementedFilter();
return null;
const { stdDeviation, in: in1 = 'SourceGraphic', dx, dy } = this.props;
return (
<>
<FeGaussianBlur in={in1} stdDeviation={stdDeviation} />
<FeOffset dx={dx} dy={dy} result="offsetblur" />
<FeFlood
floodColor={this.props.floodColor}
floodOpacity={this.props.floodOpacity}
/>
<FeComposite in2="offsetblur" operator="in" />
<FeMerge>
<FeMergeNode />
<FeMergeNode in={in1} />
</FeMerge>
</>
);
}
}