QuartzCore에서 경로를 따라 텍스트 그리기

Question

나는 라인과 텍스트를 형성하는 점의 배열을 가지고있다. 이 선을 따라 텍스트 그리기에 대해 어떻게 할 수 있습니까?

- (void)drawRect:(CGRect)rect 

의 UIView?

문제없이 경로를 그릴 수 있습니다. 간과 한 표준 방법이나 그 경로를 따라 텍스트를 그릴 수있는 프레임 워크가 있습니까? 이상적으로 QuartzCore/CoreGraphics만을 사용하여 이것을하고 싶습니다.

각 문자의 너비를 계산하고 모든 문자를 회전 해 보았습니다. 이런 종류의 작품이지만 더 우아한 방법이 있는지 궁금해하고있었습니다.

Answer 1

Mac OS X에서이 작업을 수행 할 수 있다고 믿지만, 가장 가까운 아이폰은 CGContextShowGlyphsWithAdvances이고이 작업은 회전되지 않습니다.

루프를 사용하고 각 문자를 다음과 같이 사용하여 그리는 것이 너무 어렵지 않아야합니다. 이는 애플의 문서에서 적응 및 테스트하지, 그래서 조심한다 :

CGContextSelectFont(myContext, "Helvetica", 12, kCGEncodingMacRoman); 
CGContextSetCharacterSpacing(myContext, 10); 
CGContextSetTextDrawingMode(myContext, kCGTextFillStroke); 
CGContextSetRGBFillColor(myContext, 0, 0, 0, 1); 
CGContextSetRGBStrokeColor(myContext, 0, 0, 0, 1); 

NSUInteger charIndex = 0; 
for(NSString *myChar in arrayOfChars) { 
    char *cString = [myChar UTF8String]; 
    CGPoint charOrigin = originForPositionAlongPath(charIndex, myPath); 
    CGFloat slope = slopeForPositionAlongPath(charIndex, myPath); 

    CGContextSetTextMatrix(myContext, CGAffineTransformMakeRotation(slope)); 
    CGContextShowTextAtPoint(myContext, charOrigin.x, charOrigin.y, cString, 1); 
} 

편집 : 다음은 PositionAlongPath 기능의 생각이다. 다시 말하지만, 테스트를 거치지는 않았지만 가까이 있어야합니다. originAlong ... 경로가 부족하면 (-1, -1)을 반환합니다.

CGPoint originForPositionAlongPath(int index, NSArray *path) { 
    CGFloat charWidth = 12.0; 
    CGFloat widthToGo = charWidth * index; 

    NSInteger i = 0; 
    CGPoint position = [path objectAtIndex:i]; 

    while(widthToGo >= 0) { 
      //out of path, return invalid point 
     if(i >= [path count]) { 
      return CGPointMake(-1, -1); 
     } 

     CGPoint next = [path objectAtIndex:i+1]; 

     CGFloat xDiff = next.x - position.x; 
     CGFloat yDiff = next.y - position.y; 
     CGFloat distToNext = sqrt(xDiff*xDiff + yDiff*yDiff); 

     CGFloat fracToGo = widthToGo/distToNext 
      //point is before next point in path, interpolate the answer 
     if(fracToGo < 1) { 
      return CGPointMake(position.x+(xDiff*fracToGo), position.y+(yDiff*fracToGo)); 
     } 

      //advance to next point on the path 
     widthToGo -= distToNext; 
     position = next; 
     ++i; 
    } 
} 


CGFloat slopeForPositionAlongPath(int index, NSArray *path) { 
    CGPoint begin = originForPositionAlongPath(index, path); 
    CGPoint end = originForPositionAlongPath(index+1, path); 

    CGFloat xDiff = end.x - begin.x; 
    CGFloat yDiff = end.y - begin.y; 

    return atan(yDiff/xDiff); 
} 

Answer 2

