Fix spec conformance of clipping path with multiple child elements.

https://www.w3.org/TR/SVG11/masking.html#EstablishingANewClippingPath

The raw geometry of each child element exclusive of rendering properties such as ‘fill’, ‘stroke’, ‘stroke-width’ within a ‘clipPath’ conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out. If a child element is made invisible by ‘display’ or ‘visibility’ it does not contribute to the clipping path. When the ‘clipPath’ element contains multiple child elements, the silhouettes of the child elements are logically OR'd together to create a single silhouette which is then used to restrict the region onto which paint can be applied. Thus, a point is inside the clipping path if it is inside any of the children of the ‘clipPath’.

For a given graphics element, the actual clipping path used will be the intersection of the clipping path specified by its ‘clip-path’ property (if any) with any clipping paths on its ancestors, as specified by the ‘clip-path’ property on the ancestor elements, or by the ‘overflow’ property on ancestor elements which establish a new viewport. Also, see the discussion of the initial clipping path.)

Fixes issues highlighted by https://github.com/react-native-community/react-native-svg/issues/752
Fix https://github.com/react-native-community/react-native-svg/issues/280
Fix https://github.com/react-native-community/react-native-svg/issues/517

[android] Fix https://github.com/react-native-community/react-native-svg/issues/766
`Region.Op.REPLACE` is deprecated in API level 28
Replace with clipPath (Path path) to Intersect instead.
This commit is contained in:
Mikael Sand
2018-09-01 02:55:36 +03:00
parent f1f0e2f186
commit a1097b8594
8 changed files with 133 additions and 30 deletions
+2
View File
@@ -14,4 +14,6 @@
@interface RNSVGClipPath : RNSVGGroup
- (BOOL)isSimpleClipPath;
@end
+12 -5
View File
@@ -10,15 +10,22 @@
@implementation RNSVGClipPath
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
return nil;
}
- (void)parseReference
{
[self.svgView defineClipPath:self clipPathName:self.name];
}
- (BOOL)isSimpleClipPath
{
NSArray<UIView*> *children = self.subviews;
if (children.count == 1) {
UIView* child = children[0];
if ([child class] != [RNSVGGroup class]) {
return true;
}
}
return false;
}
@end
+20 -9
View File
@@ -7,6 +7,7 @@
*/
#import "RNSVGGroup.h"
#import "RNSVGClipPath.h"
@implementation RNSVGGroup
{
@@ -33,7 +34,7 @@
- (void)renderGroupTo:(CGContextRef)context rect:(CGRect)rect
{
[self pushGlyphContext];
__block CGRect groupRect = CGRectNull;
[self traverseSubviews:^(UIView *node) {
@@ -48,7 +49,7 @@
}
[svgNode renderTo:context rect:rect];
CGRect nodeRect = svgNode.clientRect;
if (!CGRectIsEmpty(nodeRect)) {
groupRect = CGRectUnion(groupRect, nodeRect);
@@ -124,12 +125,22 @@
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
CGPoint transformed = CGPointApplyAffineTransform(point, self.invmatrix);
CGPathRef clip = [self getClipPath];
if (clip && !CGPathContainsPoint(clip, nil, transformed, self.clipRule == kRNSVGCGFCRuleEvenodd)) {
return nil;
if (self.clipPath) {
RNSVGClipPath *clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
if ([clipNode isSimpleClipPath]) {
CGPathRef clipPath = [self getClipPath];
if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, self.clipRule == kRNSVGCGFCRuleEvenodd)) {
return nil;
}
} else {
RNSVGRenderable *clipGroup = (RNSVGRenderable*)clipNode;
if (![clipGroup hitTest:transformed withEvent:event]) {
return nil;
}
}
}
if (!event) {
NSPredicate *const anyActive = [NSPredicate predicateWithFormat:@"active == TRUE"];
NSArray *const filtered = [self.subviews filteredArrayUsingPredicate:anyActive];
@@ -156,12 +167,12 @@
return (node.responsible || (node != hitChild)) ? hitChild : self;
}
}
UIView *hitSelf = [super hitTest:transformed withEvent:event];
if (hitSelf) {
return hitSelf;
}
return nil;
}