zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-20 14:05:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix touch events within the elements which are nested in G

Browse Source
This commit is contained in:
Horcrux
2016-08-06 21:37:58 +08:00
parent 76a51f1f47
commit 7f4eb47f81
17 changed files with 123 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
Example/examples/TouchEvents.js
View File

@@ -56,18 +56,23 @@ class HoverExample extends Component {
render () { render () {
return <Svg height="120" width="120"> return <Svg height="120" width="120">
<Path <G>
d="M50,5L20,99L95,39L5,39L80,99z" <G>
stroke={this.state.hover ? 'rgba(10, 10, 10, 0.5)' : 'black'} <Path
fill={this.state.hover ? 'pink' : 'red'} d="M50,5L20,99L95,39L5,39L80,99z"
strokeWidth="6" stroke={this.state.hover ? 'rgba(10, 10, 10, 0.5)' : 'black'}
delayPressIn={0} fill={this.state.hover ? 'pink' : 'red'}
onPressIn={this.toggle} strokeWidth="6"
onPressOut={this.toggle} delayPressIn={0}
x="0" onPressIn={this.toggle}
y="10" onPressOut={this.toggle}
scale="0.5" x="0"
/> y="0"
scale="1.2"
opacity="0.3"
/>
</G>
</G>
</Svg>; </Svg>;
} }
} }
@@ -82,10 +87,12 @@ class GroupExample extends Component {
viewBox="0 0 240 240" viewBox="0 0 240 240"
> >
<G> <G>
<G onPress={() => alert('Pressed')}> <G scale="1.4">
<Circle cx="80" cy="80" r="30" fill="green" x="20" /> <G>
<Rect x="20" y="20" width="40" height="40" fill="yellow"/> <Circle cx="80" cy="80" r="30" fill="green" x="20" scale="1.2" onPress={() => alert('Pressed')}/>
<Text fontWeight="bold" fontSize="40" x="100" y="100" scale="2">H</Text> <Rect x="20" y="20" width="40" height="40" fill="yellow" />
<Text fontWeight="bold" fontSize="40" x="100" y="100" scale="2">H</Text>
</G>
</G> </G>
</G> </G>
</Svg>; </Svg>;

30
elements/Svg.js
View File

@@ -73,22 +73,20 @@ class Svg extends Component{
const nativeProps = _.omit(props, ['width', 'height', 'viewBox', 'preserveAspectRatio', 'opacity']); const nativeProps = _.omit(props, ['width', 'height', 'viewBox', 'preserveAspectRatio', 'opacity']);
return ( return <NativeSvgView
<NativeSvgView {...nativeProps}
{...nativeProps} ref={ele => {this.root = ele;}}
ref={ele => {this.root = ele;}} style={[
style={[ styles.svg,
styles.svg, props.style,
props.style, !isNaN(opacity) && {
!isNaN(opacity) && { opacity
opacity },
}, dimensions
dimensions ]}
]} >
> {content}
{content} </NativeSvgView>;
</NativeSvgView>
);
} }
} }

3
ios/Elements/RNSVGGroup.h
View File

@@ -14,7 +14,4 @@
#import "RNSVGRenderable.h" #import "RNSVGRenderable.h"
@interface RNSVGGroup : RNSVGRenderable <RNSVGContainer> @interface RNSVGGroup : RNSVGRenderable <RNSVGContainer>
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event;
@end @end

24
ios/Elements/RNSVGGroup.m
View File

