Рисование кривых Безье моим пальцем в iOS? - PullRequest
Новая
       22

Рисование кривых Безье моим пальцем в iOS?

8 голосов
/ 12 января 2011

Эй, я пытаюсь выяснить, как генерировать кривые Безье в iOS на основе пользовательского ввода. Существуют ли какие-либо классы для этого? Может ли кто-нибудь дать мне общее резюме того, что потребуется? Мне просто нужна помощь, чтобы начать с правой ноги.

Ответы [ 2 ]

10 голосов
/ 12 января 2011

Если вы хотите остаться в target-c, вы можете использовать addCurveToPoint: controlPoint1: controlPoint2: метод из UIBezierPath. Вы также можете использовать функцию с аналогичным именем в CGPaths. При использовании кривых Безье для определения кривой необходимо 4 точки: начальная точка, конечная точка и контрольная точка на каждом конце.

Один из способов определить это - заставить пользователя перетащить палец, чтобы определить начальную и конечную точки, а затем коснуться экрана в контрольных точках. Вот примерное представление, чтобы справиться с этим.

BezierView.h 

enum {
    BezierStateNone = 0,
    BezierStateDefiningLine,
    BezierStateDefiningCP1,
    BezierStateDefiningCP2
};
@interface BezierView : UIView {
    CGPoint startPt, endPt, cPt1, cPt2;
    UInt8 state;
    UIBezierPath *curvePath;
  @private
    UITouch *currentTouch;
}
@property (nonatomic, retain) UIBezierPath *curvePath;
@end

BezierView.m 

@interface BezierView
@dynamic curvePath;
- (UIBezierPath *)curvePath {
    return [[curvePath retain] autorelease];
}
- (void)setCurvePath:(UIBezierPath *)newPath {
    id tmp = curvePath;
    curvePath = [newPath retain];
    [tmp release];
    state = BezierStateNone;
    [self setNeedsDisplay];
}
- (void)_updateCurve {
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPt];
    [path addCurveToPoint:endPt controlPoint1:cPt1 controlPoint2:cPt2];
}
- (void)_calcDefaultControls {
    if(ABS(startPt.x - endPt.x) > ABS(startPt.y - endPt.y)) {
        cPt1 = (CGPoint){(startPt.x + endPt.x) / 2, startPt.y};
        cPt2 = (CGPoint){cPt1.x, endPt.y};
    } else {
        cPt1 = (CGPoint){startPt.x, (startPt.y + endPt.y) / 2};
        cPt2 = (CGPoint){endPt.x, cPt1.y};
    }
}
- (void)drawRect:(CGRect)rect {
    UIBezierPath *path = self.curvePath;
    if(path) [path stroke];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    if(currentTouch) return;
    if(state == BezierStateNone) {
        state = BezierStateDefiningLine;
        currentTouch = [touches anyObject];
        startPt = [currentTouch locationInView:self];
    } else if(state == BezierStateDefiningCP1) {
        currentTouch = [touches anyObject];
        cPt1 = [currentTouch locationInView:self];
        [self _updateCurve];
    } else if(state == BezierStateDefiningCP2) {
        currentTouch = [touches anyObject];
        cPt2 = [currentTouch locationInView:self];
        [self _updateCurve];
    }
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    if(!currentTouch) return;
    if(state == BezierStateDefiningLine) {
        endPt = [currentTouch locationInView:self];
        [self _calcDefaultControls];
        [self _updateCurve];
    } else if(state == BezierStateDefiningCP1) {
        cPt1 = [currentTouch locationInView:self];
        [self _updateCurve];
    } else if(state == BezierStateDefiningCP2) {
        cPt2 = [currentTouch locationInView:self];
        [self _updateCurve];
    }
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    if(!currentTouch) return;
    if(state == BezierStateDefiningLine) {
        state = BezierStateDefiningCP1;
    } else if(state == BezierStateDefiningCP1) {
        state = BezierStateDefiningCP2;
    } else if(state == BezierStateDefiningCP2) {
        state = BezierStateNone;
    }
    currentTouch = nil;
}
- (void)touchesCanceled:(NSSet *)touches withEvent:(UIEvent *)event {
    if(state == BezierStateDefiningLine) {
        self.curvePath = nil;
        self.state = BezierStateNone;
    }
    self.currentTouch = nil;
}
4 голосов
/ 12 января 2011

Хорошо, самый простой способ сделать это, вероятно, создать подкласс UIView и использовать CoreGraphics для рисования. Проверьте пример кода из QuarzDemo . Реализуйте drawInRect -метод для вашего пользовательского класса представления. И обнаруживать прикосновения пользователя с помощью touchesBegan, touchesMoved и т. Д.

Вот пример кода (взят из QuarzDemo) для рисования кривой Безье: 

// Drawing with a white stroke color
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
// Draw them with a 2.0 stroke width so they are a bit more visible.
CGContextSetLineWidth(context, 2.0);

// Draw a bezier curve with end points s,e and control points cp1,cp2
CGPoint s = CGPointMake(30.0, 120.0);
CGPoint e = CGPointMake(300.0, 120.0);
CGPoint cp1 = CGPointMake(120.0, 30.0);
CGPoint cp2 = CGPointMake(210.0, 210.0);
CGContextMoveToPoint(context, s.x, s.y);
CGContextAddCurveToPoint(context, cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y);
CGContextStrokePath(context);

Надеюсь, это поможет вам начать;)

...