이 아마 무관하지만 당신은 SVG (http://www.w3.org/TR/SVG/text.html#TextOnAPath)와 경로를 따라 텍스트 수 있으며, iPhoneOS 그것을 지원합니다.

Answer 3

위의 예는 불행히도 예상대로 작동하지 않았습니다. 이제 경로를 따라 텍스트를 그리는 올바른 방법을 찾았습니다.

여기에 우리가 간다 : 등 (1)의 내 응용 프로그램에서 발췌,하지만 난 어떤 의견 분명한 일을 할 것입니다 :

당신이 코드 일을 할 수 없다.

// MODIFIED ORIGIN FUNCTION 

CGPoint originForPositionAlongPath(float *l, float nextW, int index, NSArray *path) { 
CGFloat widthToGo = *l + nextW; 


NSInteger i = 0; 
CGPoint position = [[path objectAtIndex:i] CGPointValue]; 

while(widthToGo >= 0) { 
    //out of path, return invalid point 
    if(i+1 >= [path count]) { 
     return CGPointMake(-1, -1); 
    } 

    CGPoint next = [[path objectAtIndex:i+1] CGPointValue]; 

    CGFloat xDiff = next.x - position.x; 
    CGFloat yDiff = next.y - position.y; 
    CGFloat distToNext = sqrt(xDiff*xDiff + yDiff*yDiff); 

    CGFloat fracToGo = widthToGo/distToNext; 
    //point is before next point in path, interpolate the answer 
    if(fracToGo < 1) { 
     return CGPointMake(position.x+(xDiff*fracToGo), position.y+(yDiff*fracToGo)); 
    } 

    //advance to next point on the path 
    widthToGo -= distToNext; 
    position = next; 
    ++i; 
} 
} 

// MODIFIED SLOPE FUNCTION 

CGFloat slopeForPositionAlongPath(float* l, float nextW, int index, NSArray *path) { 
CGPoint begin = originForPositionAlongPath(l, 0, index, path); 
CGPoint end = originForPositionAlongPath(l, nextW, index+1, path); 

CGFloat xDiff = end.x - begin.x; 
CGFloat yDiff = end.y - begin.y; 

return atan(yDiff/xDiff); 
} 


// IMPORTANT: CHARACTER WIDTHS FOR HELVETICA, ABOVE EXAMPLE USES FIXED WIDTHS WHICH IS NOT ACCURATE 

float arraychars[] = { 
0,  0,  0,  0,  0,  0,  0,  0,  
0,  0,  0,  0,  0,  0,  0,  0,  
0,  0,  0,  0,  0,  0,  0,  0,  
0,  0,  0,  0,  0,  0,  0,  0,  
0.278, 0.333, 0.474, 0.556, 0.556, 0.889, 0.722, 0.278, 
0.333, 0.333, 0.389, 0.584, 0.278, 0.584, 0.278, 0.278, 
0.556, 0.556, 0.556, 0.556, 0.556, 0.556, 0.556, 0.556, 
0.556, 0.556, 0.333, 0.333, 0.584, 0.584, 0.584, 0.611, 
0.975, 0.722, 0.722, 0.722, 0.722, 0.667, 0.611, 0.778, 
0.722, 0.278, 0.556, 0.722, 0.611, 0.833, 0.722, 0.778, 
0.667, 0.778, 0.722, 0.667, 0.611, 0.722, 0.667, 0.944, 
0.667, 0.667, 0.611, 0.333, 0.278, 0.333, 0.584, 0.556, 
0.278, 0.556, 0.611, 0.556, 0.611, 0.556, 0.333, 0.611, 
0.611, 0.278, 0.278, 0.556, 0.278, 0.889, 0.611, 0.611, 
0.611, 0.611, 0.389, 0.556, 0.333, 0.611, 0.556, 0.778, 
0.556, 0.556, 0.5, 0.389, 0.28, 0.389, 0.584, 0,  
0,  0,  0,  0,  0,  0,  0,  0,  
0,  0,  0,  0,  0,  0,  0,  0,  
0.278, 0.333, 0.333, 0.333, 0.333, 0.333, 0.333, 0.333, 
0.333, 0,  0.333, 0.333, 0,  0.333, 0.333, 0.333, 
0.278, 0.333, 0.556, 0.556, 0.556, 0.556, 0.28, 0.556, 
0.333, 0.737, 0.37, 0.556, 0.584, 0.333, 0.737, 0.333, 
0.4, 0.584, 0.333, 0.333, 0.333, 0.611, 0.556, 0.278, 
0.333, 0.333, 0.365, 0.556, 0.834, 0.834, 0.834, 0.611, 
0.722, 0.722, 0.722, 0.722, 0.722, 0.722, 1,  0.722, 
0.667, 0.667, 0.667, 0.667, 0.278, 0.278, 0.278, 0.278, 
0.722, 0.722, 0.778, 0.778, 0.778, 0.778, 0.778, 0.584, 
0.778, 0.722, 0.722, 0.722, 0.722, 0.667, 0.667, 0.611, 
0.556, 0.556, 0.556, 0.556, 0.556, 0.556, 0.889, 0.556, 
0.556, 0.556, 0.556, 0.556, 0.278, 0.278, 0.278, 0.278, 
0.611, 0.611, 0.611, 0.611, 0.611, 0.611, 0.611, 0.584, 
0.611, 0.611, 0.611, 0.611, 0.611, 0.556, 0.611, 0.556, 
       };  

void o_DrawContourLabel(void *myObjectInstance, TransBuffer* transBuffer,  MapPainterIphone* mp,const Projection& projection, 
        const MapParameter& parameter, 
        const LabelStyle& style, 
        const std::string& text, 
        size_t transStart, size_t transEnd){ 
// HERE WE Initialize the font etc. 

CGContextSelectFont(context, "Helvetica-Bold", 10, kCGEncodingMacRoman); 
CGContextSetCharacterSpacing(context, 0); 
CGContextSetTextDrawingMode(context, kCGTextFillStroke); 
CGContextSetLineWidth(context, 3.0); 
CGContextSetRGBFillColor(context, style.GetTextR(), style.GetTextG(), style.GetTextB(), style.GetTextA()); 
CGContextSetRGBStrokeColor(context, 1, 1, 1, 1); 

// Here we prepare a NSArray holding all waypoints of our path. 
// I fill it from a "transBuffer" but you may fill it with whatever you want 

NSMutableArray* path = [[NSMutableArray alloc] init]; 
if (transBuffer->buffer[transStart].x<transBuffer->buffer[transEnd].x) { 
    for (size_t j=transStart; j<=transEnd; j++) { 
     if (j==transStart) { 
      [path addObject:[NSValue valueWithCGPoint:CGPointMake(transBuffer->buffer[j].x,transBuffer->buffer[j].y)]]; 
     } 
     else { 
      [path addObject:[NSValue valueWithCGPoint:CGPointMake(transBuffer->buffer[j].x,transBuffer->buffer[j].y)]]; 
     } 
    } 
} 
else { 
    for (size_t j=0; j<=transEnd-transStart; j++) { 
     size_t idx=transEnd-j; 

     if (j==0) { 
      [path addObject:[NSValue valueWithCGPoint:CGPointMake(transBuffer->buffer[idx].x,transBuffer->buffer[idx].y)]]; 

     } 
     else { 
      [path addObject:[NSValue valueWithCGPoint:CGPointMake(transBuffer->buffer[idx].x,transBuffer->buffer[idx].y)]]; 

     } 
    } 
} 

// if path is too short for "estimated text length" then exit 

if (pathLength(path)<text.length()*7) { 
    // Text is longer than path to draw on 
    return; 
} 

// NOW PAINT CHAR FOR CHAR USING CHARACTER WIDTHS TABLE 

float lenUpToNow = 0; 

CGAffineTransform transform=CGAffineTransformMake(1.0, 0.0, 0.0, -1.0, 0.0, 0.0); 
NSUInteger charIndex = 0; 
for(int i=0;i<text.length();i++) { 
    char *cString = (char*)malloc(2*sizeof(char)); 
    cString[0] = text.at(i); 
    cString[1]=0; 

    float nww = arraychars[cString[0]]*8*1.4; 

    CGPoint charOrigin = originForPositionAlongPath(&lenUpToNow, 0, charIndex, path); 
    CGFloat slope = slopeForPositionAlongPath(&lenUpToNow, nww, charIndex, path); 
    std::cout << " CHARACTER " << cString << " placed at " << charOrigin.x << "," << charOrigin.y << std::endl; 

    // DO NOT FORGET TO DO THIS (TWO TRANSFORMATIONS) .. one for the rotation 
    // and one for mirroring, otherwise the text will be mirrored due to a 
    // crappy coordinate system in QuartzCore. 

    CGAffineTransform ct = CGAffineTransformConcat(transform,CGAffineTransformMakeRotation(slope)); 
    CGContextSetTextMatrix(context, ct); 
    CGContextSetTextDrawingMode(context, kCGTextStroke); 
    CGContextShowTextAtPoint(context, charOrigin.x, charOrigin.y, cString, 1); 

    CGContextSetTextDrawingMode(context, kCGTextFill); 
    CGContextShowTextAtPoint(context, charOrigin.x, charOrigin.y, cString, 1); 
    std::cout << " ... len (" << (int)cString[0] << ") = " << arraychars[cString[0]] << " up to now: " << lenUpToNow << std::endl; 
    lenUpToNow += nww; 

    charIndex++; 
    free(cString); 
} 


}