From 5f4ff90c2a0e229de64435fcdccb063729563897 Mon Sep 17 00:00:00 2001 From: Horcrux Date: Sat, 17 Sep 2016 17:14:31 +0800 Subject: [PATCH] finish basic Text features on iOS --- README.md | 1 + ios/Text/RNSVGSpan.h | 5 +++-- ios/Text/RNSVGSpan.m | 22 ++++++++++++++++++- ios/Text/RNSVGText.h | 2 ++ ios/Text/RNSVGText.m | 43 +------------------------------------- lib/extract/extractText.js | 6 +++++- 6 files changed, 33 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 53952ba6..833b8d3b 100644 --- a/README.md +++ b/README.md @@ -581,6 +581,7 @@ npm install 4. implement Animated elements 5. load Image from url 6. Mask element +7. Fix rotate prop ON Text ### Known issues: 1. cannot set alpha channel for Gradient on iOS. diff --git a/ios/Text/RNSVGSpan.h b/ios/Text/RNSVGSpan.h index acf5d7c4..27a98e0a 100644 --- a/ios/Text/RNSVGSpan.h +++ b/ios/Text/RNSVGSpan.h @@ -9,11 +9,12 @@ #import #import #import "RNSVGPath.h" +#import "RNSVGText.h" @interface RNSVGSpan : RNSVGPath -@property (nonatomic, assign) CGFloat *dx; -@property (nonatomic, assign) CGFloat *dy; +@property (nonatomic, assign) CGFloat dx; +@property (nonatomic, assign) CGFloat dy; @property (nonatomic, strong) NSString *px; @property (nonatomic, strong) NSString *py; @property (nonatomic, assign) CTFontRef font; diff --git a/ios/Text/RNSVGSpan.m b/ios/Text/RNSVGSpan.m index f18e22f6..2581741c 100644 --- a/ios/Text/RNSVGSpan.m +++ b/ios/Text/RNSVGSpan.m @@ -10,6 +10,7 @@ #import "RNSVGSpan.h" #import "RNSVGBezierPath.h" +@class RNSVGText; @implementation RNSVGSpan - (CGPathRef)getPath:(CGContextRef)context @@ -36,7 +37,21 @@ CGFloat px = self.px ? [self getWidthRelatedValue:self.px] : 0; CGFloat py = self.py ? [self getHeightRelatedValue:self.py] : 0; - CGAffineTransform offset = CGAffineTransformMakeTranslation(px, size + py); + RNSVGText *text = [self getText]; + if (self.px) { + text.offsetX = px; + } + + if (self.py) { + text.offsetY = py + size * 1.1; + } + + text.offsetX += self.dx; + text.offsetY += self.dy; + + CGAffineTransform offset = CGAffineTransformMakeTranslation(text.offsetX, text.offsetY); + + text.offsetX += CTLineGetTypographicBounds(line, nil, nil, nil); CGPathAddPath(path, &offset, linePath); CGPathRelease(linePath); @@ -45,6 +60,11 @@ return (CGPathRef)CFAutorelease(path); } +- (RNSVGText *)getText +{ + return self.superview; +} + - (CGMutablePathRef)setLinePath:(CTLineRef)line { CGAffineTransform upsideDown = CGAffineTransformMakeScale(1.0, -1.0); diff --git a/ios/Text/RNSVGText.h b/ios/Text/RNSVGText.h index e70d5c11..d1dc0e20 100644 --- a/ios/Text/RNSVGText.h +++ b/ios/Text/RNSVGText.h @@ -13,5 +13,7 @@ @property (nonatomic, assign) CTTextAlignment alignment; @property (nonatomic, copy) NSArray *path; +@property (nonatomic, assign) CGFloat offsetX; +@property (nonatomic, assign) CGFloat offsetY; @end diff --git a/ios/Text/RNSVGText.m b/ios/Text/RNSVGText.m index 87a7671c..bc1d24c3 100644 --- a/ios/Text/RNSVGText.m +++ b/ios/Text/RNSVGText.m @@ -17,13 +17,6 @@ [self invalidate]; _alignment = alignment; } -// -//- (void)setTextFrame:(RNSVGTextFrame)textFrame -//{ -// RNSVGFreeTextFrame(_textFrame); -// [self invalidate]; -// _textFrame = textFrame; -//} - (void)setPath:(NSArray *)path { @@ -34,15 +27,10 @@ _path = path; } -//- (void)dealloc -//{ -// RNSVGFreeTextFrame(_textFrame); -//} - - (void)renderLayerTo:(CGContextRef)context { CGFloat shift = [self getShift:context path:nil]; - // translate path by alignment offset + // Translate path by alignment offset CGContextSaveGState(context); CGContextConcatCTM(context, CGAffineTransformMakeTranslation(-shift, 0)); [super renderLayerTo:context]; @@ -86,33 +74,4 @@ return shift; } -//- (CGPathRef)getPath:(CGContextRef)context -//{ -// CGMutablePathRef path = CGPathCreateMutable(); -// RNSVGTextFrame frame = self.textFrame; -// for (int i = 0; i < frame.count; i++) { -// CGFloat shift; -// CGFloat width = frame.widths[i]; -// switch (self.alignment) { -// case kCTTextAlignmentRight: -// shift = width; -// break; -// case kCTTextAlignmentCenter: -// shift = width / 2; -// break; -// default: -// shift = 0; -// break; -// } -// // We should consider snapping this shift to device pixels to improve rendering quality -// // when a line has subpixel width. -// CGAffineTransform offset = CGAffineTransformMakeTranslation(-shift, frame.baseLine + frame.lineHeight * i + (self.path ? -frame.lineHeight : 0)); -// -// CGMutablePathRef line = [self setLinePath:frame.lines[i]]; -// CGPathAddPath(path, &offset, line); -// CGPathRelease(line); -// } - -// return (CGPathRef)CFAutorelease(path); -//} @end diff --git a/lib/extract/extractText.js b/lib/extract/extractText.js index b71ae979..b9c1cb9f 100644 --- a/lib/extract/extractText.js +++ b/lib/extract/extractText.js @@ -107,13 +107,14 @@ function parseText(props, inheritedProps = {}, deltas = []) { if (typeof children === 'string') { + let computedProps = _.reduce(inheritedProps, (prev, value, name) => { if (!prev.hasOwnProperty(name)) { prev[name] = value; } return prev; - }, _.omit(props, ['children', 'x', 'y'])); + }, _.pick(props, fontAndRenderPropsKeys)); let delta = deltas.shift(); @@ -135,6 +136,8 @@ function parseText(props, inheritedProps = {}, deltas = []) { positionY: y || null }); + x = y = null; + if (!text) { return spanArray; } else { @@ -143,6 +146,7 @@ function parseText(props, inheritedProps = {}, deltas = []) { }; } else { + inheritedProps = _.assign({}, inheritedProps); fontAndRenderPropsKeys.forEach(inheritablePropName => { if (props.hasOwnProperty(inheritablePropName)) { inheritedProps[inheritablePropName] = props[inheritablePropName];