Come disegnare la linea su Image Pattern esattamente

Ho un UIImageView. Dentro di me sto disegnando una linea con l'evento touch dell'utente. Il problema è che una linea può essere tracciata ovunque in UIImageview, ma mi piace disegnare la linea solo con il modello di immagine.Come disegnare la linea su Image Pattern esattamente

Ad esempio, guarda questa immagine. Devo tracciare una linea solo sul modello dell'immagine.

Questo è il mio codice:

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event 
{ 

    UITouch *touch = [[event allTouches] anyObject]; 
    touchPoint = [touch locationInView:self.imgColor]; 
    UIBezierPath *path = [UIBezierPath bezierPath]; 
    [path moveToPoint:CGPointMake(touchPoint.x,touchPoint.y)]; 
    [path addLineToPoint:CGPointMake(startingPoint.x,startingPoint.y)]; 
    startingPoint=touchPoint; 
    CAShapeLayer *shapeLayer = [CAShapeLayer layer]; 
    shapeLayer.path = [path CGPath]; 
    shapeLayer.strokeColor = [[UIColor blueColor] CGColor]; 
    shapeLayer.lineWidth = 3.0; 
    shapeLayer.fillColor = [[UIColor redColor] CGColor]; 
    [self.imgColor.layer addSublayer:shapeLayer]; 
    [arrLayer addObject:shapeLayer]; 
    NSLog(@"Touch moving point =x : %f Touch moving point =y : %f", touchPoint.x, touchPoint.y); 



}

Spero che qualcuno a risolvere il mio problema.

fonte

2016-01-09 Kishore Kumar

sottoclassi la visualizzazione utente e disegna l'immagine su di essa anziché utilizzare la visualizzazione di immagini. –

@ Mr.T puoi spiegarlo chiaramente –

scusa, stai dicendo che la linea dovrebbe essere disegnata solo sul pattern? Se allontani il dito dal disegno, la linea non dovrebbe essere disegnata. E 'questo che stai dicendo? –

Puoi provare in questo modo.

Diciamo che avete un bezierPath chiamato maskPath, nel mio caso è textPath che viene utilizzato per mascherare l'imageView.

Sto utilizzando un semplice maskView che disegna la lettera Q su imageView.

Aggiunta del maskPath: (aggiunge un semplice Q maschera forma al IMAGEVIEW)

