Рисование гладких кривых - Необходимые методы

Ответ 1

Я только что реализовал нечто подобное в проекте, над которым я работаю. Моим решением было использовать сплайн Catmull-Rom вместо использования сплайсов Безье. Они обеспечивают очень плавную кривую ЧЕРЕЗ набор точек, а не точек сплайна "вокруг".

// Based on code from Erica Sadun

#import "UIBezierPath+Smoothing.h"

void getPointsFromBezier(void *info, const CGPathElement *element);
NSArray *pointsFromBezierPath(UIBezierPath *bpath);


#define VALUE(_INDEX_) [NSValue valueWithCGPoint:points[_INDEX_]]
#define POINT(_INDEX_) [(NSValue *)[points objectAtIndex:_INDEX_] CGPointValue]

@implementation UIBezierPath (Smoothing)

// Get points from Bezier Curve
void getPointsFromBezier(void *info, const CGPathElement *element) 
{
    NSMutableArray *bezierPoints = (__bridge NSMutableArray *)info;    

    // Retrieve the path element type and its points
    CGPathElementType type = element->type;
    CGPoint *points = element->points;

    // Add the points if they're available (per type)
    if (type != kCGPathElementCloseSubpath)
    {
        [bezierPoints addObject:VALUE(0)];
        if ((type != kCGPathElementAddLineToPoint) &&
            (type != kCGPathElementMoveToPoint))
            [bezierPoints addObject:VALUE(1)];
    }    
    if (type == kCGPathElementAddCurveToPoint)
        [bezierPoints addObject:VALUE(2)];
}

NSArray *pointsFromBezierPath(UIBezierPath *bpath)
{
    NSMutableArray *points = [NSMutableArray array];
    CGPathApply(bpath.CGPath, (__bridge void *)points, getPointsFromBezier);
    return points;
}

- (UIBezierPath*)smoothedPathWithGranularity:(NSInteger)granularity;
{
    NSMutableArray *points = [pointsFromBezierPath(self) mutableCopy];

    if (points.count < 4) return [self copy];

    // Add control points to make the math make sense
    [points insertObject:[points objectAtIndex:0] atIndex:0];
    [points addObject:[points lastObject]];

    UIBezierPath *smoothedPath = [self copy];
    [smoothedPath removeAllPoints];

    [smoothedPath moveToPoint:POINT(0)];

    for (NSUInteger index = 1; index < points.count - 2; index++)
    {
        CGPoint p0 = POINT(index - 1);
        CGPoint p1 = POINT(index);
        CGPoint p2 = POINT(index + 1);
        CGPoint p3 = POINT(index + 2);

        // now add n points starting at p1 + dx/dy up until p2 using Catmull-Rom splines
        for (int i = 1; i < granularity; i++)
        {
            float t = (float) i * (1.0f / (float) granularity);
            float tt = t * t;
            float ttt = tt * t;

            CGPoint pi; // intermediate point
            pi.x = 0.5 * (2*p1.x+(p2.x-p0.x)*t + (2*p0.x-5*p1.x+4*p2.x-p3.x)*tt + (3*p1.x-p0.x-3*p2.x+p3.x)*ttt);
            pi.y = 0.5 * (2*p1.y+(p2.y-p0.y)*t + (2*p0.y-5*p1.y+4*p2.y-p3.y)*tt + (3*p1.y-p0.y-3*p2.y+p3.y)*ttt);
            [smoothedPath addLineToPoint:pi];
        }

        // Now add p2
        [smoothedPath addLineToPoint:p2];
    }

    // finish by adding the last point
    [smoothedPath addLineToPoint:POINT(points.count - 1)];

    return smoothedPath;
}


@end

Оригинальная реализация Catmull-Rom основана на некотором кодексе от Эрики Садун в одной из ее книг, я немного изменил ее, чтобы получить полную сглаженную кривую. Это реализовано как категория на UIBezierPath и отлично работает для меня.

Ответ 2

@Rakesh абсолютно прав - вам не нужно использовать алгоритм Catmull-Rom, если вы просто хотите изогнутую линию. И ссылка, которую он предложил, делает именно это. Так что здесь дополнение к его ответу.

