mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-01 06:07:41 +00:00
832522d1c1
# Summary "mask-type: alpha" is not supported. resolve issue: #1790 ## Explanation svg example: ``` <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none"> <g clip-path="url(#clip0_8_3)"> <rect width="100" height="100" fill="white"/> <mask id="mask0_8_3" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> <circle cx="50" cy="50" r="50" fill="#000000"/> </mask> <g mask="url(#mask0_8_3)"> <rect x="-26" y="-78" width="209" height="263" fill="#252E74"/> </g> </g> <defs> <clipPath id="clip0_8_3"> <rect width="100" height="100" fill="white"/> </clipPath> </defs> </svg> ``` Current behavior:  Expected behavior:  ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist <!-- Check completed item, when applicable, via: [X] --> - [x] I have tested this on a device and a simulator - [ ] I added documentation in `README.md` - [x] I updated the typed files (typescript) - [ ] I added a test for the API in the `__tests__` folder --------- Co-authored-by: Sergey <s.yurkevich@logiclike.com> Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
172 lines
3.8 KiB
Plaintext
172 lines
3.8 KiB
Plaintext
/**
|
|
* 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 "RNSVGMask.h"
|
|
#import "RNSVGBrushType.h"
|
|
#import "RNSVGNode.h"
|
|
#import "RNSVGPainter.h"
|
|
|
|
#ifdef RCT_NEW_ARCH_ENABLED
|
|
#import <React/RCTConversions.h>
|
|
#import <React/RCTFabricComponentsPlugins.h>
|
|
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
|
|
#import <react/renderer/components/view/conversions.h>
|
|
#import "RNSVGFabricConversions.h"
|
|
#endif // RCT_NEW_ARCH_ENABLED
|
|
|
|
@implementation RNSVGMask
|
|
|
|
#ifdef RCT_NEW_ARCH_ENABLED
|
|
using namespace facebook::react;
|
|
|
|
- (instancetype)initWithFrame:(CGRect)frame
|
|
{
|
|
if (self = [super initWithFrame:frame]) {
|
|
static const auto defaultProps = std::make_shared<const RNSVGMaskProps>();
|
|
_props = defaultProps;
|
|
}
|
|
return self;
|
|
}
|
|
|
|
#pragma mark - RCTComponentViewProtocol
|
|
|
|
+ (ComponentDescriptorProvider)componentDescriptorProvider
|
|
{
|
|
return concreteComponentDescriptorProvider<RNSVGMaskComponentDescriptor>();
|
|
}
|
|
|
|
- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
|
|
{
|
|
const auto &newProps = static_cast<const RNSVGMaskProps &>(*props);
|
|
|
|
id x = RNSVGConvertFollyDynamicToId(newProps.x);
|
|
if (x != nil) {
|
|
self.x = [RCTConvert RNSVGLength:x];
|
|
}
|
|
id y = RNSVGConvertFollyDynamicToId(newProps.y);
|
|
if (y != nil) {
|
|
self.y = [RCTConvert RNSVGLength:y];
|
|
}
|
|
id maskheight = RNSVGConvertFollyDynamicToId(newProps.height);
|
|
if (maskheight != nil) {
|
|
self.maskheight = [RCTConvert RNSVGLength:maskheight];
|
|
}
|
|
id maskwidth = RNSVGConvertFollyDynamicToId(newProps.width);
|
|
if (maskwidth != nil) {
|
|
self.maskwidth = [RCTConvert RNSVGLength:maskwidth];
|
|
}
|
|
|
|
self.maskUnits = newProps.maskUnits == 0 ? kRNSVGUnitsObjectBoundingBox : kRNSVGUnitsUserSpaceOnUse;
|
|
self.maskContentUnits = newProps.maskUnits == 0 ? kRNSVGUnitsObjectBoundingBox : kRNSVGUnitsUserSpaceOnUse;
|
|
self.maskType = newProps.maskType == 0 ? kRNSVGMaskTypeLuminance : kRNSVGMaskTypeAlpha;
|
|
|
|
setCommonGroupProps(newProps, self);
|
|
_props = std::static_pointer_cast<RNSVGMaskProps const>(props);
|
|
}
|
|
|
|
- (void)prepareForRecycle
|
|
{
|
|
[super prepareForRecycle];
|
|
_x = nil;
|
|
_y = nil;
|
|
_maskheight = nil;
|
|
_maskwidth = nil;
|
|
_maskUnits = kRNSVGUnitsObjectBoundingBox;
|
|
_maskContentUnits = kRNSVGUnitsObjectBoundingBox;
|
|
_maskType = kRNSVGMaskTypeLuminance;
|
|
}
|
|
#endif // RCT_NEW_ARCH_ENABLED
|
|
|
|
- (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
|
|
{
|
|
return nil;
|
|
}
|
|
|
|
- (void)parseReference
|
|
{
|
|
self.dirty = false;
|
|
[self.svgView defineMask:self maskName:self.name];
|
|
}
|
|
|
|
- (void)setX:(RNSVGLength *)x
|
|
{
|
|
if ([x isEqualTo:_x]) {
|
|
return;
|
|
}
|
|
|
|
_x = x;
|
|
[self invalidate];
|
|
}
|
|
|
|
- (void)setY:(RNSVGLength *)y
|
|
{
|
|
if ([y isEqualTo:_y]) {
|
|
return;
|
|
}
|
|
|
|
_y = y;
|
|
[self invalidate];
|
|
}
|
|
|
|
- (void)setMaskwidth:(RNSVGLength *)maskwidth
|
|
{
|
|
if ([maskwidth isEqualTo:_maskwidth]) {
|
|
return;
|
|
}
|
|
|
|
_maskwidth = maskwidth;
|
|
[self invalidate];
|
|
}
|
|
|
|
- (void)setMaskheight:(RNSVGLength *)maskheight
|
|
{
|
|
if ([maskheight isEqualTo:_maskheight]) {
|
|
return;
|
|
}
|
|
|
|
_maskheight = maskheight;
|
|
[self invalidate];
|
|
}
|
|
|
|
- (void)setMaskUnits:(RNSVGUnits)maskUnits
|
|
{
|
|
if (maskUnits == _maskUnits) {
|
|
return;
|
|
}
|
|
|
|
_maskUnits = maskUnits;
|
|
[self invalidate];
|
|
}
|
|
|
|
- (void)setMaskContentUnits:(RNSVGUnits)maskContentUnits
|
|
{
|
|
if (maskContentUnits == _maskContentUnits) {
|
|
return;
|
|
}
|
|
|
|
_maskContentUnits = maskContentUnits;
|
|
[self invalidate];
|
|
}
|
|
|
|
- (void)setMaskType:(RNSVGMaskType)maskType
|
|
{
|
|
if (maskType == _maskType) {
|
|
return;
|
|
}
|
|
_maskType = maskType;
|
|
[self invalidate];
|
|
}
|
|
|
|
@end
|
|
|
|
#ifdef RCT_NEW_ARCH_ENABLED
|
|
Class<RCTComponentViewProtocol> RNSVGMaskCls(void)
|
|
{
|
|
return RNSVGMask.class;
|
|
}
|
|
#endif // RCT_NEW_ARCH_ENABLED
|