-(void)applyMask{ 

//// Text Drawing 
textPath = [UIBezierPath bezierPath]; 
[textPath moveToPoint: CGPointMake(181, 179.8)]; 
[textPath addLineToPoint: CGPointMake(166, 197.2)]; 
[textPath addLineToPoint: CGPointMake(189.7, 216.1)]; 
[textPath addCurveToPoint: CGPointMake(160, 222.1) controlPoint1: CGPointMake(180.1, 220.1) controlPoint2: CGPointMake(170.2, 222.1)]; 
[textPath addCurveToPoint: CGPointMake(126.4, 214.45) controlPoint1: CGPointMake(147, 222.1) controlPoint2: CGPointMake(135.8, 219.55)]; 
[textPath addCurveToPoint: CGPointMake(103.3, 194.2) controlPoint1: CGPointMake(117, 209.35) controlPoint2: CGPointMake(109.3, 202.6)]; 
[textPath addCurveToPoint: CGPointMake(90.1, 165.85) controlPoint1: CGPointMake(97.3, 185.8) controlPoint2: CGPointMake(92.9, 176.35)]; 
[textPath addCurveToPoint: CGPointMake(85.9, 133.9) controlPoint1: CGPointMake(87.3, 155.35) controlPoint2: CGPointMake(85.9, 144.7)]; 
[textPath addCurveToPoint: CGPointMake(90.1, 101.95) controlPoint1: CGPointMake(85.9, 123.1) controlPoint2: CGPointMake(87.3, 112.45)]; 
[textPath addCurveToPoint: CGPointMake(103.3, 73.6) controlPoint1: CGPointMake(92.9, 91.45) controlPoint2: CGPointMake(97.3, 82)]; 
[textPath addCurveToPoint: CGPointMake(126.4, 53.35) controlPoint1: CGPointMake(109.3, 65.2) controlPoint2: CGPointMake(117, 58.45)]; 
[textPath addCurveToPoint: CGPointMake(160, 45.7) controlPoint1: CGPointMake(135.8, 48.25) controlPoint2: CGPointMake(147, 45.7)]; 
[textPath addCurveToPoint: CGPointMake(193.6, 53.35) controlPoint1: CGPointMake(173, 45.7) controlPoint2: CGPointMake(184.2, 48.25)]; 
[textPath addCurveToPoint: CGPointMake(216.7, 73.6) controlPoint1: CGPointMake(203, 58.45) controlPoint2: CGPointMake(210.7, 65.2)]; 
[textPath addCurveToPoint: CGPointMake(229.9, 101.95) controlPoint1: CGPointMake(222.7, 82) controlPoint2: CGPointMake(227.1, 91.45)]; 
[textPath addCurveToPoint: CGPointMake(234.1, 133.9) controlPoint1: CGPointMake(232.7, 112.45) controlPoint2: CGPointMake(234.1, 123.1)]; 
[textPath addCurveToPoint: CGPointMake(228.1, 171.85) controlPoint1: CGPointMake(234.1, 147.1) controlPoint2: CGPointMake(232.1, 159.75)]; 
[textPath addCurveToPoint: CGPointMake(209.5, 202.6) controlPoint1: CGPointMake(224.1, 183.95) controlPoint2: CGPointMake(217.9, 194.2)]; 
[textPath addLineToPoint: CGPointMake(181, 179.8)]; 
[textPath closePath]; 
[textPath moveToPoint: CGPointMake(244, 259.3)]; 
[textPath addLineToPoint: CGPointMake(258.4, 241.3)]; 
[textPath addLineToPoint: CGPointMake(230.2, 219.1)]; 
[textPath addCurveToPoint: CGPointMake(254.5, 180.7) controlPoint1: CGPointMake(241, 208.3) controlPoint2: CGPointMake(249.1, 195.5)]; 
[textPath addCurveToPoint: CGPointMake(262.6, 133.9) controlPoint1: CGPointMake(259.9, 165.9) controlPoint2: CGPointMake(262.6, 150.3)]; 
[textPath addCurveToPoint: CGPointMake(256.15, 91.75) controlPoint1: CGPointMake(262.6, 119.3) controlPoint2: CGPointMake(260.45, 105.25)]; 
[textPath addCurveToPoint: CGPointMake(236.8, 55.9) controlPoint1: CGPointMake(251.85, 78.25) controlPoint2: CGPointMake(245.4, 66.3)]; 
[textPath addCurveToPoint: CGPointMake(204.7, 31) controlPoint1: CGPointMake(228.2, 45.5) controlPoint2: CGPointMake(217.5, 37.2)]; 
[textPath addCurveToPoint: CGPointMake(160, 21.7) controlPoint1: CGPointMake(191.9, 24.8) controlPoint2: CGPointMake(177, 21.7)]; 
[textPath addCurveToPoint: CGPointMake(115.3, 31) controlPoint1: CGPointMake(143, 21.7) controlPoint2: CGPointMake(128.1, 24.8)]; 
[textPath addCurveToPoint: CGPointMake(83.2, 55.9) controlPoint1: CGPointMake(102.5, 37.2) controlPoint2: CGPointMake(91.8, 45.5)]; 
[textPath addCurveToPoint: CGPointMake(63.85, 91.75) controlPoint1: CGPointMake(74.6, 66.3) controlPoint2: CGPointMake(68.15, 78.25)]; 
[textPath addCurveToPoint: CGPointMake(57.4, 133.9) controlPoint1: CGPointMake(59.55, 105.25) controlPoint2: CGPointMake(57.4, 119.3)]; 
[textPath addCurveToPoint: CGPointMake(63.85, 176.05) controlPoint1: CGPointMake(57.4, 148.5) controlPoint2: CGPointMake(59.55, 162.55)]; 
[textPath addCurveToPoint: CGPointMake(83.2, 211.9) controlPoint1: CGPointMake(68.15, 189.55) controlPoint2: CGPointMake(74.6, 201.5)]; 
[textPath addCurveToPoint: CGPointMake(115.3, 236.65) controlPoint1: CGPointMake(91.8, 222.3) controlPoint2: CGPointMake(102.5, 230.55)]; 
[textPath addCurveToPoint: CGPointMake(160, 245.8) controlPoint1: CGPointMake(128.1, 242.75) controlPoint2: CGPointMake(143, 245.8)]; 
[textPath addCurveToPoint: CGPointMake(211.3, 233.2) controlPoint1: CGPointMake(179.8, 245.8) controlPoint2: CGPointMake(196.9, 241.6)]; 
[textPath addLineToPoint: CGPointMake(244, 259.3)]; 
[textPath closePath]; 
[UIColor.blackColor setFill]; 
[textPath fill]; 

maskLayer = [CAShapeLayer layer]; 
maskLayer.path = [textPath CGPath]; 
maskLayer.strokeColor = [[UIColor blackColor] CGColor]; 
maskLayer.lineWidth = 3.0; 
maskLayer.fillColor = [[UIColor redColor] CGColor]; 
[self.imgView.layer addSublayer:maskLayer]; 

}

