Draw Dots like Matrix Structure on iphone sdk

I want to Draw dots like a Matrix Structure in iphone sdk.

if i want generate dots columns and rows (like 2x2,3x3,4x4).

but i have no idea for this generation.

i want output like below image.

any help for example code or tutorial..!

回答1:

You use this code ...

- (void)drawRect:(CGRect)rect 
{
CGContextRef contextRef = UIGraphicsGetCurrentContext();

CGContextSetRGBFillColor(contextRef, 0, 0, 255, 0.1);
//CGContextSetRGBFillColor(contextRef, 0, 10, 200, 0.2);

CGContextSetRGBStrokeColor(contextRef, 0, 0, 255, 0.5);

// Draw a circle (filled)
//CGContextFillEllipseInRect(contextRef, CGRectMake(100, 100, 25, 25));

// Draw a circle (border only)
CGContextStrokeEllipseInRect(contextRef, CGRectMake(100, 100, 25, 25));



// Get the graphics context and clear it
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextClearRect(ctx, rect);



// Draw a green solid circle
CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(20, 50, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(50, 50, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(80, 50, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(110, 50, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(140, 50, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(170, 50, 8, 8));



CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(20, 100, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(50, 100, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(80, 100, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(110, 100, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(140, 100, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(170, 100, 8, 8));


CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(20, 150, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(50, 150, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(80, 150, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(110, 150, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(140, 150, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(170, 150, 8, 8));


CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(20, 200, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(50, 200, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(80, 200, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(110, 200, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(140, 200, 8, 8));

CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(170, 200, 8, 8));
}

Your Output shows like

回答2:

A simple Solution would be:

- (void)drawRect:(CGRect)rect {
  int n = 12;         // row and column count
  int padding = 5;    // distance beetween dots
  float radius = MIN((rect.size.width-(n+1)*padding)/(n*2), (rect.size.height-(n+1)*padding)/(n*2)); // radius depending on rect size

  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSetFillColorWithColor(context, [[UIColor whiteColor] CGColor]); // background color
  CGContextFillRect(context, rect); // setting background color

  CGContextSetFillColorWithColor(context, [[UIColor blackColor] CGColor]); // dot color

  for (int y = 0; y<n; y++) {
    for (int x = 0; x<n; x++) {
      CGContextAddArc(context, padding+radius+(padding+radius*2)*x, padding+radius+(padding+radius*2)*y, radius, 0, M_PI*2, 0); // adding dot path
      CGContextFillPath(context); // drawing dot path
    }
  }
}