web-dev-qa-db-fra.com

Comment tracer une ligne de la manière la plus simple dans rapide

Je suis assez nouveau pour Swift et Xcode et j'essaie de faire un jeu de tic tac toe. J'ai tout compris, sauf comment tracer une ligne entre les trois x ou les o. Je n'ai aucune idée sur la façon de tracer des lignes. J'ai cherché la réponse sur le Web et je ne peux pas le comprendre.

iosswift
22
Volkodav

Essayez de regarder dans UIBezierPath, cela vous aidera beaucoup pour tracer des lignes. Documentation Voici un exemple: 

override func drawRect(rect: CGRect) {
      var aPath = UIBezierPath()

      aPath.moveToPoint(CGPoint(x:/*Put starting Location*/, y:/*Put starting Location*/))

      aPath.addLineToPoint(CGPoint(x:/*Put Next Location*/, y:/*Put Next Location*/))

      //Keep using the method addLineToPoint until you get to the one where about to close the path

      aPath.closePath()

      //If you want to stroke it with a red color
      UIColor.redColor().set()
      aPath.stroke()
      //If you want to fill it as well 
      aPath.fill()
}

Assurez-vous de mettre ce code dans le drawRect. Comme dans l'exemple ci-dessus.

Si vous devez mettre à jour le dessin, appelez simplement setNeedsDisplay() pour le mettre à jour.

41
Epic Defeater

Mise à jour pour Swift 3.x avec l'exemple d'Epic Defeater 

override func draw(_ rect: CGRect) {
        let aPath = UIBezierPath()

        aPath.move(to: CGPoint(x:20, y:50))

        aPath.addLine(to: CGPoint(x:300, y:50))

        //Keep using the method addLineToPoint until you get to the one where about to close the path

        aPath.close()

        //If you want to stroke it with a red color
        UIColor.red.set()
        aPath.stroke()
        //If you want to fill it as well
        aPath.fill()
    }
20
Sal

Swift 3.1 , dans une UIView:

public override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()
    context!.setLineWidth(2.0)
    context!.setStrokeColor(UIColor.red.cgColor)
    context?.move(to: CGPoint(x: 0, y: self.frame.size.height))
    context?.addLine(to: CGPoint(x: self.frame.size.width, y: 0))
    context!.strokePath()
}

Si vous souhaitez ajouter une ligne à un UIViewController, ajoutez simplement un UIView avec cette fonction en tant que sous-vue du UIViewController, par exemple: 

let line = LineView(CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height))
self.view.addSubview(line)
6
iljn

Le questionneur ne demande pas vraiment quel code utiliser, il demande où le mettre. C'est en fait une bonne question car si vous placez n'importe quel code graphique à la "mauvaise" place, rien ne sera dessiné. Le "mauvais" emplacement du code est dans une classe qui n'est pas une sous-classe de UIView. Si vous essayez de faire cela, le code sera compilé, mais lorsqu’il sera exécuté, l’appel pour obtenir le contexte graphique échouera et les appels aux fonctions graphiques suivantes, tels que context? .Move (), ne seront pas exécutés car le contexte est nil.

A titre d'exemple, créons un storyboard avec une vue, un bouton et une étiquette en faisant glisser les objets respectifs de la bibliothèque d'objets sur le storyboard. Mon exemple ressemble à ceci, où le carré blanc est la vue (en fait une vue secondaire car l'écran principal est aussi une vue):

 enter image description here

Il est possible de dessiner des graphiques sur les contrôles Button et Label (ainsi que sur les autres types de contrôles d'interface utilisateur) car UIButton et UILabel sont des sous-classes de UIView. 

J'ai également créé un nouveau fichier dans le projet, de type Swift, et l'ai appelé ExampleDraw.Swift et y ai mis le code suivant. Le code contient trois classes pour écrire des graphiques sur la vue, le bouton et l'étiquette. Chaque classe annule la fonction draw () de la classe de base UIView:

import UIKit

class DrawOnView: UIView {
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        context?.setLineWidth(2.0)
        context?.setStrokeColor(UIColor.blue.cgColor)
        context?.move(to: CGPoint(x:0, y: 0))
        context?.addLine(to: CGPoint(x: 20, y: 30))
        context?.strokePath()

        print("in DrawOnView")
    }
}

class DrawOnButton: UIButton {
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        context?.setLineWidth(4.0)
        context?.setStrokeColor(UIColor.green.cgColor)
        context?.move (to: CGPoint(x: 0, y: 0))
        context?.addLine (to: CGPoint(x: 40, y: 45))
        context?.strokePath()

        print("in DrawOnButton")
    }
}

class DrawOnLabel: UILabel {
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        context?.setLineWidth(1.0)
        context?.setStrokeColor(UIColor.red.cgColor)
        context?.move (to: CGPoint(x: 0, y: 0))
        context?.addLine (to: CGPoint(x: 35, y: 45))
        context?.strokePath()

        print("in DrawOnLabel")
    }
}

