2

さて、私は iOS で Kids Tracing アプリケーションを作成しようとしています。アルファベットを描画するアニメーションを実装する際に問題に直面しています。アプリケーションはアルファベットを描画して、トレース方法を示します。

これを実装する方法は？

いくつかのコードを見つけました: https://github.com/ole/Animated-Paths しかし、ここではアルファベットが 2 つのパス (内側と外側) にマッピングされています。

これを単一のパスで実装したい。コードを編集しようとしましたが失敗しました

誰かがそれを行う方法を教えてもらえますか?

ありがとうございました

4

2 に答える 2

0

また、アルファベットへのタッチを認識できるように、アルファベットを描画できる同じことを実装するために頭を悩ませています。

ここに私が使用した少しのロジックがあります、

  • 文字 (アルファベット) を取得します。1
  • アルファベットのグリフを取得します。2
  • グリフのパスを作成します。3
  • グリフからベジエ パスへのパスをレンダリングします。4
  • ビューにベジエを描画します。5
  • ベジエでポイントを取得します。6
  • 一度、彼らが私たちに属しているベジエ点でそれらを検索してください。7

道。

これは同じコードサンプルです。

//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;
    }
}
于 2016-10-07T08:49:05.990 に答える
0

FloodFill アルゴリズムを使用します。これはトレースに役立ちます

于 2013-07-03T08:35:31.290 に答える