hai già il metodo:

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event 
{ 

     UITouch *touch = [[event allTouches] anyObject]; 
     CGPoint touchPoint = [touch locationInView:self.imgView]; 

     if ([textPath containsPoint:touchPoint]) { 
      path=nil; //this is not need,unless u want to start a new path everytime this condition executes. 
      path = [UIBezierPath bezierPath]; 
      [path moveToPoint:CGPointMake(touchPoint.x,touchPoint.y)]; 
      [path addLineToPoint: CGPointMake(_startingPoint.x,_startingPoint.y)]; 
      _startingPoint=touchPoint; 

     drawLayer = [CAShapeLayer layer]; 
     drawLayer.path = [path CGPath]; 
     drawLayer.strokeColor = [[UIColor blackColor] CGColor]; 
     drawLayer.lineWidth = 3.0; 
     drawLayer.fillColor = [[UIColor redColor] CGColor]; 
     [self.imgView.layer addSublayer:drawLayer]; 
     NSLog(@"Touch moving point =x : %f Touch moving point =y : %f", touchPoint.x, touchPoint.y); 

     } 
}

È ora possibile verificare se il punto di contatto è in il textPath è un bezierPath. Se il touchpoint è nello textPath, quindi consentire il disegno, altrimenti non disegnare.

Il risultato sarà qualcosa di simile:

Come si vede, questo codice vi permetterà di disegnare solo nel percorso mascherato. Se si vuole disegnare al di fuori della textPath, allora si può fare semplicemente:

if (![textPath containsPoint:touchPoint]) { 
path=nil; //this is not need,unless u want to start a new path everytime this condition executes. 
path = [UIBezierPath bezierPath]; 
[path moveToPoint:CGPointMake(touchPoint.x,touchPoint.y)]; 
[path addLineToPoint:CGPointMake(_startingPoint.x,_startingPoint.y)]; 
_startingPoint=touchPoint; 

    drawLayer = [CAShapeLayer layer]; 
    drawLayer.path = [path CGPath]; 
    drawLayer.strokeColor = [[UIColor blackColor] CGColor]; 
    drawLayer.lineWidth = 3.0; 
    drawLayer.fillColor = [[UIColor redColor] CGColor]; 
    [self.imgView.layer addSublayer:drawLayer]; 
    NSLog(@"Touch moving point =x : %f Touch moving point =y : %f", touchPoint.x, touchPoint.y); 


}

Nota: Hai bisogno di prendersi cura dei vostri tocchi metodo spostato nel tracciare la linea. Poiché il metodo del percorso di Bezier addLineToPoint aggiungerà una linea al touchpoint e questa linea potrebbe attraversare il maskedPath. È necessario assicurarsi di essere vicini al percorso precedente di bezier e avviarne uno nuovo per evitare che le linee vengano disegnate sulla parte esterna dell'area mascherata.

fonte

2016-01-11 14:16:11

ma l'immagine non è statica qui, quindi come devo calcolare uibezierPath. –

Quale immagine? Nel tuo caso, stai parlando della maschera a forma di I? –

sì fratello per me quell'immagine non è statica, quindi come devo calcolare il percorso uibeizerPath .... –

Suppongo che stai cercando di visualizzare alfabeti in una lingua, potrebbe essere possibile utilizzare quel tipo di carattere per la visualizzazione dinamica. Solo un pensiero. Insieme alla logica sopra menzionata puoi provare questo.

fonte

2016-01-12 05:56:13

quella parte di colore grigio è l'immagine ingrandita, quella parte di colore bianco è l'immagine, c'è un modo per scoprire i punti di copia non colorati –

Come disegnare la linea su Image Pattern esattamente

risposta

Problemi correlati