web-dev-qa-db-fra.com

Comment dessiner de façon procédurale un rectangle / des lignes dans Swift using CGContext

Je parcours Internet depuis des jours pour essayer de trouver les exemples de code les plus simples sur la façon de dessiner un rectangle ou des lignes de manière procédurale dans Swift. J'ai vu comment le faire en remplaçant la commande DrawRect. Je crois que vous pouvez créer un CGContext puis dessiner dans une image, mais j'aimerais voir quelques exemples de code simples. Ou est-ce une approche terrible? Merci.

class MenuController: UIViewController 
{

    override func viewDidLoad() 
    {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.view.backgroundColor = UIColor.blackColor()

        var logoFrame = CGRectMake(0,0,118,40)
        var imageView = UIImageView(frame: logoFrame)
        imageView.image = UIImage(named:"Logo")
        self.view.addSubview(imageView)

        //need to draw a rectangle here
    }
}
swiftcgcontextrect
17
iphaaw

Voici un exemple qui crée un UIImage personnalisé contenant un arrière-plan transparent et un rectangle rouge avec des lignes qui le traversent en diagonale.

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad();

        let imageSize = CGSize(width: 200, height: 200)
        let imageView = UIImageView(frame: CGRect(Origin: CGPoint(x: 100, y: 100), size: imageSize))
        self.view.addSubview(imageView)
        let image = drawCustomImage(size: imageSize)
        imageView.image = image
    }
}

func drawCustomImage(size: CGSize) -> UIImage {
    // Setup our context
    let bounds = CGRect(Origin: .zero, size: size)
    let opaque = false
    let scale: CGFloat = 0
    UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
    let context = UIGraphicsGetCurrentContext()!

    // Setup complete, do drawing here
    context.setStrokeColor(UIColor.red.cgColor)
    context.setLineWidth(2)

    context.stroke(bounds)

    context.beginPath()
    context.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
    context.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
    context.move(to: CGPoint(x: bounds.maxX, y: bounds.minY))
    context.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
    context.strokePath()

    // Drawing complete, retrieve the finished image and cleanup
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!
}
32
Wolf McNally

Une réponse mise à jour en utilisant Swift 3.0

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad();

        let imageSize = CGSize(width: 200, height: 200)
        let imageView = UIImageView(frame: CGRect(Origin: CGPoint(x: 100, y: 100), size: imageSize))
        self.view.addSubview(imageView)
        let image = drawCustomImage(size: imageSize)
        imageView.image = image
    }
}

func drawCustomImage(size: CGSize) -> UIImage? {
    // Setup our context
    let bounds = CGRect(Origin: CGPoint.zero, size: size)
    let opaque = false
    let scale: CGFloat = 0
    UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
    guard let context = UIGraphicsGetCurrentContext() else { return nil }

    // Setup complete, do drawing here
    context.setStrokeColor(UIColor.red.cgColor)
    context.setLineWidth(5.0)

    // Would draw a border around the rectangle
    // context.stroke(bounds)

    context.beginPath()
    context.move(to: CGPoint(x: bounds.maxX, y: bounds.minY))
    context.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
    context.strokePath()

    // Drawing complete, retrieve the finished image and cleanup
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

let imageSize = CGSize(width: 200, height: 200)
let imageView = UIImageView(frame: CGRect(Origin: CGPoint(x: 100, y: 100), size: imageSize))
let image = drawCustomImage(size: imageSize)
imageView.image = image
9
KFDoom

J'ai utilisé la réponse acceptée pour tracer des lignes dans un jeu Tic Tac Toe lorsqu'un des joueurs a gagné. Merci, bon de savoir que cela a fonctionné. Malheureusement, j'ai rencontré des problèmes pour le faire fonctionner simultanément sur différentes tailles d'iPhones et d'iPad. C'est probablement quelque chose qui aurait dû être réglé. Fondamentalement, ce que je dis, c'est que cela ne vaut peut-être pas la peine de tout ce code, selon votre cas.

Ma solution alternative consiste simplement à créer une ligne personnalisée et plus belle dans Photoshop, puis à la charger avec UIImageView. Pour moi, c'était BEAUCOUP plus simple, fonctionnait mieux et avait l'air mieux. Évidemment, cela dépend vraiment de ce dont vous avez besoin.

Pas:

1: Téléchargez ou créez une image (de préférence enregistrée au format .PNG)

2: faites-le glisser dans votre projet

3: faites glisser une vue UIImage dans votre storyboard

4: Cliquez sur la vue d'image et sélectionnez l'image dans l'inspecteur d'attributs

5: Ctrl cliquez et faites glisser la vue Image vers votre fichier .Swift pour déclarer une prise

6: Définissez les contraintes de mise en page automatique afin que cela fonctionne sur TOUS les appareils FACILEMENT

L'animation, la rotation et la transformation des vues d'image sur et hors de l'écran sont également plus faciles

Pour changer l'image:

yourImageViewOutletName.image = UIImage(named: "ImageNameHere")
3
mothy