Cocoa中的绘图选择框（橡皮筋，行进蚂蚁），ObjectiveC [英] Drawing selection box (rubberbanding, marching ants) in Cocoa, ObjectiveC

问题描述

我目前使用鼠标事件实现了一个简单的选择框，并在鼠标拖动时重绘一个矩形。这里是我的代码：

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];
}

参考： http://cocoadev.com/HowToCreateWalkingAnts

问题：

这是最有效的方法吗？如果视图很复杂，那么在主视图上绘制透明视图更有效，而不是在鼠标拖动期间不断重绘视图（http://www.cocoabuilder.com/archive/cocoa/99877-drawing-selection-rectangle.html ）？这是怎么做的？

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.

推荐答案

您可以使用QuartzCore为您的行军蚂蚁你要。这使得你完全脱离手工绘制橡胶带选择框的世界。

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.

在XIB的视图效果检查器中，您可以定义该框的路径，并让Core Animation负责绘制框架并对其进行动画处理。 ，打开Core Animation，然后你可以这样做：

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

这篇关于Cocoa中的绘图选择框（橡皮筋，行进蚂蚁），ObjectiveC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！