@@ -21,7 +21,7 @@
[node renderTo:context]; [node renderTo:context];
if (node.responsible && !svg.responsible) { if (node.responsible && !svg.responsible) {
self.responsible = YES; svg.responsible = YES;
} }
} }
} }
@@ -32,21 +32,33 @@
CGMutablePathRef path = CGPathCreateMutable(); CGMutablePathRef path = CGPathCreateMutable();
for (RNSVGNode *node in self.subviews) { for (RNSVGNode *node in self.subviews) {
if ([node isKindOfClass:[RNSVGNode class]]) { if ([node isKindOfClass:[RNSVGNode class]]) {
CGAffineTransform transform = node.transform; CGAffineTransform transform = node.matrix;
CGPathAddPath(path, &transform, [node getPath:context]); CGPathAddPath(path, &transform, [node getPath:context]);
} }
} }
return (CGPathRef)CFAutorelease(path); return (CGPathRef)CFAutorelease(path);
} }
// hitTest delagate - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event withTransform:(CGAffineTransform)transform
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{ {
CGAffineTransform matrix = CGAffineTransformConcat(self.matrix, transform);
for (RNSVGNode *node in [self.subviews reverseObjectEnumerator]) { for (RNSVGNode *node in [self.subviews reverseObjectEnumerator]) {
if ([node isKindOfClass:[RNSVGNode class]]) { if ([node isKindOfClass:[RNSVGNode class]]) {
UIView *view = [node hitTest: point withEvent:event]; if (event) {
node.active = NO;
}
if (node.active) {
return node;
}
UIView *view = [node hitTest: point withEvent:event withTransform:matrix];
if (view) { if (view) {
if (node.responsible || node != view) { node.active = YES;
if (node.responsible || (node != view)) {
return view; return view;
} else { } else {
return self; return self;

9
ios/Elements/RNSVGImage.m
View File

@@ -71,10 +71,7 @@
{ {
CGRect rect = [self getRect:context]; CGRect rect = [self getRect:context];
// add hit area // add hit area
self.hitArea = CGPathCreateMutable(); self.hitArea = CGPathCreateWithRect(rect, nil);
CGPathRef path = CGPathCreateWithRect(rect, nil);
CGPathAddPath(self.hitArea, nil, path);
CGPathRelease(path);
[self clip:context]; [self clip:context];
CGContextSaveGState(context); CGContextSaveGState(context);
@@ -97,9 +94,7 @@
- (CGPathRef)getPath:(CGContextRef)context - (CGPathRef)getPath:(CGContextRef)context
{ {
CGMutablePathRef path = CGPathCreateMutable(); return CGPathCreateWithRect([self getRect:context], nil);
CGPathAddRect(path, nil, [self getRect:context]);
return (CGPathRef)CFAutorelease(path);
} }
@end @end

26
ios/Elements/RNSVGPath.m
View File

@@ -15,6 +15,7 @@
if (d == _d) { if (d == _d) {
return; return;
} }
[self invalidate]; [self invalidate];
CGPathRelease(_d); CGPathRelease(_d);
_d = CGPathRetain(d); _d = CGPathRetain(d);
@@ -27,20 +28,25 @@
- (void)renderLayerTo:(CGContextRef)context - (void)renderLayerTo:(CGContextRef)context
{ {
if ((!self.fill && !self.stroke) || !self.d) { CGPathRef path = [self getPath:context];
if ((!self.fill && !self.stroke) || !path) {
return; return;
} }
// Add path to hitArea // Add path to hitArea
self.hitArea = CGPathCreateMutableCopy(_d); CGMutablePathRef hitArea = CGPathCreateMutableCopy(path);
if (self.stroke) { if (self.stroke) {
// Add stroke to hitArea // Add stroke to hitArea
CGPathRef strokePath = CGPathCreateCopyByStrokingPath(_d, nil, self.strokeWidth, self.strokeLinecap, self.strokeLinejoin, self.strokeMiterlimit); CGPathRef strokePath = CGPathCreateCopyByStrokingPath(hitArea, nil, self.strokeWidth, self.strokeLinecap, self.strokeLinejoin, self.strokeMiterlimit);
CGPathAddPath(self.hitArea, nil, strokePath); CGPathAddPath(hitArea, nil, strokePath);
CGPathRelease(strokePath); CGPathRelease(strokePath);
} }
CGAffineTransform transform = self.matrix;
self.hitArea = CGPathCreateCopyByTransformingPath(hitArea, &transform);
CGPathRelease(hitArea);
if (self.opacity == 0) { if (self.opacity == 0) {
return; return;
} }
@@ -56,7 +62,7 @@
[self clip:context]; [self clip:context];
CGContextSaveGState(context); CGContextSaveGState(context);
CGContextAddPath(context, self.d); CGContextAddPath(context, path);
CGContextClip(context); CGContextClip(context);
RNSVGBrushConverter *brushConverter = [[self getSvgView] getDefinedBrushConverter:[self.fill brushRef]]; RNSVGBrushConverter *brushConverter = [[self getSvgView] getDefinedBrushConverter:[self.fill brushRef]];
[self.fill paint:context opacity:self.fillOpacity brushConverter:brushConverter]; [self.fill paint:context opacity:self.fillOpacity brushConverter:brushConverter];
@@ -78,7 +84,7 @@
} }
if (!fillColor) { if (!fillColor) {
CGContextAddPath(context, self.d); CGContextAddPath(context, path);
CGContextReplacePathWithStrokedPath(context); CGContextReplacePathWithStrokedPath(context);
CGContextClip(context); CGContextClip(context);
} }
@@ -92,11 +98,11 @@
} else { } else {
// draw fill // draw fill
[self clip:context]; [self clip:context];
CGContextAddPath(context, self.d); CGContextAddPath(context, path);
CGContextDrawPath(context, mode); CGContextDrawPath(context, mode);
// draw stroke // draw stroke
CGContextAddPath(context, self.d); CGContextAddPath(context, path);
CGContextReplacePathWithStrokedPath(context); CGContextReplacePathWithStrokedPath(context);
CGContextClip(context); CGContextClip(context);
RNSVGBrushConverter *brushConverter = [[self getSvgView] getDefinedBrushConverter:[self.stroke brushRef]]; RNSVGBrushConverter *brushConverter = [[self getSvgView] getDefinedBrushConverter:[self.stroke brushRef]];
@@ -106,7 +112,7 @@
} }
[self clip:context]; [self clip:context];
CGContextAddPath(context, self.d); CGContextAddPath(context, path);
CGContextDrawPath(context, mode); CGContextDrawPath(context, mode);
} }

3
ios/RNSVGNode.h
View File

@@ -24,6 +24,7 @@
@property (nonatomic, strong) NSString *clipPathRef; // use clipPath="url(#clip)" as ClipPath @property (nonatomic, strong) NSString *clipPathRef; // use clipPath="url(#clip)" as ClipPath
@property (nonatomic, assign) BOOL responsible; @property (nonatomic, assign) BOOL responsible;
@property (nonatomic, assign) CGAffineTransform matrix; @property (nonatomic, assign) CGAffineTransform matrix;
@property (nonatomic, assign) BOOL active;
- (void)invalidate; - (void)invalidate;
@@ -52,7 +53,7 @@
/** /**
* run hitTest * run hitTest
*/ */
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event; - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event withTransform:(CGAffineTransform)transfrom;
- (RNSVGSvgView *)getSvgView; - (RNSVGSvgView *)getSvgView;

16
ios/RNSVGNode.m
View File

@@ -69,12 +69,6 @@
_opacity = opacity; _opacity = opacity;
} }
- (void)setMatrix:(CGAffineTransform)matrix
{
self.transform = matrix;
[self invalidate];
}
- (void)setClipPath:(CGPathRef)clipPath - (void)setClipPath:(CGPathRef)clipPath
{ {
if (_clipPath == clipPath) { if (_clipPath == clipPath) {
@@ -147,7 +141,15 @@
// abstract // abstract
} }
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event; // hitTest delagate
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
// abstract
return nil;
}
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event withTransform:(CGAffineTransform)transfrom
{ {
// abstract // abstract
return nil; return nil;

2
ios/RNSVGRenderable.h
View File

@@ -26,7 +26,7 @@
@property (nonatomic, assign) CGFloat strokeMiterlimit; @property (nonatomic, assign) CGFloat strokeMiterlimit;
@property (nonatomic, assign) RNSVGCGFloatArray strokeDasharray; @property (nonatomic, assign) RNSVGCGFloatArray strokeDasharray;
@property (nonatomic, assign) CGFloat strokeDashoffset; @property (nonatomic, assign) CGFloat strokeDashoffset;
@property (nonatomic, assign) CGMutablePathRef hitArea; @property (nonatomic, assign) CGPathRef hitArea;
@property (nonatomic, copy) NSArray<NSString *> *propList; @property (nonatomic, copy) NSArray<NSString *> *propList;
- (void)setBoundingBox:(CGContextRef)context; - (void)setBoundingBox:(CGContextRef)context;

25
ios/RNSVGRenderable.m
View File

@@ -30,7 +30,7 @@
return self; return self;
} }
- (void)setHitArea:(CGMutablePathRef)hitArea - (void)setHitArea:(CGPathRef)hitArea
{ {
if (hitArea == _hitArea) { if (hitArea == _hitArea) {
return; return;
@@ -38,7 +38,7 @@
[self invalidate]; [self invalidate];
CGPathRelease(_hitArea); CGPathRelease(_hitArea);
_hitArea = hitArea; _hitArea = CGPathRetain(hitArea);
} }
- (void)setFill:(RNSVGBrush *)fill - (void)setFill:(RNSVGBrush *)fill
@@ -116,7 +116,7 @@
{ {
// This needs to be painted on a layer before being composited. // This needs to be painted on a layer before being composited.
CGContextSaveGState(context); CGContextSaveGState(context);
CGContextConcatCTM(context, self.transform); CGContextConcatCTM(context, self.matrix);
CGContextSetAlpha(context, self.opacity); CGContextSetAlpha(context, self.opacity);
[self beginTransparencyLayer:context]; [self beginTransparencyLayer:context];
@@ -130,8 +130,22 @@
// hitTest delagate // hitTest delagate
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{ {
CGPathRef clipPath = self.clipPath; return [self hitTest:point withEvent:event withTransform:CGAffineTransformMakeRotation(0)];
if (self.hitArea && CGPathContainsPoint(self.hitArea, nil, point, NO)) { }
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event withTransform:(CGAffineTransform)transfrom
{
if (self.active) {
if (!event) {
self.active = NO;
}
return self;
}
CGPathRef hitArea = CGPathCreateCopyByTransformingPath(self.hitArea, &transfrom);
CGPathRef clipPath = self.clipPath;
BOOL contains = CGPathContainsPoint(hitArea, nil, point, NO);
if (contains) {
if (!clipPath) { if (!clipPath) {
return self; return self;
} else { } else {
@@ -142,7 +156,6 @@
} }
} }
- (void)setBoundingBox:(CGContextRef)context - (void)setBoundingBox:(CGContextRef)context
{ {
_boundingBox = CGContextGetClipBoundingBox(context); _boundingBox = CGContextGetClipBoundingBox(context);

4
ios/RNSVGViewBox.m
View File

@@ -96,8 +96,8 @@
} }
} }
self.transform = CGAffineTransformScale(self.transform, scaleX, scaleY); self.matrix = CGAffineTransformMakeScale(scaleX, scaleY);
self.transform = CGAffineTransformTranslate(self.transform, -translateX * (_fromSymbol ? scaleX : 1), -translateY * (_fromSymbol ? scaleY : 1)); self.matrix = CGAffineTransformTranslate(self.matrix, -translateX * (_fromSymbol ? scaleX : 1), -translateY * (_fromSymbol ? scaleY : 1));
[super renderTo:context]; [super renderTo:context];
} }

6
ios/Shapes/RNSVGCircle.m
View File

@@ -38,12 +38,6 @@
_r = r; _r = r;
} }
- (void)renderLayerTo:(CGContextRef)context
{
self.d = [self getPath: context];
[super renderLayerTo:context];
}
- (CGPathRef)getPath:(CGContextRef)context - (CGPathRef)getPath:(CGContextRef)context
{ {
[self setBoundingBox:context]; [self setBoundingBox:context];

6
ios/Shapes/RNSVGEllipse.m
View File

@@ -47,12 +47,6 @@
_ry = ry; _ry = ry;
} }
- (void)renderLayerTo:(CGContextRef)context
{
self.d = [self getPath: context];
[super renderLayerTo:context];
}
- (CGPathRef)getPath:(CGContextRef)context - (CGPathRef)getPath:(CGContextRef)context
{ {
[self setBoundingBox:context]; [self setBoundingBox:context];

6
ios/Shapes/RNSVGLine.m
View File

@@ -47,12 +47,6 @@
_y2 = y2; _y2 = y2;
} }
- (void)renderLayerTo:(CGContextRef)context
{
self.d = [self getPath: context];
[super renderLayerTo:context];
}
- (CGPathRef)getPath:(CGContextRef)context - (CGPathRef)getPath:(CGContextRef)context
{ {
[self setBoundingBox:context]; [self setBoundingBox:context];

6
ios/Shapes/RNSVGRect.m
View File

@@ -65,12 +65,6 @@
_ry = ry; _ry = ry;
} }
- (void)renderLayerTo:(CGContextRef)context
{
self.d = [self getPath: context];
[super renderLayerTo:context];
}
- (CGPathRef)getPath:(CGContextRef)context - (CGPathRef)getPath:(CGContextRef)context
{ {
[self setBoundingBox:context]; [self setBoundingBox:context];

7
ios/Text/RNSVGText.m
View File

@@ -53,12 +53,6 @@ static void RNSVGFreeTextFrame(RNSVGTextFrame frame)
RNSVGFreeTextFrame(_textFrame); RNSVGFreeTextFrame(_textFrame);
} }
- (void)renderLayerTo:(CGContextRef)context
{
self.d = [self getPath: context];
[super renderLayerTo:context];
}
- (CGPathRef)getPath:(CGContextRef)context - (CGPathRef)getPath:(CGContextRef)context
{ {
CGMutablePathRef path = CGPathCreateMutable(); CGMutablePathRef path = CGPathCreateMutable();
@@ -124,6 +118,7 @@ static void RNSVGFreeTextFrame(RNSVGTextFrame frame)
transform = CGAffineTransformTranslate(upsideDown, point.x, point.y); transform = CGAffineTransformTranslate(upsideDown, point.x, point.y);
} }
CGPathAddPath(path, &transform, letter); CGPathAddPath(path, &transform, letter);
} }

24
ios/Utils/RCTConvert+RNSVG.m
View File

@@ -26,7 +26,7 @@
#define NEXT_VALUE [self double:arr[i++]] #define NEXT_VALUE [self double:arr[i++]]
CGMutablePathRef path = CGPathCreateMutable(); CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 0); CGPathMoveToPoint(path, nil, 0, 0);
@try { @try {
NSUInteger i = 0; NSUInteger i = 0;
@@ -34,28 +34,28 @@
NSUInteger type = [arr[i++] unsignedIntegerValue]; NSUInteger type = [arr[i++] unsignedIntegerValue];
switch (type) { switch (type) {
case 0: case 0:
CGPathMoveToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE); CGPathMoveToPoint(path, nil, NEXT_VALUE, NEXT_VALUE);
break; break;
case 1: case 1:
CGPathCloseSubpath(path); CGPathCloseSubpath(path);
break; break;
case 2: case 2:
CGPathAddLineToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE); CGPathAddLineToPoint(path, nil, NEXT_VALUE, NEXT_VALUE);
break; break;
case 3: case 3:
CGPathAddCurveToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE); CGPathAddCurveToPoint(path, nil, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE);
break; break;
default: default:
RCTLogError(@"Invalid CGPath type %zd at element %zd of %@", type, i, arr); RCTLogError(@"Invalid CGPath type %zd at element %zd of %@", type, i, arr);
CGPathRelease(path); CGPathRelease(path);
return NULL; return nil;
} }
} }
} }
@catch (NSException *exception) { @catch (NSException *exception) {
RCTLogError(@"Invalid CGPath format: %@", arr); RCTLogError(@"Invalid CGPath format: %@", arr);
CGPathRelease(path); CGPathRelease(path);
return NULL; return nil;
} }
return (CGPathRef)CFAutorelease(path); return (CGPathRef)CFAutorelease(path);
@@ -123,7 +123,7 @@ RCT_ENUM_CONVERTER(RNSVGVBMOS, (@{
CFRelease(attrString); CFRelease(attrString);
frame.lines[i] = line; frame.lines[i] = line;
frame.widths[i] = CTLineGetTypographicBounds(line, NULL, NULL, NULL); frame.widths[i] = CTLineGetTypographicBounds(line, nil, nil, nil);
}]; }];
return frame; return frame;
@@ -136,7 +136,7 @@ RCT_ENUM_CONVERTER(RNSVGVBMOS, (@{
RNSVGCGFloatArray array; RNSVGCGFloatArray array;
array.count = count; array.count = count;
array.array = NULL; array.array = nil;
if (count) { if (count) {
// Ideally, these arrays should already use the same memory layout. // Ideally, these arrays should already use the same memory layout.
@@ -213,13 +213,13 @@ RCT_ENUM_CONVERTER(RNSVGVBMOS, (@{
break; break;
default: default:
RCTLogError(@"Invalid RNSVGBezier type %zd at element %zd of %@", type, i, arr); RCTLogError(@"Invalid RNSVGBezier type %zd at element %zd of %@", type, i, arr);
return NULL; return nil;
} }
} }
} }
@catch (NSException *exception) { @catch (NSException *exception) {
RCTLogError(@"Invalid RNSVGBezier format: %@", arr); RCTLogError(@"Invalid RNSVGBezier format: %@", arr);
return NULL; return nil;
} }
return beziers; return beziers;
@@ -256,7 +256,7 @@ RCT_ENUM_CONVERTER(RNSVGVBMOS, (@{
NSArray *arr = [self NSArray:json]; NSArray *arr = [self NSArray:json];
if (arr.count < offset + 4) { if (arr.count < offset + 4) {
RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr); RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
return NULL; return nil;
} }
return [self CGColor:[arr subarrayWithRange:(NSRange){offset, 4}]]; return [self CGColor:[arr subarrayWithRange:(NSRange){offset, 4}]];
} }
@@ -266,7 +266,7 @@ RCT_ENUM_CONVERTER(RNSVGVBMOS, (@{
NSArray *arr = [self NSArray:json]; NSArray *arr = [self NSArray:json];
if (arr.count < offset) { if (arr.count < offset) {
RCTLogError(@"Too few elements in array (expected at least %zd): %@", offset, arr); RCTLogError(@"Too few elements in array (expected at least %zd): %@", offset, arr);
return NULL; return nil;
} }
arr = [arr subarrayWithRange:(NSRange){offset, arr.count - offset}]; arr = [arr subarrayWithRange:(NSRange){offset, arr.count - offset}];
RNSVGCGFloatArray colorsAndOffsets = [self RNSVGCGFloatArray:arr]; RNSVGCGFloatArray colorsAndOffsets = [self RNSVGCGFloatArray:arr];