mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
08e92074b4
# Summary Introducing the long-awaited **Filters** in `react-native-svg` 🎉 ### Motivation This PR is the beginning of bringing support of SVG Filters into `react-native-svg`. * **related issues**: This PR series will address the following issues: #150, #176, #635, #883, #994, #996, #1216 * **feature overview**: This PR is a boilerplate for Filters * introducing `Filter` component and `FeColorMatrix` as a start. * It also introduces a new subdirectory called `react-native-svg/filter-image` with a `FilterImage` component. # Usage ## Filter and Fe... Filters are compatible with the web familiar standard, so most things should be compatible out-of-the-box and changes will be limited to using a capital letter as it's component. ### Example ```tsx import React from 'react'; import { FeColorMatrix, Filter, Rect, Svg } from 'react-native-svg'; export default () => { return ( <Svg height="300" width="300"> <Filter id="myFilter"> <FeColorMatrix type="saturate" values="0.2" /> </Filter> <Rect x="0" y="0" width="300" height="300" fill="red" filter="url(#myFilter)" /> </Svg> ); }; ```  ## Filter Image `FilterImage` is a new component that is not strictly related to SVG. Its behavior should be the same as a regular `Image` component from React Native with one exception - the additional prop `filters`, which accepts an array of filters to apply to the image. ### Example ```tsx import React from 'react'; import { StyleSheet } from 'react-native'; import { FilterImage } from 'react-native-svg/filter-image'; const myImage = require('./myImage.jpg'); export default () => { return ( <FilterImage style={styles.image} source={myImage} filters={[ { name: 'colorMatrix', type: 'saturate', values: 0.2 }, { name: 'colorMatrix', type: 'matrix', values: [ 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 1, 0, ], }, ]} /> ); }; const styles = StyleSheet.create({ image: { width: 200, height: 200, }, }); ```  ## Test Plan **Example App**: Updated the example app with various filter effects, showcasing real-world usage. ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist - [x] I have tested this on a device and a simulator - [x] I added documentation in `README.md` and `USAGE.md` - [x] I updated the typed files (typescript)
81 lines
2.4 KiB
Objective-C
81 lines
2.4 KiB
Objective-C
/**
|
|
* Copyright (c) 2015-present, Horcrux.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the MIT-style license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
#import "RNSVGUIKit.h"
|
|
|
|
#import "RNSVGContainer.h"
|
|
#import "RNSVGPainter.h"
|
|
#import "RNSVGVBMOS.h"
|
|
|
|
#ifdef RCT_NEW_ARCH_ENABLED
|
|
#import <React/RCTViewComponentView.h>
|
|
#endif // RCT_NEW_ARCH_ENABLED
|
|
|
|
@class RNSVGNode;
|
|
|
|
@interface RNSVGSvgView :
|
|
#ifdef RCT_NEW_ARCH_ENABLED
|
|
RCTViewComponentView <RNSVGContainer>
|
|
#else
|
|
RNSVGView <RNSVGContainer>
|
|
#endif // RCT_NEW_ARCH_ENABLED
|
|
|
|
@property (nonatomic, strong) RNSVGLength *bbWidth;
|
|
@property (nonatomic, strong) RNSVGLength *bbHeight;
|
|
@property (nonatomic, assign) CGFloat minX;
|
|
@property (nonatomic, assign) CGFloat minY;
|
|
@property (nonatomic, assign) CGFloat vbWidth;
|
|
@property (nonatomic, assign) CGFloat vbHeight;
|
|
@property (nonatomic, strong) NSString *align;
|
|
@property (nonatomic, assign) RNSVGVBMOS meetOrSlice;
|
|
@property (nonatomic, assign) BOOL responsible;
|
|
@property (nonatomic, assign) BOOL active;
|
|
@property (nonatomic, assign) CGRect boundingBox;
|
|
@property (nonatomic, assign) CGAffineTransform initialCTM;
|
|
@property (nonatomic, assign) CGAffineTransform invInitialCTM;
|
|
@property (nonatomic, assign) CGAffineTransform viewBoxTransform;
|
|
|
|
/**
|
|
* define <ClipPath></ClipPath> content as clipPath template.
|
|
*/
|
|
- (void)defineClipPath:(__kindof RNSVGNode *)clipPath clipPathName:(NSString *)clipPathName;
|
|
|
|
- (RNSVGNode *)getDefinedClipPath:(NSString *)clipPathName;
|
|
|
|
- (void)defineTemplate:(__kindof RNSVGNode *)definedTemplate templateName:(NSString *)templateName;
|
|
|
|
- (RNSVGNode *)getDefinedTemplate:(NSString *)templateName;
|
|
|
|
- (void)definePainter:(RNSVGPainter *)painter painterName:(NSString *)painterName;
|
|
|
|
- (RNSVGPainter *)getDefinedPainter:(NSString *)painterName;
|
|
|
|
- (void)defineMarker:(RNSVGNode *)marker markerName:(NSString *)markerName;
|
|
|
|
- (RNSVGNode *)getDefinedMarker:(NSString *)markerName;
|
|
|
|
- (void)defineMask:(RNSVGNode *)mask maskName:(NSString *)maskName;
|
|
|
|
- (RNSVGNode *)getDefinedMask:(NSString *)maskName;
|
|
|
|
- (void)defineFilter:(RNSVGNode *)filter filterName:(NSString *)filterName;
|
|
|
|
- (RNSVGNode *)getDefinedFilter:(NSString *)filterName;
|
|
|
|
- (NSString *)getDataURLWithBounds:(CGRect)bounds;
|
|
|
|
- (CGRect)getContextBounds;
|
|
|
|
- (void)drawRect:(CGRect)rect;
|
|
|
|
- (void)drawToContext:(CGContextRef)context withRect:(CGRect)rect;
|
|
|
|
- (CGAffineTransform)getViewBoxTransform;
|
|
|
|
@end
|