在点之间画线（多个） [英] Draw lines between points(multiple)

问题描述

在帮助下我可以使用协调绘制圆圈：

with the help i am able to draw circle with the coordinated using:

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 5.0);
    CGContextSetStrokeColorWithColor(context,[UIColor grayColor].CGColor);
    /**** Get values from reponse and fill it in this array.   ******/
    NSArray *objectCoords = [NSArray arrayWithObjects: @"{{20,80},{5,5}}", @"{{120,60},{5,5}}", @"{{60,84},{5,5}}", @"{{80,88},{5,5}}", @"{{100,93},{5,5}}", @"{{20,20},{5,5}}", @"{{160,70},{5,5}}", @"{{128,68},{5,5}}", @"{{90,60},{5,5}}", @"{{110,80},{5,5}}", nil];
    for (NSString* objectCoord in objectCoords) {
        CGRect coord = CGRectFromString(objectCoord);
        // Draw using your coord
        CGContextAddEllipseInRect(context, coord);
    }

现在我想要实现的是点之间的画线（圆圈） ，如附图所示。我知道我们可以在2个点之间绘制一条线，但在这种情况下，需要在一个到多个点/圆之间绘制线。请建议我实现这个结果。

Now what i am trying to achieve is draw lines between the points(circle),as shown in the attached image.I know we can draw a line between 2 points, but here in this case, the lines needs to be drawn between one to multiple point/circle .Please suggest me to achieve this result.

推荐答案

你可以画多行。首先，提出一个模型来表示您想要绘制线条的点。例如，你可以有一个行数组，其中每一行本身定义为一个索引为两点的数组，即起点和终点。

You can just draw multiple lines. First, come up with a model to represent between which points you want to draw lines. For example, you could have an array of lines, where each line is defined, itself, as an array with the indices of two points, the starting point and the ending point.

例如，如果你想从第1点到第3点，第4点和第5点，从第3点到第4点和第5点，以及在第4点和第5点之间绘制线条，你可以这样做：

For example, if you want to draw lines from point 1 to 3, 4, and 5, and from point 3 to 4 and 5, and between 4 and 5, you could do something like:

CGContextSetLineWidth(context, 1.0);

NSArray *lines = @[@[@(1), @(3)],
                   @[@(1), @(4)],
                   @[@(1), @(5)],
                   @[@(3), @(4)],
                   @[@(3), @(5)],
                   @[@(4), @(5)]];

for (NSArray *points in lines) {
    NSInteger startIndex = [points[0] integerValue];
    NSInteger endIndex   = [points[1] integerValue];

    CGRect startRect = CGRectFromString(objectCoords[startIndex]);
    CGRect endRect   = CGRectFromString(objectCoords[endIndex]);

    CGContextMoveToPoint(context, CGRectGetMidX(startRect), CGRectGetMidY(startRect));
    CGContextAddLineToPoint(context, CGRectGetMidX(endRect), CGRectGetMidY(endRect));
}

CGContextDrawPath(context, kCGPathStroke);

有很多不同的方法可以做到这一点，但只想出一些代表你的地方的模型想绘制线条，然后遍历该模型以绘制所有单独的线条。

There are tons of different ways of doing it, but just come up with some model that represents where you want to draw the lines, and then iterate through that model to draw all of the individual lines.

如果你想要每个点都画线到最近的三个点（这不是你的图片所做的，但它是你在后续评论中要求的），你可以：

If you wanted to have every point draw lines to the three closest points (which is not what your picture does, but it's what you asked for in a subsequent comment), you can:

• 在 objectCoords 数组中构建索引数组 indices ;和

• build array of indices, indices in your objectCoords array; and

现在遍历 objectCoords 中的每个点：

• 构建新的索引数组， sortedIndices ，按索引所代表的点距离的索引排序 objectCoords 中的当前对象;和

• build new array of indices, sortedIndices, sorted by the distance that the point represented by that index is from the current object in objectCoords; and

画出最近的三条线。

因此：

// build array of indices (0, 1, 2, ...)

NSMutableArray *indices = [NSMutableArray array];
[objectCoords enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
    [indices addObject:@(idx)];
}];

// now go through all of the points in objectCoords

[objectCoords enumerateObjectsUsingBlock:^(NSString *obj, NSUInteger idx, BOOL *stop) {

    // build new array of indices sorted by distance from the current point

    NSArray *sortedIndices = [indices sortedArrayUsingComparator:^NSComparisonResult(id obj1, id obj2) {
        CGFloat distance1 = [self distanceFromPointAtIndex:idx
                                            toPointAtIndex:[obj1 integerValue]
                                         usingObjectCoords:objectCoords];

        CGFloat distance2 = [self distanceFromPointAtIndex:idx
                                            toPointAtIndex:[obj2 integerValue]
                                         usingObjectCoords:objectCoords];

        if (distance1 < distance2)
            return NSOrderedAscending;
        else if (distance1 > distance2)
            return NSOrderedDescending;
        return NSOrderedSame;
    }];

    // now draw lines to the three closest indices
    // (skipping 0, because that's probably the current point)

    for (NSInteger i = 1; i < 4 && i < [sortedIndices count]; i++) {

        NSInteger index = [sortedIndices[i] integerValue];

        CGRect startRect = CGRectFromString(objectCoords[idx]);
        CGRect endRect   = CGRectFromString(objectCoords[index]);

        CGContextMoveToPoint(context,    CGRectGetMidX(startRect), CGRectGetMidY(startRect));
        CGContextAddLineToPoint(context, CGRectGetMidX(endRect),   CGRectGetMidY(endRect));
    }
}];

CGContextSetLineWidth(context, 1);
CGContextDrawPath(context, kCGPathStroke);

这使用以下方法计算两点之间的距离：

And this uses the following method to calculate the distance between two points:

- (CGFloat)distanceFromPointAtIndex:(NSInteger)index1 toPointAtIndex:(NSInteger)index2 usingObjectCoords:(NSArray *)objectCoords
{
    CGRect rect1 = CGRectFromString(objectCoords[index1]);
    CGRect rect2 = CGRectFromString(objectCoords[index2]);

    return hypotf(CGRectGetMidX(rect1) - CGRectGetMidX(rect2), CGRectGetMidY(rect1) - CGRectGetMidY(rect2));
}

使用 objectCoords 在你的原始例子中，产生：

Using the objectCoords in your original example, that yields:

这篇关于在点之间画线（多个）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！