Puis dans le storyboard principal, sélectionnez la vue, comme ceci:

 enter image description here

Ouvrez ensuite l'inspecteur Identity et associez cette vue à la classe personnalisée (c'est-à-dire la première classe de ExampleDraw.Swift) appelée DrawOnView () comme suit:

 enter image description here

Faites la même chose pour le bouton et l'étiquette, comme ceci:

 enter image description here

 enter image description here

Ensuite, lancez le projet dans le simulateur et j'espère que les graphiques vont écrire sur la vue, le bouton et l'étiquette comme ceci:

 enter image description here

5
paulo62

Simple Swift 4.1 Implémentation:

public override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }
    let lineWidth: CGFloat = 1.0
    context.setLineWidth(lineWidth)
    context.setStrokeColor(UIColor(style: .tertiaryBackground).cgColor)
    let startingPoint = CGPoint(x: 0, y: rect.size.height - lineWidth)
    let endingPoint = CGPoint(x: rect.size.width, y: rect.size.height - lineWidth)
    context.move(to: startingPoint )
    context.addLine(to: endingPoint )
    context.strokePath()
}

De toute évidence, vous devez ajuster les points de départ et d'arrivée.

4
Kappe

Je me bats aussi sur ce sujet. Dans XCode 7.3.1, avec Swift version 2.2, le moyen le plus simple de tracer une ligne est de créer un terrain de jeu et d’y insérer ce code. J'espère que cela aidera d'autres personnes à réaliser cette tâche simple. 

import UIKit
import XCPlayground

public class SimpleLine: UIView  {

    public init() {
        super.init(frame: CGRect(x: 0, y: 0, width: 480, height: 320))
        backgroundColor = UIColor.whiteColor()
    }

    public required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    public override func drawRect(rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        CGContextSetLineWidth(context, 4.0)
        CGContextSetStrokeColorWithColor(context, UIColor.darkGrayColor().CGColor)
        CGContextMoveToPoint(context, 100, 100)
        CGContextAddLineToPoint(context, 300, 300)
        CGContextStrokePath(context)
    }

}

let firstLine = SimpleLine()

XCPlaygroundPage.currentPage.liveView = firstLine
4
Giorgio Tempesta

Utilisez-vous SpriteKit? Sinon, vous devriez vraiment le faire pour tout type de jeux iOS car cela facilite la manipulation et l'ajout d'images-objets (images) et d'autres objets de style de jeu.

Bien que ce ne soit pas du tout le meilleur moyen de coder les meilleures pratiques, un moyen très simple d'y parvenir serait de créer une nouvelle vue lorsque quelqu'un gagne, vérifiez dans quelle direction (sur 8 possibles) se trouve la ligne, puis définissez le paramètre image de cette vue en conséquence. Les images seraient des carrés semi-transparents (par exemple, PNG) contenant chacun une ligne possible différente.

Si vous voulez le faire de manière appropriée, cherchez comment tracer des chemins dans SpriteKit entre des coordonnées. 

J'espère que cela vous sera utile! Steve

3
steve

En général, vous devez dessiner un chemin dans Core Graphics. Vous pouvez suivre cet exemple:

let context = UIGraphicsGetCurrentContext()
CGContextSetLineWidth(context, 2.0)
CGContextSetStrokeColorWithColor(context, color)
CGContextMoveToPoint(context, startPoint)
CGContextAddLineToPoint(context, endPoint)
CGContextStrokePath(context)
2
matthias

Dessin dans Swift 4.1 

override func viewDidLoad() {
    super.viewDidLoad()
     self.lastPoint = CGPoint.zero
     self.red = 0.0
     self.green = 0.0
     self.blue = 0.0

}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}


//MARK: Touch events
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    isSwiping    = false
    if let touch = touches.first{
        lastPoint = touch.location(in: mainImageView)
    }
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

    isSwiping = true;
    if let touch = touches.first{
        let currentPoint = touch.location(in: mainImageView)
        UIGraphicsBeginImageContext(self.tempImageView.frame.size)
        self.tempImageView.image?.draw(in: CGRect(x:0, y:0,width:self.tempImageView.frame.size.width, height:self.tempImageView.frame.size.height))

        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: currentPoint.x, y: currentPoint.y))

        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
        UIGraphicsGetCurrentContext()?.setLineWidth(9.0)
        UIGraphicsGetCurrentContext()?.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
        UIGraphicsGetCurrentContext()?.strokePath()


        self.tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        lastPoint = currentPoint
    }
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    if(!isSwiping) {
        // This is a single touch, draw a point
        UIGraphicsBeginImageContext(self.tempImageView.frame.size)
        self.tempImageView.image?.draw(in: CGRect(x:0, y:0,width:self.tempImageView.frame.size.width, height:self.tempImageView.frame.size.height))
        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
        UIGraphicsGetCurrentContext()?.setLineWidth(9.0)

        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
        UIGraphicsGetCurrentContext()?.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
        UIGraphicsGetCurrentContext()?.strokePath()
        self.tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
}
0
Mahesh Chaudhari