在没有MKMapView的情况下生成MKPolyline的小缩略图？

Question

我们的应用程序包含多个MKPolyline边界，这些边界均创建一个闭合的多边形。这些主要是在MKMapView上显示为MKOverlay，但我正在寻找一种解决方案，以将这些多边形显示为小缩略图以使其在MKMapView上不可见，而在标准UIImage或UIImageView上可见。

请注意，我希望这些小缩略图仅显示为具有笔触颜色和填充颜色但没有任何地图背景的小形状。

有人可以帮我吗？

Answer 1

您在这里。

+ (UIImage *)imageNamed:(NSString *)name withColor:(UIColor *)color{
    // load the image
    UIImage *img = [UIImage imageNamed:name];

    // begin a new image context, to draw our colored image onto
    UIGraphicsBeginImageContext(img.size);

    // get a reference to that context we created
    CGContextRef context = UIGraphicsGetCurrentContext();

    // set the fill color
    [color setFill];

    // translate/flip the graphics context (for transforming from CG* coords to UI* coords
    CGContextTranslateCTM(context, 0, img.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    // set the blend mode to color burn, and the original image
    CGContextSetBlendMode(context, kCGBlendModeColorBurn);
    CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
    CGContextDrawImage(context, rect, img.CGImage);

    // set a mask that matches the shape of the image, then draw (color burn) a colored rectangle
    CGContextClipToMask(context, rect, img.CGImage);
    CGContextAddRect(context, rect);
    CGContextDrawPath(context,kCGPathFill);

    // generate a new UIImage from the graphics context we drew onto
    UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    //return the color-burned image
    return coloredImg;
}

请检查此original帖子以获取详细描述。

Answer 2

我必须在自己的应用中执行完全相同的操作。这是我的解决方案：我生成一个UIView来表示路径的形状。在您的情况下，路径为MKPolyline。

这是我的代码：

+ (UIView *)createShapeForGPX:(GPX *)gpx
                withFrameSize:(CGSize)frameSize
                    lineColor:(UIColor *)lineColor {

    // Array of coordinates (Adapt this code with your coordinates)
    NSMutableArray<NSValue *> *dataPoints = [NSMutableArray new];
    for (NSArray *path in gpx.paths) {
        for (NSDictionary *point in path) {
            double latitude = [point[@"latitude"] doubleValue];
            double longitude = [point[@"longitude"] doubleValue];
            [dataPoints addObject:[NSValue valueWithCGPoint:CGPointMake(longitude, latitude)]];
        }
    }

    // Graph bounds (You need to calculate topRightCoordinate and bottomleftCoordinate. You can do it in previous for loop)
    double lngBorder = gpx.topRightCoordinate.longitude - gpx.bottomLeftCoordinate.longitude;
    double latBorder = gpx.topRightCoordinate.latitude - gpx.bottomLeftCoordinate.latitude;

    double middleLng = gpx.bottomLeftCoordinate.longitude + (lngBorder / 2.f);
    double middleLat = gpx.bottomLeftCoordinate.latitude + (latBorder / 2.f);

    double boundLength = MAX(lngBorder, latBorder);

    // *** Drawing ***
    CGFloat margin = 4.f;
    UIView *graph = [UIView new];
    graph.frame = CGRectMake(0, 0, frameSize.width - margin, frameSize.height - margin);

    CAShapeLayer *line = [CAShapeLayer layer];
    UIBezierPath *linePath = [UIBezierPath bezierPath];

    float xAxisMin = middleLng - (boundLength / 2.f);
    float xAxisMax = middleLng + (boundLength / 2.f);
    float yAxisMin = middleLat - (boundLength / 2.f);
    float yAxisMax = middleLat + (boundLength / 2.f);

    int i = 0;
    while (i < dataPoints.count) {

        CGPoint point = [dataPoints[i] CGPointValue];

        float xRatio = 1.0-((xAxisMax-point.x)/(xAxisMax-xAxisMin));
        float yRatio = 1.0-((yAxisMax-point.y)/(yAxisMax-yAxisMin));

        float x = xRatio*(frameSize.width - margin / 2);
        float y = (1.0-yRatio)*(frameSize.height - margin);

        if (i == 0) {
            [linePath moveToPoint:CGPointMake(x, y)];
        } else {
            [linePath addLineToPoint:CGPointMake(x, y)];
        }
        i++;
    }

    // Line
    line.lineWidth = 0.8;
    line.path = linePath.CGPath;
    line.fillColor = [[UIColor clearColor] CGColor];
    line.strokeColor = [lineColor CGColor];
    [graph.layer addSublayer:line];

    graph.backgroundColor = [UIColor clearColor];

    // Final view (add margins)
    UIView *finalView = [UIView new];
    finalView.backgroundColor = [UIColor clearColor];
    finalView.frame = CGRectMake(0, 0, frameSize.width, frameSize.height);
    graph.center = CGPointMake(CGRectGetMidX(finalView.bounds), CGRectGetMidY(finalView.bounds));
    [finalView addSubview:graph];

    return finalView;
}

就我而言，GPX类包含几个值：-NSArray<NSArray<NSDictionary *> *> *paths;：包含所有路径的所有点。就您而言，我认为是您的MKPolyline。-topRightCoordinate和bottomLeftCoordinate：两个CLLocationCoordinate2D分别代表我的路径的右上和左下虚拟坐标（您也必须计算它们）。

您这样调用此方法：UIView *shape = [YOURCLASS createShapeForGPX:gpx withFrameSize:CGSizeMake(32, 32) lineColor:[UIColor blackColor]];

此解决方案基于此问题how to draw a line graph in ios? Any control which will help me show graph data in ios，该问题提供了从点绘制图形的解决方案。

也许所有这些代码对您都不有用（例如边距），但是它应该可以帮助您找到自己的解决方案。

这是它在我的应用程序中的显示方式（在UITableView中：：