繪圖字母/文字動畫iOS

Question

嗯，我想在iOS上製作一個Kids Tracing應用程序。 我在實現繪製字母的動畫時遇到問題。該應用程序將繪製字母表示應如何跟蹤。

該如何實現？

我發現了一些代碼：https://github.com/ole/Animated-Paths 但在這裏，按字母順序在兩個路徑（內體與外體）

我想在一個單一的路徑來實現這個映射。我試圖編輯代碼，但失敗

任何人都可以指導我如何做到這一點？

謝謝

Answer 1

使用FloodFill算法，這將幫助你跟蹤

Answer 2

我一直還抓我的頭，以實現中，我可以就這麼畫的字母同樣的事情，該觸摸到的字母可以被認可。

這裏是一個位I使用的邏輯的，

• 獲取信（字母）。 1
• 獲取字母表的字形。 2
• 爲字形創建路徑。 3
• 呈現從字形到貝塞爾路徑的路徑。 4
• 繪製一個貝塞爾視圖。 5
• 獲取bezier上的點。 6
• 有一次，他們在bezier點觸摸他們屬於我們。 7

---

path。

以下是相同的代碼示例。

//Get the glyph 
const char charater = "A"; //1: 
UIFont *font = [UIFont fontWithName:@"Helvetica" size:100.0]; 
CTFontRef cgFont = CTFontCreateWithName((__bridge CFStringRef)font.fontName, 100.0, nil); 
CFStringRef str = CFStringCreateWithCString(NULL, &charater, kCFStringEncodingUTF8); 
CGGlyph glyph = CTFontGetGlyphWithName(cgFont, str); //2: 

// render the glyph into a bezier path 
CGPathRef path = CTFontCreatePathForGlyph(cgFont, glyph, nil); //3: 
UIBezierPath *BPath = [UIBezierPath bezierPathWithCGPath:path]; 
BPath = BPath.bezierPathByReversingPath; 
NSLog(@"Path is %@", BPath); //4: 
CAShapeLayer *line = [[CAShapeLayer alloc] init]; 
line.path = BPath.CGPath; 
line.strokeColor = [[UIColor blueColor] CGColor]; 
line.fillColor = [[UIColor colorWithPatternImage:img2] CGColor]; 
[myView.layer addSublayer:line]; //5: 

//Get the points on path 

CGPathRef yourCGPath = BPath.CGPath; 
NSMutableArray *bezierPoints = [NSMutableArray array]; 
CGPathApply(yourCGPath, (__bridge void * _Nullable)(bezierPoints), MyCGPathApplierFunc); 
NSLog(@"Points on path %@", bezierPoints); //6: 


//Check if point present on path 
CGPoint StartPoint1 = [Touch locationInView:myView]; 
if(CGRectContainsPoint(myView.frame, StartPoint1)){ 
//Do your work. //7: 
} 


//GetPoints 

void MyCGPathApplierFunc (void *info, const CGPathElement *element) { 
NSMutableArray *bezierPoints = (__bridge NSMutableArray *)info; 
CGPoint *points = element->points; 
CGPathElementType type = element->type; 
switch(type) { 
     case kCGPathElementMoveToPoint: // contains 1 point 
      [bezierPoints addObject:[NSValue valueWithCGPoint:points[0]]]; 
      break; 

     case kCGPathElementAddLineToPoint: // contains 1 point 
      [bezierPoints addObject:[NSValue valueWithCGPoint:points[0]]]; 
      break; 

     case kCGPathElementAddQuadCurveToPoint: // contains 2 points 
      [bezierPoints addObject:[NSValue valueWithCGPoint:points[0]]]; 
      [bezierPoints addObject:[NSValue valueWithCGPoint:points[1]]]; 
      break; 

     case kCGPathElementAddCurveToPoint: // contains 3 points 
      [bezierPoints addObject:[NSValue valueWithCGPoint:points[0]]]; 
      [bezierPoints addObject:[NSValue valueWithCGPoint:points[1]]]; 
      [bezierPoints addObject:[NSValue valueWithCGPoint:points[2]]]; 
      break; 

     case kCGPathElementCloseSubpath: // contains no point 
      break; 
    } 
}