SVG 파일에서 가져온 베 지어 곡선을 일렬로 정렬

현재 저는 TBXML을 사용하는 UIView의 하위 클래스에서 SVG XML 파일을 구문 분석하고 'g'경로 명령어를 제거합니다. 그런 다음이 명령어 집합을 SvgToBezier에 전달합니다.이 파서는 경로 명령어를 입력으로 사용하여 UIBezierPath 객체를 반환합니다. 그런 다음 drawRect 메서드로 그립니다.SVG 파일에서 가져온 베 지어 곡선을 일렬로 정렬

경로는 잘 렌더링하지만, 문제는 그들이 서로 그들은 내가 아는

(그들은 방법들이 구글 크롬, 어도비 일러스트 레이터 등으로 표시)로되어있는 방법을 일치하지 않는 것입니다 SVGKit 라이브러리를 사용하면 복잡한 svg 파일을 파싱 할 수 있지만이 개념을 직접 작성하여 관련 개념에 대한 이해를 넓힐 수 있습니다.

먼저 drawRect 메소드를 보여 주며 예제 SVG 파일, 예상되는 출력 및 iPhone에서 300x300 rect로 그린 실제 출력을 보여줍니다.

- (void)drawRect:(CGRect)rect 
{ 


//getting the XML from set property 
TBXMLElement *root = self.svgRoot.rootXMLElement; 

//getting the rect tag, which is the background 
TBXMLElement *rectColor = [TBXML childElementNamed:@"rect" parentElement:root]; 

//getting the first g tag 
TBXMLElement *g1 = [TBXML childElementNamed:@"g" parentElement:root]; 

//and it's child path tag 
TBXMLElement *path1 = [TBXML childElementNamed:@"path" parentElement:g1]; 

//getting the sibbling g tag 
TBXMLElement *g2 = g1->nextSibling; 

//and it's child path tag 
TBXMLElement *path2 = [TBXML childElementNamed:@"path" parentElement:g2]; 

//create a context reference 
CGContextRef ctx = UIGraphicsGetCurrentContext(); 

//flip the context so the origin points jive 
CGContextTranslateCTM(ctx, 0, rect.size.height); 
CGContextScaleCTM(ctx, 1.0, -1.0); 

//get fill color for first path 
const char *str1 = [[TBXML valueOfAttributeNamed:@"fill" forElement:g1] cStringUsingEncoding:NSASCIIStringEncoding]; 
long x1 = strtol(str1+1, NULL, 16); 

UIColor *rgb1 = UIColorFromRGB(x1); 

//get fill color for second path 
const char *str2 = [[TBXML valueOfAttributeNamed:@"fill" forElement:g2] cStringUsingEncoding:NSASCIIStringEncoding]; 
long x2 = strtol(str2+1, NULL, 16); 

UIColor *rgb2 = UIColorFromRGB(x2); 

//get fill color for rect background 
const char *str3 = [[TBXML valueOfAttributeNamed:@"fill" forElement:rectColor] cStringUsingEncoding:NSASCIIStringEncoding]; 
long x3 = strtol(str3+1, NULL, 16); 

UIColor *rgb3 = UIColorFromRGB(x3); 

//turn them into CGColors 
CGColorRef color1 = rgb1.CGColor; 
CGColorRef color2 = rgb2.CGColor; 
CGColorRef color3 = rgb3.CGColor; 

//draw the rect background and fill it 
CGContextSetFillColorWithColor(ctx, color3); 
CGContextFillRect(ctx, CGRectMake(0, 0, rect.size.width, rect.size.height)); 


//make a bezier path from the first path tag using SvgToBezier 
SvgToBezier *bezier1 = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:[TBXML valueOfAttributeNamed:@"d" forElement:path1] rect:rect]; 

//make second bezier path 
SvgToBezier *bezier2 = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:[TBXML valueOfAttributeNamed:@"d" forElement:path2] rect:rect]; 


//set fill color for first bezier 
CGContextSetFillColorWithColor(ctx, color1); 

//draw it 
UIBezierPath *bezierPath1 = bezier1.bezier; 

CGContextAddPath(ctx, bezierPath1.CGPath); 
CGContextDrawPath(ctx, kCGPathEOFill); 


//second bezier 
CGContextSetFillColorWithColor(ctx, color2); 

UIBezierPath *bezierPath2 = bezier2.bezier; 

CGContextAddPath(ctx, bezierPath2.CGPath); 
CGContextDrawPath(ctx, kCGPathEOFill); 


}

여기 여기 Raw SVG

년대 Expected Drawing Result

입니다 그리고 여기에 내가 계산과 CGAffineTransforms 모든 종류의 실험을했던 Actual iPhone Output (screenshot from iOS Simulator)

가 .. 코드에서 모든 것을 왼쪽의 왜냐하면 그것은 단지 일들을 혼란시킬 것이기 때문입니다.

도움 주셔서 감사합니다. 문제의 또 다른 경우를 포함 , 단지 불일치 (일관성을?) 설명하기 :

건배

편집 할 수 있습니다. Actual

출처

2012-07-03 Doug