monsabre
monsabre

Reputation: 2099

how to make dashed line moveable

I used codes below to draw a dashed line

// get the current CGContextRef for the view
  CGContextRef currentContext =
     (CGContextRef)[[NSGraphicsContext currentContext]
     graphicsPort];

  // grab some useful view size numbers
  NSRect bounds = [self bounds];
  float width = NSWidth( bounds );
  float height = NSHeight( bounds );
  float originX = NSMinX( bounds );
  float originY = NSMinY( bounds );
  float maxX = NSMaxX( bounds );
  float maxY = NSMaxY( bounds );
  float middleX = NSMidX( bounds );
  float middleY = NSMidY( bounds );

   CGContextSetLineWidth( currentContext, 10.0 );
   float dashPhase = 0.0;
   float dashLengths[] = { 20, 30, 40, 30, 20, 10 };
   CGContextSetLineDash( currentContext,
      dashPhase, dashLengths,
      sizeof( dashLengths ) / sizeof( float ) );

   CGContextMoveToPoint( currentContext,
      originX + 10, middleY );
   CGContextAddLineToPoint( currentContext,
      maxX - 10, middleY );
   CGContextStrokePath( currentContext );

enter image description here

it is static.

But I prefer to make the dashes and gaps moveable

move from right to left and circle

Is it possible?

more improved case:

enter image description here

dashes and gaps move clockwise automatically

Welcome any comment

Upvotes: 3

Views: 1633

Answers (1)

Thomas Zoechling
Thomas Zoechling

Reputation: 34253

The simplest way would be to make the phase variable an ivar and override keyDown:

- (BOOL)acceptsFirstResponder 
{
    return YES;
}

- (void)keyDown:(NSEvent *)theEvent
{
    switch ([theEvent keyCode])
    {
        case 0x7B: //left cursor key
            dashPhase += 10.0;
            break;
        case 0x7C: //right cursor key
            dashPhase -= 10.0;
            break;
        default:
            [super keyDown:theEvent];            
            break;
    }
    [self setNeedsDisplay:YES];
}

Also make sure to set the initialResponder of your window to the custom view (I assume you do your drawing in an NSView subclass).

The wrapping around code shouldn't be too hard. Just divide your dashLengths array and reassemble it the way you want. (You didn't specify if you want to split single dashes or not)

Update

OK. I misunderstood the "move from right to left and circle" part of your question. I thought you want the dashed line to wrap around. If you want to draw a rect with a movable, dashed border that would even be easier. Put this in an NSView subclass and it should draw a dashed rectangle that moves it's dashes when you press ← or →:

- (id)initWithFrame:(NSRect)frame
{
    self = [super initWithFrame:frame];
    if (self) 
    {
        patternRectangle = [self bounds];
    }

    return self;
}

- (void)drawRect:(NSRect)dirtyRect
{
    CGContextRef currentContext = (CGContextRef)[[NSGraphicsContext currentContext] graphicsPort];
    CGContextSetLineWidth( currentContext, 10.0 );
    CGFloat dashLengths[] = { 20, 30, 40, 30, 20, 10 };
    CGContextSetLineDash( currentContext, dashPhase, dashLengths, sizeof( dashLengths ) / sizeof( float ) );
    CGPathCreateWithRect(CGRectMake(2.0, 2.0, 100.0, 100.0), NULL);
    CGContextStrokeRect(currentContext, CGRectInset(NSRectToCGRect([self bounds]), 10.0, 10.0));
    CGContextStrokePath( currentContext );
}

- (BOOL)acceptsFirstResponder 
{
    return YES;
}

- (void)keyDown:(NSEvent *)theEvent
{
    switch ([theEvent keyCode])
    {
        case 0x7B:
            dashPhase += 10.0;
            break;
        case 0x7C:
            dashPhase -= 10.0;
            break;
        default:
            [super keyDown:theEvent];            
            break;
    }
    [self setNeedsDisplay:YES];
}

Upvotes: 2

Related Questions