Приведенный ниже код НЕ использует алгоритм и гранулярность Catmull-Rom, но рисует изогнутую квадратом линию (контрольные точки рассчитываются для вас). По сути, это то, что сделано в учебнике рисования от руки ios, предложенном Rakesh, но в автономном методе, который вы можете отбросить куда угодно (или в категорию UIBezierPath) и получить изогнутый сплайном из коробки.

Вам нужно иметь массив CGPoint завернутый в NSValue

+ (UIBezierPath *)quadCurvedPathWithPoints:(NSArray *)points
{
    UIBezierPath *path = [UIBezierPath bezierPath];

    NSValue *value = points[0];
    CGPoint p1 = [value CGPointValue];
    [path moveToPoint:p1];

    if (points.count == 2) {
        value = points[1];
        CGPoint p2 = [value CGPointValue];
        [path addLineToPoint:p2];
        return path;
    }

    for (NSUInteger i = 1; i < points.count; i++) {
        value = points[i];
        CGPoint p2 = [value CGPointValue];

        CGPoint midPoint = midPointForPoints(p1, p2);
        [path addQuadCurveToPoint:midPoint controlPoint:controlPointForPoints(midPoint, p1)];
        [path addQuadCurveToPoint:p2 controlPoint:controlPointForPoints(midPoint, p2)];

        p1 = p2;
    }
    return path;
}

