2016-06-15 3 views
2

Comment un quadrillage (appliquer un ensemble de lignes parallèles à 45 degrés) à travers le remplissage d'une forme dans IOS en utilisant des graphiques de base? Exemple de code?Crosshatch dans IOS en utilisant CoreGraphics?

(Je suis particulièrement intéressé par l'utilisation avec un MKPolygon en MKMapKit, mais pour le moment juste essayer de voir s'il est possible dans un UIView en utilisant drawRect ?. Alors remplir l'arrière-plan d'un UIView avec crosshatch'ing)

Répondre

2

Voici ce que je parlais plus dans le Forum Apple Developer:

#import "CrossHatchView.h" 

@implementation CrossHatchView 

static CGFloat sides = 5.0; 

- (void)drawRect:(CGRect)rect 
{ 
    CGRect bounds = self.bounds; 

    UIBezierPath *path = [UIBezierPath bezierPath]; 

    CGFloat xCentre = CGRectGetMidX(bounds); 
    CGFloat yCentre = CGRectGetMidY(bounds); 
    CGFloat radius = 0.0; 

    if (CGRectGetWidth(bounds) > CGRectGetHeight(bounds)) { 
     radius = CGRectGetHeight(bounds)/2.0; 
    } else { 
     radius = CGRectGetWidth(bounds)/2.0; 
    } 
    CGFloat angleIncrement = 2.0 * M_PI/sides; 

    CGFloat initialAngle = (M_PI + (2.0 * M_PI/sides))/2.0; 

    for (NSUInteger i = 0; i < sides; i++) { 
     CGFloat angle = initialAngle + i * angleIncrement; 
     CGFloat x = xCentre + radius * cos(angle); 
     CGFloat y = yCentre + radius * sin(angle); 
     CGPoint point = CGPointMake(x, y); 
     if (i == 0) { 
      [path moveToPoint:point]; 
     } else { 
      [path addLineToPoint:point]; 
     } 
    } 
    [path closePath]; 
    [[UIColor cyanColor] set]; 
    [path addClip]; 

    CGRect pathBounds = [path bounds]; 

    [path removeAllPoints]; 
    CGPoint p1 = pathBounds.origin; 
    CGPoint p2 = CGPointMake(CGRectGetMaxX(pathBounds), CGRectGetMaxY(pathBounds)); 
    [path moveToPoint:p1]; 
    [path addLineToPoint:p2]; 
    path.lineWidth = 400.0; 
    CGFloat dashes[] = { 2.0, 2.0 }; 
    [path setLineDash:dashes count:2 phase:0.0]; 
    [[UIColor blackColor] set]; 
    [path stroke]; 
} 

@end 
3

Créez un UIImage contenant votre motif hachuré comme vous le souhaitez (par exemple en le dessinant avec Core Graphics ou en le chargeant à partir d'un fichier PNG).

Ensuite, utilisez +[UIColor colorWithPatternImage:] (Swift UIColor(patternImage:)) pour créer une "couleur" qui dessine l'image hachurée.

Enfin, définissez la couleur du motif comme couleur de remplissage et remplissez la forme (probablement en remplissant un tracé qui délimite la forme ou en utilisant UIRectFill).

Si vous avez besoin de plus de contrôle sur le motif (pour changer la façon dont il est carrelé ou aligné), vous pouvez passer au niveau Core Graphics et utiliser CGPatternCreate et CGColorCreateWithPattern.

+0

Je suis intéressé par une approche qui ne nécessite pas d'images. Êtes-vous en train de suggérer qu'il n'y a pas de méthode existante comme "gradient" qui le ferait? Il faudrait effectivement dessiner par programmation en utilisant des commandes CG? – Greg

+1

Il n'y a rien intégré qui dessine automatiquement un motif de hachures croisées pour vous. –

+0

Ok merci. Donc, je vais essayer de travailler dans UIVIew – Greg

2

hey essayez ce code exemple que j'ai essayé sur un 300x300 UIView

- (void)drawRect:(CGRect)rect 
{ 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetLineWidth(context, 1.5); 
    CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor); 
    int backward=0; 

    for (int i=0;i<15; i++) 
    { 
     CGContextMoveToPoint(context, backward, 0); 
     CGContextAddLineToPoint(context, 300, 300-backward); 
     backward=backward+20; 
    } 
    int backwardNegitive=0; 
    for (int i=0;i<15; i++) 
    { 
     CGContextMoveToPoint(context, 0,backwardNegitive); 
     CGContextAddLineToPoint(context, 300-backwardNegitive,300); 
     backwardNegitive=backwardNegitive+20; 
    } 
    int forward=0; 
    for (int i=0;i<15; i++) 
    { 
     CGContextMoveToPoint(context, 300-forward, 0); 
     CGContextAddLineToPoint(context, 0, 300-forward); 
     forward=forward+20; 
    } 
    int forwardNegative=0; 
    for (int i=0;i<15; i++) 
    { 
     CGContextMoveToPoint(context, 0,300+forwardNegative); 
     CGContextAddLineToPoint(context,300+forwardNegative,0); 
     forwardNegative=forwardNegative+20; 
    } 
    CGContextStrokePath(context); 

} 

Hope this vous aide.

+0

nice - thanks - works – Greg

1

pour rapide 3., approche de @ user3230875

final class CrossHatchView: UIView { 

    // MARK: - LifeCycle 

    override func draw(_ rect: CGRect) { 
     let path:UIBezierPath = UIBezierPath(roundedRect: bounds, cornerRadius: 5) 
     path.addClip() 

     let pathBounds = path.bounds 
     path.removeAllPoints() 
     let p1 = CGPoint(x:pathBounds.maxX, y:0) 
     let p2 = CGPoint(x:0, y:pathBounds.maxX) 
     path.move(to: p1) 
     path.addLine(to: p2) 
     path.lineWidth = bounds.width * 2 

     let dashes:[CGFloat] = [0.5, 7.0] 
     path.setLineDash(dashes, count: 2, phase: 0.0) 
     UIColor.lightGray.withAlphaComponent(0.5).set() 
     path.stroke() 
    } 
} 

Résultat:

enter image description here