Добавить перевернутый круг в вид карты

(используя iOS 5 и Xcode 4.2.)

я следовал инструкциям здесь: http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/LocationAwarenessPG/AnnotatingMaps/AnnotatingMaps.html#//apple_ref/doc/uid/TP40009497-CH6-SW15 и использовал MKCircle и MKCircleView классы, чтобы добавить наложение круга на my MKMapView.

однако то, что я на самом деле хочу, это перевернутое наложение круга, как на левой карте в эскизе ниже (в настоящее время у меня есть наложение круга, как у правого):

Inverted and not-inverted circle overlay sketches

для перевернутого круга наложение должно охватывать всю карту-кроме видимого круга.

есть ли простой способ выполнить это с помощью классов MKCircle/MKCircleView? Или мне нужно будет пойти глубже и определить пользовательский объект/вид наложения?

Спасибо за помощь :)

4 ответов


лучший способ сделать это, было бы подкласс MKMapView и переопределить drawRect вызов метода super, затем закрасьте карту нужным цветом. Затем каждый раз, когда пользователь перемещается, drawRect должен ответить, рисуя соответствующим образом.


у меня была такая же задача, и вот как я ее решаю:

Примечание: этот код будет работать только начиная с iOS7

добавить наложение на карту, где-то в контроллере вида:

MyMapOverlay *overlay = [[MyMapOverlay alloc] initWithCoordinate:coordinate];
[self.mapView addOverlay:overlay level:MKOverlayLevelAboveLabels];

в методах MKMapViewDelegate напишите следующее:

- (MKOverlayRenderer *)mapView:(MKMapView *)map rendererForOverlay:(id<MKOverlay>)overlay {
    /// we need to draw overlay on the map in a way when everything except the area in radius of 500 should be grayed
    /// to do that there is special renderer implemented - NearbyMapOverlay
    if ([overlay isKindOfClass:[NearbyMapOverlay class]]) {
        MyMapOverlayRenderer *renderer = [[MyMapOverlayRenderer alloc] initWithOverlay:overlay];
        renderer.fillColor = [UIColor whateverColor];/// specify color which you want to use for gray out everything out of radius
        renderer.diameterInMeters = 1000;/// choose whatever diameter you need

        return renderer;
    }
    return nil;
}

сам MyMapOverlay должен быть чем-то вроде следующего:

@interface MyMapOverlay : NSObject<MKOverlay>
- (instancetype)initWithCoordinate:(CLLocationCoordinate2D)coordinate;
@end

@implementation MyMapOverlay

@synthesize coordinate = _coordinate;

- (instancetype)initWithCoordinate:(CLLocationCoordinate2D)coordinate {
    self = [super init];
    if (self) {
        _coordinate = coordinate;
    }
    return self;
}

- (MKMapRect)boundingMapRect {
    return MKMapRectWorld;
}

@end

и MyMapOverlayRenderer:

@interface MyMapOverlayRenderer : MKOverlayRenderer
@property (nonatomic, assign) double diameterInMeters;
@property (nonatomic, copy) UIColor *fillColor;
@end

@implementation MyMapOverlayRenderer

/// this method is called as a part of rendering the map, and it draws the overlay polygon by polygon
/// which means that it renders overlay by square pieces
- (void)drawMapRect:(MKMapRect)mapRect
      zoomScale:(MKZoomScale)zoomScale
      inContext:(CGContextRef)context {

    /// main path - whole area
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(mapRect.origin.x, mapRect.origin.y, mapRect.size.width, mapRect.size.height)];

    /// converting to the 'world' coordinates
    double radiusInMapPoints = self.diameterInMeters * MKMapPointsPerMeterAtLatitude(self.overlay.coordinate.latitude);
    MKMapSize radiusSquared = {radiusInMapPoints, radiusInMapPoints};
    MKMapPoint regionOrigin = MKMapPointForCoordinate(self.overlay.coordinate);
    MKMapRect regionRect = (MKMapRect){regionOrigin, radiusSquared}; //origin is the top-left corner
    regionRect = MKMapRectOffset(regionRect, -radiusInMapPoints/2, -radiusInMapPoints/2);
    // clamp the rect to be within the world
    regionRect = MKMapRectIntersection(regionRect, MKMapRectWorld);

    /// next path is used for excluding the area within the specific radius from current user location, so it will not be filled by overlay fill color
    UIBezierPath *excludePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(regionRect.origin.x, regionRect.origin.y, regionRect.size.width, regionRect.size.height) cornerRadius:regionRect.size.width / 2];
    [path appendPath:excludePath];

    /// setting overlay fill color
    CGContextSetFillColorWithColor(context, self.fillColor.CGColor);
    /// adding main path. NOTE that exclusionPath was appended to main path, so we should only add 'path'
    CGContextAddPath(context, path.CGPath);
    /// tells the context to fill the path but with regards to even odd rule
    CGContextEOFillPath(context);
}

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


здесь версия Swift. Спасибо, Валерий.

https://github.com/dariopellegrini/MKInvertedCircle


Я пытался использовать эту версию swift, и это не сработало, поэтому я публикую свою реализацию (протестировано на iOS 12)

import Foundation
import UIKit
import MapKit

class MKInvertedCircleOverlayRenderer: MKOverlayRenderer {

var fillColor: UIColor = UIColor.red
var strokeColor: UIColor = UIColor.blue
var lineWidth: CGFloat = 3
var circle: MKCircle

init(circle: MKCircle) {
    self.circle = circle
    super.init(overlay: circle)
}

override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
    let path = UIBezierPath(rect: rect(for: MKMapRectWorld))

    let excludePath: UIBezierPath = UIBezierPath(roundedRect: CGRect(x: circle.coordinate.latitude,
                                                                     y: circle.coordinate.longitude,
                                                                     width: circle.boundingMapRect.size.width,
                                                                     height: circle.boundingMapRect.size.height),
                                                 cornerRadius: CGFloat(circle.boundingMapRect.size.width))

    context.setFillColor(fillColor.cgColor)

    path.append(excludePath)
    context.addPath(path.cgPath)
    context.fillPath(using: .evenOdd)

    context.addPath(excludePath.cgPath)
    context.setLineWidth(9 / zoomScale)
    context.setStrokeColor(strokeColor.cgColor)
    context.strokePath()

    //line showing circle radius
    let lineBeginPoint = CGPoint(x: excludePath.bounds.midX, y: excludePath.bounds.midY)
    let lineEndPoint = CGPoint(x: excludePath.bounds.maxX, y: excludePath.bounds.midY)
    let linePath: UIBezierPath = UIBezierPath()
    linePath.move(to: lineBeginPoint)
    linePath.addLine(to: lineEndPoint)

    context.addPath(linePath.cgPath)
    context.setLineWidth(6/zoomScale)
    context.setStrokeColor(UIColor.black.cgColor)
    context.setLineDash(phase: 1, lengths: [20 / zoomScale, 10 / zoomScale])
    context.strokePath()

    // circle at the end of the line above
    let circleSize: CGFloat = 30/zoomScale
    let circleRect = CGRect(origin: CGPoint(x: lineEndPoint.x - (circleSize/2), y: lineEndPoint.y - (circleSize/2)),
                            size: CGSize(width: circleSize, height: circleSize))

    let circlePath: UIBezierPath =
        UIBezierPath(roundedRect: circleRect, cornerRadius: circleSize)

    context.addPath(circlePath.cgPath)
    context.setFillColor(UIColor.black.cgColor)
    context.fillPath()
}