static CGPoint midPointForPoints(CGPoint p1, CGPoint p2) {
    return CGPointMake((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
}

static CGPoint controlPointForPoints(CGPoint p1, CGPoint p2) {
    CGPoint controlPoint = midPointForPoints(p1, p2);
    CGFloat diffY = abs(p2.y - controlPoint.y);

    if (p1.y < p2.y)
        controlPoint.y += diffY;
    else if (p1.y > p2.y)
        controlPoint.y -= diffY;

    return controlPoint;
}

Вот результат:

Ответ 3

Ключом к получению двух кривых безье для плавного перехода является то, что соответствующие контрольные точки и начальные/конечные точки на кривых должны быть коллинеарными. Подумайте о контрольной точке и оконечной точке как о формировании линии, касающейся кривой на конечной точке. Если одна кривая начинается в той же точке, где другая заканчивается, и если они оба имеют одну и ту же касательную линию в этой точке, кривая будет гладкой. Вот немного кода для иллюстрации:

- (void)drawRect:(CGRect)rect
{   
#define commonY 117

    CGPoint point1 = CGPointMake(20, 20);
    CGPoint point2 = CGPointMake(100, commonY);
    CGPoint point3 = CGPointMake(200, 50);
    CGPoint controlPoint1 = CGPointMake(50, 60);
    CGPoint controlPoint2 = CGPointMake(20, commonY);
    CGPoint controlPoint3 = CGPointMake(200, commonY);
    CGPoint controlPoint4 = CGPointMake(250, 75);

    UIBezierPath *path1 = [UIBezierPath bezierPath];
    UIBezierPath *path2 = [UIBezierPath bezierPath];

    [path1 setLineWidth:3.0];
    [path1 moveToPoint:point1];
    [path1 addCurveToPoint:point2 controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    [[UIColor blueColor] set];
    [path1 stroke];

    [path2 setLineWidth:3.0];
    [path2 moveToPoint:point2];
    [path2 addCurveToPoint:point3 controlPoint1:controlPoint3 controlPoint2:controlPoint4];
    [[UIColor orangeColor] set];
    [path2 stroke];
}

Обратите внимание, что path1 заканчивается на point2, path2 начинается с point2, а контрольные точки 2 и 3 имеют одно и то же значение Y, commonY, с point2. Вы можете изменить любое из значений в коде по своему усмотрению; пока эти три очка все падают на одну и ту же линию, эти два пути будут идти гладко. (В приведенном выше коде строка y = commonY. Линия не должна быть параллельна оси X, а просто проще видеть, что точки являются коллинеарными таким образом.)

Вот изображение, которое рисует код выше:

Посмотрев на свой код, причина, по которой ваша кривая зазубрена, заключается в том, что вы думаете о контрольных точках как о точках кривой. В кривой безье контрольные точки обычно не находятся на кривой. Поскольку вы берете контрольные точки из кривой, контрольные точки и точка пересечения не являются коллинеарными, и поэтому пути не плавно соединяются.

Ответ 4

Некоторые хорошие ответы здесь, хотя я думаю, что они в любом случае (user1244109 ответ поддерживает только горизонтальные касательные, не полезные для общих кривых), или слишком сложные (извините поклонников Catmull-Rom).

Я реализовал это гораздо проще, используя кривые Безье. Им нужна начальная точка, конечная точка и контрольная точка. Естественно, что нужно использовать точки касания как начальную и конечную точки. Не делай этого! Нет соответствующих контрольных точек для использования. Вместо этого попробуйте эту идею: используйте точки касания в качестве контрольных точек, а средние точки - в качестве начальных/конечных точек. Таким образом, у вас гарантированы надлежащие тангенсы, а код глупый. Здесь алгоритм:

• Точка "касания" - это начало пути и сохранение location в prevPoint.
• Для каждого перетаскиваемого местоположения вычислите midPoint, точку между currentPoint и prevPoint.
  • Если это первое перемещенное местоположение, добавьте currentPoint в качестве сегмента линии.
  • Для всех точек в будущем добавьте квад-кривую, которая заканчивается на midPoint, и используйте prevPoint в качестве контрольной точки. Это создаст сегмент, который аккуратно изгибается от предыдущей точки до текущей точки.
• Сохраните currentPoint в prevPoint и повторите # 2 до тех пор, пока не перетащите концы.
• Добавьте конечную точку в качестве другого прямого сегмента, чтобы закончить путь.

Это приводит к очень хорошему виду, потому что использование средних точек гарантирует, что кривая является гладкой касательной в конечных точках (см. прикрепленную фотографию).

Код Swift выглядит следующим образом:

var bezierPath = UIBezierPath()
var prevPoint: CGPoint?
var isFirst = true

override func touchesBegan(touchesSet: Set<UITouch>, withEvent event: UIEvent?) {
    let location = touchesSet.first!.locationInView(self)
    bezierPath.removeAllPoints()
    bezierPath.moveToPoint(location)
    prevPoint = location
}

override func touchesMoved(touchesSet: Set<UITouch>, withEvent event: UIEvent?) {
    let location = touchesSet.first!.locationInView(self)

    if let prevPoint = prevPoint {
        let midPoint = CGPoint(
            x: (location.x + prevPoint.x) / 2,
            y: (location.y + prevPoint.y) / 2,
        )
        if isFirst {
            bezierPath.addLineToPoint(midPoint)
        else {
            bezierPath.addQuadCurveToPoint(midPoint, controlPoint: prevPoint)
        }
        isFirst = false
    }
    prevPoint = location
}

override func touchesEnded(touchesSet: Set<UITouch>, withEvent event: UIEvent?) {
    let location = touchesSet.first!.locationInView(self)
    bezierPath.addLineToPoint(location)
}

Или, если у вас есть массив точек и вы хотите построить UIBezierPath за один снимок:

var points: [CGPoint] = [...]
var bezierPath = UIBezierPath()
var prevPoint: CGPoint?
var isFirst = true

// obv, there are lots of ways of doing this. let's
// please refrain from yak shaving in the comments
for point in points {
    if let prevPoint = prevPoint {
        let midPoint = CGPoint(
            x: (point.x + prevPoint.x) / 2,
            y: (point.y + prevPoint.y) / 2,
        )
        if isFirst {
            bezierPath.addLineToPoint(midPoint)
        }
        else {
            bezierPath.addQuadCurveToPoint(midPoint, controlPoint: prevPoint)
        }
        isFirst = false
    }
    else { 
        bezierPath.moveToPoint(point)
    }
    prevPoint = point
}
if let prevPoint = prevPoint {
    bezierPath.addLineToPoint(prevPoint)
}

Вот мои заметки:

Ответ 5

Нам нужно что-то заметить перед применением любого алгоритма на захваченных точках.

• Обычно UIKit не дает точек на равном расстоянии.
• Нам нужно вычислить промежуточные точки между двумя CGPoints [которые были захвачены с помощью метода Touch Move]

Теперь, чтобы получить гладкую линию, существует так много способов.

Несколько раз мы можем добиться этого, применяя алгоритмы полинома второй степени или третьей степени или алгоритмы catmullRomSpline

- (float)findDistance:(CGPoint)point lineA:(CGPoint)lineA lineB:(CGPoint)lineB
{
    CGPoint v1 = CGPointMake(lineB.x - lineA.x, lineB.y - lineA.y);
    CGPoint v2 = CGPointMake(point.x - lineA.x, point.y - lineA.y);
    float lenV1 = sqrt(v1.x * v1.x + v1.y * v1.y);
    float lenV2 = sqrt(v2.x * v2.x + v2.y * v2.y);
    float angle = acos((v1.x * v2.x + v1.y * v2.y) / (lenV1 * lenV2));
    return sin(angle) * lenV2;
}

- (NSArray *)douglasPeucker:(NSArray *)points epsilon:(float)epsilon
{
    int count = [points count];
    if(count < 3) {
        return points;
    }

    //Find the point with the maximum distance
    float dmax = 0;
    int index = 0;
    for(int i = 1; i < count - 1; i++) {
        CGPoint point = [[points objectAtIndex:i] CGPointValue];
        CGPoint lineA = [[points objectAtIndex:0] CGPointValue];
        CGPoint lineB = [[points objectAtIndex:count - 1] CGPointValue];
        float d = [self findDistance:point lineA:lineA lineB:lineB];
        if(d > dmax) {
            index = i;
            dmax = d;
        }
    }

    //If max distance is greater than epsilon, recursively simplify
    NSArray *resultList;
    if(dmax > epsilon) {
        NSArray *recResults1 = [self douglasPeucker:[points subarrayWithRange:NSMakeRange(0, index + 1)] epsilon:epsilon];

        NSArray *recResults2 = [self douglasPeucker:[points subarrayWithRange:NSMakeRange(index, count - index)] epsilon:epsilon];

        NSMutableArray *tmpList = [NSMutableArray arrayWithArray:recResults1];
        [tmpList removeLastObject];
        [tmpList addObjectsFromArray:recResults2];
        resultList = tmpList;
    } else {
        resultList = [NSArray arrayWithObjects:[points objectAtIndex:0], [points objectAtIndex:count - 1],nil];
    }

    return resultList;
}

- (NSArray *)catmullRomSplineAlgorithmOnPoints:(NSArray *)points segments:(int)segments
{
    int count = [points count];
    if(count < 4) {
        return points;
    }

    float b[segments][4];
    {
        // precompute interpolation parameters
        float t = 0.0f;
        float dt = 1.0f/(float)segments;
        for (int i = 0; i < segments; i++, t+=dt) {
            float tt = t*t;
            float ttt = tt * t;
            b[i][0] = 0.5f * (-ttt + 2.0f*tt - t);
            b[i][1] = 0.5f * (3.0f*ttt -5.0f*tt +2.0f);
            b[i][2] = 0.5f * (-3.0f*ttt + 4.0f*tt + t);
            b[i][3] = 0.5f * (ttt - tt);
        }
    }

    NSMutableArray *resultArray = [NSMutableArray array];

    {
        int i = 0; // first control point
        [resultArray addObject:[points objectAtIndex:0]];
        for (int j = 1; j < segments; j++) {
            CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
            CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
            CGPoint pointIp2 = [[points objectAtIndex:(i + 2)] CGPointValue];
            float px = (b[j][0]+b[j][1])*pointI.x + b[j][2]*pointIp1.x + b[j][3]*pointIp2.x;
            float py = (b[j][0]+b[j][1])*pointI.y + b[j][2]*pointIp1.y + b[j][3]*pointIp2.y;
            [resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
        }
    }

    for (int i = 1; i < count-2; i++) {
        // the first interpolated point is always the original control point
        [resultArray addObject:[points objectAtIndex:i]];
        for (int j = 1; j < segments; j++) {
            CGPoint pointIm1 = [[points objectAtIndex:(i - 1)] CGPointValue];
            CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
            CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
            CGPoint pointIp2 = [[points objectAtIndex:(i + 2)] CGPointValue];
            float px = b[j][0]*pointIm1.x + b[j][1]*pointI.x + b[j][2]*pointIp1.x + b[j][3]*pointIp2.x;
            float py = b[j][0]*pointIm1.y + b[j][1]*pointI.y + b[j][2]*pointIp1.y + b[j][3]*pointIp2.y;
            [resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
        }
    }

    {
        int i = count-2; // second to last control point
        [resultArray addObject:[points objectAtIndex:i]];
        for (int j = 1; j < segments; j++) {
            CGPoint pointIm1 = [[points objectAtIndex:(i - 1)] CGPointValue];
            CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
            CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
            float px = b[j][0]*pointIm1.x + b[j][1]*pointI.x + (b[j][2]+b[j][3])*pointIp1.x;
            float py = b[j][0]*pointIm1.y + b[j][1]*pointI.y + (b[j][2]+b[j][3])*pointIp1.y;
            [resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
        }
    }
    // the very last interpolated point is the last control point
    [resultArray addObject:[points objectAtIndex:(count - 1)]]; 

    return resultArray;
}

Ответ 6

Для этого нам нужно использовать этот метод. BezierSpline код находится в С# для генерации массивов контрольных точек для сплайна безье. Я преобразовал этот код в Objective C, и он отлично работает для меня.

Чтобы преобразовать код из С# в Objective C. понять код С# по строкам, даже если вы не знаете С#, u должен знать С++/Java?

При преобразовании:

• Замените структуру точек, используемую здесь, с помощью CGPoint.

• Замените массив точек с помощью NSMutableArray и сохраните NSvalues, вставляя в него CGPoints.

• Замените все двойные массивы на NSMutableArrays и сохраните в нем NSNumber.

• использовать objectAtIndex: метод в случае индекса для доступа к элементам массива.

• use replaceObjectAtIndex: withObject: для хранения объектов по определенному индексу.

  Помните, что NSMutableArray является связанным списком и что С# использует динамические массивы, так что у них уже есть существующие индексы. В вашем случае в NSMutableArray, если он пуст, вы не можете хранить объекты случайными индексами, как это делает код С#. они порой в этом коде С# заполняют индекс 1 перед индексом 0, и они могут делать это, поскольку существует индекс 1. в NSMutabelArrays здесь индекс 1 должен быть там, если вы хотите называть replaceObject на нем. поэтому перед сохранением чего-либо создайте метод, который добавит n объектов NSNull в NSMutableArray.

ТАКЖЕ:

Ну, эта логика имеет статический метод, который примет массив точек и даст вам два массива: -

• массив первых контрольных точек.

• массив вторых контрольных точек.

Эти массивы будут удерживать первую и вторую контрольную точку для каждой кривой между двумя точками, которые вы передаете в первом массиве.

В моем случае у меня уже были все точки, и я мог рисовать их сквозь них.

В вашем случае во время рисования вам нужно будет каким-то образом указать набор точек, через которые вы хотите пройти плавную кривую.

и обновите, вызвав setNeedsDisplay и нарисуйте сплайн, который является не чем иным, как UIBezierPath между двумя соседними точками в первом массиве. и взятие контрольных точек из обоих массивов контрольных точек индексируется.

Проблема в вашем случае состоит в том, что ее трудно понять, перемещая все критические точки.

Что вы можете сделать, так это: Просто перемещая палец, продолжайте рисовать прямые линии между предыдущей и текущей точкой. Линии будут настолько малы, что не будет видно невооруженным глазом, что они маленькие маленькие прямые, если вы не увеличите масштаб.

UPDATE

Любой, кто заинтересован в реализации Objective C указанной выше ссылки, может ссылаться на

this GitHub repo.

Я когда-то писал об этом, и он не поддерживает ARC, но вы можете легко отредактировать его и удалить несколько выпусков и автоответчиков и заставить его работать с ARC.

Это просто генерирует два массива контрольных точек для набора точек, которые нужно присоединить, используя сплайн безье.

Ответ 7

Не нужно писать большую часть кода.

Просто обратитесь к учебному пособию по рисованию ios; он действительно сглаживает чертеж, также существует механизм кэширования, чтобы производительность не снижалась, даже когда вы продолжаете рисовать непрерывно.

Ответ 8

Я нашел довольно хороший учебник, в котором описывается небольшая модификация кривой кривой Безье, которая имеет тенденцию сглаживать края довольно красиво. Это, по сути, то, что Caleb имеет в виду выше, о том, чтобы положить соединительные конечные точки в ту же линию, что и контрольные точки. Это один из лучших уроков (на что угодно), которые я читал в то время. И он поставляется с полностью работающим проектом Xcode.

Ответ 9

Я пробовал все вышеперечисленное, но не могу заставить его работать. Один из ответов дает мне результат. При поиске больше я нашел это: https://github.com/sam-keene/uiBezierPath-hermite-curve. Я не писал этот код, но я его реализовал, и он работает очень хорошо. Просто скопируйте UIBezierPath + Interpolation.m/h и CGPointExtension.m/h. Затем вы используете его следующим образом:

UIBezierPath *path = [UIBezierPath interpolateCGPointsWithHermite:arrayPoints closed:YES];

Это действительно надежное и опрятное решение в целом.

Ответ 10

Swift:

        let point1 = CGPoint(x: 50, y: 100)

        let point2 = CGPoint(x: 50 + 1 * CGFloat(60) * UIScreen.main.bounds.width / 375, y: 200)

        let point3 = CGPoint(x: 50 + 2 * CGFloat(60) * UIScreen.main.bounds.width / 375, y: 250)

        let point4 = CGPoint(x: 50 + 3 * CGFloat(60) * UIScreen.main.bounds.width / 375, y: 50)

        let point5 = CGPoint(x: 50 + 4 * CGFloat(60) * UIScreen.main.bounds.width / 375, y: 100)


        let points = [point1, point2, point3, point4, point5]

        let bezier = UIBezierPath()


        let count = points.count

        var prevDx = CGFloat(0)
        var prevDy = CGFloat(0)

        var prevX = CGFloat(0)
        var prevY = CGFloat(0)

        let div = CGFloat(7)


        for i in 0..<count {
            let x = points[i].x
            let y = points[i].y

            var dx = CGFloat(0)
            var dy = CGFloat(0)

            if (i == 0) {
                bezier.move(to: points[0])
                let nextX = points[i + 1].x
                let nextY = points[i + 1].y

                prevDx = (nextX - x) / div
                prevDy = (nextY - y) / div
                prevX = x
                prevY = y
            } else if (i == count - 1) {
                dx = (x - prevX) / div
                dy = (y - prevY) / div
            } else {

                let nextX = points[i + 1].x
                let nextY = points[i + 1].y
                dx = (nextX - prevX) / div;
                dy = (nextY - prevY) / div;
            }

            bezier.addCurve(to: CGPoint(x: x, y: y), controlPoint1: CGPoint(x: prevX + prevDx, y: prevY + prevDy), controlPoint2: CGPoint(x: x - dx, y: y - dy))

            prevDx = dx;
            prevDy = dy;
            prevX = x;
            prevY = y;
        }

Ответ 11

Вот код в Swift 4/5

func quadCurvedPathWithPoint(points: [CGPoint] ) -> UIBezierPath {
    let path = UIBezierPath()
    if points.count > 1 {
        var prevPoint:CGPoint?
        for (index, point) in points.enumerated() {
            if index == 0 {
                path.move(to: point)
            } else {
                if index == 1 {
                    path.addLine(to: point)
                }
                if prevPoint != nil {
                    let midPoint = self.midPointForPoints(from: prevPoint!, to: point)
                    path.addQuadCurve(to: midPoint, controlPoint: controlPointForPoints(from: midPoint, to: prevPoint!))
                    path.addQuadCurve(to: point, controlPoint: controlPointForPoints(from: midPoint, to: point))
                }
            }
            prevPoint = point
        }
    }
    return path
}

func midPointForPoints(from p1:CGPoint, to p2: CGPoint) -> CGPoint {
    return CGPoint(x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2)
}

func controlPointForPoints(from p1:CGPoint,to p2:CGPoint) -> CGPoint {
    var controlPoint = midPointForPoints(from:p1, to: p2)
    let  diffY = abs(p2.y - controlPoint.y)
    if p1.y < p2.y {
        controlPoint.y = controlPoint.y + diffY
    } else if ( p1.y > p2.y ) {
        controlPoint.y = controlPoint.y - diffY
    }
    return controlPoint
}