Drawing selection box (rubberbanding, marching ants) in Cocoa, ObjectiveC

Question

I've currently implemented a simple selection box using mouse events and redrawing a rectangle on mouse drag. Here's my code:

-(void)drawRect:(NSRect)dirtyRect
{
if (!NSEqualRects(self.draggingBox, NSZeroRect))
{
    [[NSColor grayColor] setStroke];
    [[NSBezierPath bezierPathWithRect:self.draggingBox] stroke];
}
}

#pragma mark Mouse Events

- (void)mouseDown:(NSEvent *)theEvent
{
    NSPoint pointInView = [self convertPoint:[theEvent locationInWindow] fromView:nil];
    self.draggingBox = NSMakeRect(pointInView.x, pointInView.y, 0, 0);
    [self setNeedsDisplay:YES];
}

- (void)mouseDragged:(NSEvent *)theEvent
{
    NSPoint pointInView = [self convertPoint:[theEvent locationInWindow] fromView:nil];
    _draggingBox.size.width = pointInView.x - (self.draggingBox.origin.x);
    _draggingBox.size.height = pointInView.y - (self.draggingBox.origin.y);
    [self setNeedsDisplay:YES];
}

- (void)mouseUp:(NSEvent *)theEvent
{
    self.draggingBox = NSZeroRect;
    [self setNeedsDisplay:YES];
}

Ref: http://cocoadev.com/HowToCreateWalkingAnts

Questions:

Is this the most efficient way to do this? If the view was complex, would it be more efficient to draw a transparent view over the main view instead of continuously redrawing the view for the duration of the mouse drag (http://www.cocoabuilder.com/archive/cocoa/99877-drawing-selection-rectangle.html)? How is this done? I can't seem to find any examples.

Rob · Accepted Answer · 2013-12-03T22:23:19.970

You can use QuartzCore to animate the "marching ants" for you, if you want. This gets you completely out of the world of manually drawing the rubber-banded selection box, too. You just define the path that defines that box, and let Core Animation take care of drawing the box, as well as animating it.

In the XIB's "View Effects" Inspector, turn on "Core Animation", and then you can do something like:

#import <QuartzCore/QuartzCore.h>
#import "CustomView.h"

@interface CustomView ()

@property (nonatomic) NSPoint startPoint;
@property (nonatomic, strong) CAShapeLayer *shapeLayer;

@end

@implementation CustomView

#pragma mark Mouse Events

- (void)mouseDown:(NSEvent *)theEvent
{
    self.startPoint = [self convertPoint:[theEvent locationInWindow] fromView:nil];

    // create and configure shape layer

    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.lineWidth = 1.0;
    self.shapeLayer.strokeColor = [[NSColor blackColor] CGColor];
    self.shapeLayer.fillColor = [[NSColor clearColor] CGColor];
    self.shapeLayer.lineDashPattern = @[@10, @5];
    [self.layer addSublayer:self.shapeLayer];

    // create animation for the layer

    CABasicAnimation *dashAnimation;
    dashAnimation = [CABasicAnimation animationWithKeyPath:@"lineDashPhase"];
    [dashAnimation setFromValue:@0.0f];
    [dashAnimation setToValue:@15.0f];
    [dashAnimation setDuration:0.75f];
    [dashAnimation setRepeatCount:HUGE_VALF];
    [self.shapeLayer addAnimation:dashAnimation forKey:@"linePhase"];
}

- (void)mouseDragged:(NSEvent *)theEvent
{
    NSPoint point = [self convertPoint:[theEvent locationInWindow] fromView:nil];

    // create path for the shape layer

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, self.startPoint.x, self.startPoint.y);
    CGPathAddLineToPoint(path, NULL, self.startPoint.x, point.y);
    CGPathAddLineToPoint(path, NULL, point.x, point.y);
    CGPathAddLineToPoint(path, NULL, point.x, self.startPoint.y);
    CGPathCloseSubpath(path);

    // set the shape layer's path

    self.shapeLayer.path = path;

    CGPathRelease(path);
}

- (void)mouseUp:(NSEvent *)theEvent
{
    [self.shapeLayer removeFromSuperlayer];
    self.shapeLayer = nil;
}

@end

This way, Core Animation takes care of the marching ants for you.

marching ants demo

