›

Création de courbes et animation

MagiicMagiic Membre
dans API UIKit #1

Salut !


 


Pour un projet d'un client de mon entreprise d'accueil et aussi pour un projet d'étude je cherche à  réaliser des graphiques. Je suis un ultra junior sur le dessin sur iOS, CoreGraphic etc. et je ne sais pas vraiment comment m'y prendre pour réaliser ceci.


 


Mon besoin globalement est de créer une courbe qui varie selon plusieurs points (le nombre de point est variable) où certaines parties de cette courbe sont colorées (soit un gradient de 2 couleurs, soit une couleur unie). À la fin, la courbe doit s'animer, c'est à  dire, on la voit se tracer sur une durée X. Pour être plus clair j'ajouterais des images si besoin.


 


J'utiliser Bezier Path pour tracer mes courbes et déjà  le problème que je rencontre c'est comment choisir les points de contrôle pour obtenir des courbes quasi parfaites.


Si on omet ce point, j'ai besoin de changer la couleur de la courbe entre 2 points mais je ne sais pas comment faire. J'ai pensé à  créer un autre bezier path entre ces deux points mais je ne crois pas que ce soit optimisé comme solution.


Après j'aimerais faire la même courbe avec un gradient de couleur spécialisé. Plus on est proche de zéro, plus la courbe est blanche. Plus on est proche de 100 (valeur maximum sur l'axe des ordonnée) plus la courbe est verte.


Pour finir, j'aimerais animé le dessin de la courbe. 


 


Bon assez de blabla, voilà  mon code de démarrage. Notez que c'est possible de voir la courbe directement sur le storyboard avec @IBDesignable.




@IBDesignable

class HBHCurveLineGraph: UIView {



@IBInspectable var pathColor: UIColor = UIColor.whiteColor()



@IBInspectable var bottomBorder: CGFloat = 20.0

@IBInspectable var topBorder: CGFloat = 20.0

@IBInspectable var textColor: UIColor = UIColor.blackColor()

@IBInspectable var margin:CGFloat = 20.0

@IBInspectable var fontText: UIFont = UIFont(name: "Arial", size: 11)!



var graphPoints: [Int] = [45, 9, 98, 21, 17, 50, 20, 90, 73, 67]



// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

override func drawRect(rect: CGRect) {

// Drawing code



let width = rect.width

let height = rect.height



// Calculate the x point

var columnXPoint = { (column:Int) -> CGFloat in

// Calculate gap between points

let spacer = (width - self.margin*2 - 4) /

CGFloat((self.graphPoints.count - 1))

var x:CGFloat = CGFloat(column) * spacer

x += self.margin + 2

return x

}



// Calculate the y point

let graphHeight = height - topBorder - bottomBorder

// max value in array

let maxValue = maxElement(graphPoints)

var columnYPoint = { (graphPoint:Int) -> CGFloat in

var y:CGFloat = CGFloat(graphPoint) /

CGFloat(maxValue) * graphHeight

y = graphHeight + self.topBorder - y // Flip the graph

return y

}



// Set up the points line

var graphPath = UIBezierPath()

graphPath.lineCapStyle = kCGLineCapRound

// Go to start of line

graphPath.moveToPoint(CGPoint(x:columnXPoint(0),

y:columnYPoint(graphPoints[0])))



// Add points for each value in the graphPoints array

for i in 1..<graphPoints.count {

let nextPoint = CGPoint(x:columnXPoint(i),

y:columnYPoint(graphPoints[i]))

let previousPoint = CGPointMake(columnXPoint(i-1), columnYPoint(graphPoints[i-1]))



let c1x = previousPoint.x + 20.0

var c1y: CGFloat = previousPoint.y

let c2x = nextPoint.x - 20.0

var c2y: CGFloat = nextPoint.y



let control1 = CGPointMake(c1x, c1y)

let control2 = CGPointMake(c2x, c2y)

graphPath.addCurveToPoint(nextPoint, controlPoint1: control1, controlPoint2: control2)



}



// Draw the line graph

pathColor.setStroke()

graphPath.stroke()



}





}

Mots clés:

Réponses

  • colas_colas_ Membre
    #2

    Vu le type de courbes qui t'intéresse, pour l'animation tu peux masquer entièrement la vue à  t=0 puis réduire la largeur du mask.


  • MagiicMagiic Membre
    #3

    Bon je pense avoir trouvé une solution pour chacun de mes problèmes excepté peut-être les controlPoint pour la courbe. 


     


    Pour le tracé, je procède comme suit :


     


    Je crée 2 bezier path pour mes deux couleurs. 


     


    Je crée pour chacun d'eux un layer (CAShapeLayer) auquel j'introduis le bezier path. Ensuite j'utilise CABasicAnimation pour gérer l'animation avec comme clé strokeEnd. J'ajoute bien évidemment les 2 layers à  ma vue.


     


    Reste à  voir le gradient de 2 couleurs et les controlPoint pour la courbe.


     


    Merci Colas pour ton idée. Je vais voir ça si ma solution ne fonctionne pas. 


Connectez-vous ou Inscrivez-vous pour répondre.