That's great. To clarify though, does this create an animated layer above the view (i.e. doesn't use `drawRect:` because that layer is preserved)? — John Smith, Dec 04 '13 at 01:02
@JohnSmith Correct, no `drawRect` needed (for the marching ants selection box, at least). If you're doing something else in `drawRect`, feel free to have one. But you don't need it for the selection box. — Rob, Dec 04 '13 at 01:09
Great answer! Just wondering if we're still doing the ant march in this century.. seems quite a bit 1980/1990s style :-) — Jay, Jan 06 '14 at 07:54
If you really want a one-point-thick line, you need to round each coordinate to the nearest point and a half. — JWWalker, Jun 20 '17 at 23:03

score 9 · Answer 2 · answered Mar 10 '17 at 15:51

swift 3 version:

import Cocoa
import QuartzCore

class myView: NSView {

    //MARK:Properties
    var startPoint : NSPoint!
    var shapeLayer : CAShapeLayer!

    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)

        // Drawing code here.
    }


    override func mouseDown(with event: NSEvent) {

        self.startPoint = self.convert(event.locationInWindow, from: nil)

        shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = 1.0
        shapeLayer.fillColor = NSColor.clear.cgColor
        shapeLayer.strokeColor = NSColor.black.cgColor
        shapeLayer.lineDashPattern = [10,5]
        self.layer?.addSublayer(shapeLayer)

        var dashAnimation = CABasicAnimation()
        dashAnimation = CABasicAnimation(keyPath: "lineDashPhase")
        dashAnimation.duration = 0.75
        dashAnimation.fromValue = 0.0
        dashAnimation.toValue = 15.0
        dashAnimation.repeatCount = .infinity
        shapeLayer.add(dashAnimation, forKey: "linePhase")




    }

    override func mouseDragged(with event: NSEvent) {

        let point : NSPoint = self.convert(event.locationInWindow, from: nil)
        let path = CGMutablePath()
        path.move(to: self.startPoint)
        path.addLine(to: NSPoint(x: self.startPoint.x, y: point.y))
        path.addLine(to: point)
        path.addLine(to: NSPoint(x:point.x,y:self.startPoint.y))
        path.closeSubpath()
        self.shapeLayer.path = path
    }

    override func mouseUp(with event: NSEvent) {
        self.shapeLayer.removeFromSuperlayer()
        self.shapeLayer = nil
    }


}

score 5 · Answer 3 · answered Feb 18 '15 at 13:10

This post is a little older but I still found no good solution (Framework) on the web. But I guess this is a task (content selection) everyone have to master someday and there is no API from Apple for it. However I made my own framework it and put on Github: https://github.com/ckteebe/MultiSelectionSuiteFramework.

score 5 · Answer 4 · answered Apr 26 '16 at 14:41

If anybody needs a Swift 2.0 version, here it is:

import Cocoa
import QuartzCore


class myView: NSView {

var startPoint : NSPoint!
var shapeLayer : CAShapeLayer!



override func drawRect(dirtyRect: NSRect) {
    super.drawRect(dirtyRect)

    // Drawing code here.
}


override func mouseDown(theEvent: NSEvent) {

    self.startPoint = self.convertPoint(theEvent.locationInWindow, fromView: nil)

    shapeLayer = CAShapeLayer()
    shapeLayer.lineWidth = 1.0
    shapeLayer.fillColor = NSColor.clearColor().CGColor
    shapeLayer.strokeColor = NSColor.blackColor().CGColor
    shapeLayer.lineDashPattern = [10,5]
    self.layer?.addSublayer(shapeLayer)

    var dashAnimation = CABasicAnimation()
    dashAnimation = CABasicAnimation(keyPath: "lineDashPhase")
    dashAnimation.duration = 0.75
    dashAnimation.fromValue = 0.0
    dashAnimation.toValue = 15.0
    dashAnimation.repeatCount = .infinity
    shapeLayer.addAnimation(dashAnimation, forKey: "linePhase")




}

override func mouseDragged(theEvent: NSEvent) {

    let point : NSPoint = self.convertPoint(theEvent.locationInWindow, fromView: nil)
    let path = CGPathCreateMutable()
    CGPathMoveToPoint(path, nil, self.startPoint.x, self.startPoint.y)
    CGPathAddLineToPoint(path, nil, self.startPoint.x, point.y)
    CGPathAddLineToPoint(path, nil, point.x, point.y)
    CGPathAddLineToPoint(path, nil, point.x, self.startPoint.y)
    CGPathCloseSubpath(path)
    self.shapeLayer.path = path
}

override func mouseUp(theEvent: NSEvent) {
    self.shapeLayer.removeFromSuperlayer()
    self.shapeLayer = nil
}



}

Drawing selection box (rubberbanding, marching ants) in Cocoa, ObjectiveC

4 Answers4

Linked