Dessiner sur une image...

Jcb84Jcb84 Membre

Bonjour à tous,

J'ai une problématique dans un de mes dev que je ne sais pas comment aborder...

Voici le contexte : je souhaite ajouter des elements graphique et textuels sur une image de grande taille par rapport à un écran lambda... (Genre 1920*1080 pixels sur des écrans en 1280 par exemple)

Comment s'y prendre ? on stretche l'image et on ajoute les elements sur une image réduite ? ou on travaille au format 1:1 en mémoire puis on stetche le tout ?

Je n'ai jamais fait ce genre de truc encore, j'ai pas mal cherché sur le net mais rien de bien probant pour le moment...

Je suis donc preneur de toutes vos bonnes idées.

Merci d'avance !
Jc.

Réponses

  • DrakenDraken Membre

    @Jcb84 a dit :

    Comment s'y prendre ? on stretche l'image et on ajoute les elements sur une image réduite ? ou on travaille au format 1:1 en mémoire puis on stetche le tout ?

    Option 2 : on travaille en 1:1 et en ajuste le résultat à la taille désirée. C'est ce qui donne le meilleur résultat graphique.

  • Jcb84Jcb84 Membre

    Salut Draken (On se croise parfois aussi sur le forum de PurpleGiraffe et chez maitre Kordon )

    Je penche aussi pour la solution 2 mais concrètement il faut faire quoi ?

    Instancier un nsimage à la bonne taille (ici 1920*1080) puis placer mes éléments dessus , enregistrer l'image au bon format puis l'afficher dans mon appli au format réduit pour qu'elle rentre dans le nsimageview container ?

  • DrakenDraken Membre

    Salutations !
    Tu n'as pas besoin de réduire l'image pour la mettre dans une imageView, qui se charge elle-même d'ajuster la taille du contenu.

    En fait, il y a plusieurs manières de procéder. Tout dépend de ton projet.

    Si c'est juste pour afficher quelques éléments sur un fond, tu peux superposer des imageView les uns sur les autres. Comme par exemple le projet de jeux Asteroid du prof Kordon. La qualité graphique sera légèrement moins bonne qu'un vrai affichage en haute résolution + réduction, mais c'est bien plus économique en consommation mémoire et temps machine. Et plus facile à coder.

    Est-ce que tu compte réutiliser le contenu de la grande image, par la suite ?

    C'est du temps réel ? La grande image doit-elle être actualisée en permanence ou c'est juste un affichage one-shot ?

  • Jcb84Jcb84 Membre

    Alors oui, l'image sera utilisée dans une autre app destinée à l'affichage sur une apple tv. Les images devront donc être enregistrées en jpeg au format full Hd.
    Pour ce qui est de l'actualisation, c'est plutôt : j'ai des images "background" sur lesquelles il faut ajouter des éléments graphiques en fonction des clients (c'est des affiches immobilières) donc susceptibles d'êtres traitées plusieurs fois (changement du prix par exemples...) mais toujours en repartant des background initiaux

    Qu'en penses tu ?

    a+
    Jc.

  • DrakenDraken Membre

    J'en pense que c'est facile à faire. Exemple avec un fond en dégradé bleu de 1920x1080 pixels, et deux éléments graphiques collés par dessus :

  • DrakenDraken Membre
    26 août modifié #7

    Un peu de code :

    class UnCollage {
        var image:UIImage?
        var position:CGPoint
    
        init(_ nomImage:String, _ position:CGPoint) {
            self.image = UIImage(named: nomImage)
            self.position = position
        }
    }
    

    extension UIImage {
    
        func faireUncollage(objet:UIImage?, pos:CGPoint) -> UIImage? {
            var image:UIImage?
    
            UIGraphicsBeginImageContext(self.size)
            self.draw(at: CGPoint.zero)
            if let objet = objet {
                objet.draw(at: pos)
            }
            image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
    
        func faireDesCollages(liste:[UnCollage]) -> UIImage? {
            var image:UIImage?
    
            UIGraphicsBeginImageContext(self.size)
            self.draw(at: CGPoint.zero)
            for collage in liste {
                if let objet = collage.image {
                    objet.draw(at: collage.position)
                }
            }
            image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
    
    }
    

    class ViewController: UIViewController {
    
        @IBOutlet weak var imageView: UIImageView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            let imageFond = UIImage(named: "FondEcran")
    
            let listeDesCollages:[UnCollage] = [
                UnCollage("dinosaure", CGPoint(x: 100, y: 200)),
                UnCollage("BigMac",    CGPoint(x: 500, y: 300))]
    
            let imageFinale = imageFond?.faireDesCollages(liste: listeDesCollages)
            imageView.image = imageFinale
    
        }
    
    }
    

    La taille de l'image finale est identique à celle de l'image de fond du début.

    L'imageView ajuste automatiquement la taille de l'image visible en fonction de ses propres dimensions. J'ai défini comme contraintes un écartement de 10 pixels du haut et des marges gauches et droites de l'écran. Et un ratio de 1,777778 (égal à la division de 1920 par 1080), pour respecter la géométrie de l'image.

    As-tu besoin d'explications pour comprendre le code, ou c'est bon comme ça ?

  • Jcb84Jcb84 Membre

    Waouh ! c'est exactement ce que je souhaitais faire :-)
    tu n'avais pas à te fendre du code hein, je cherchais surtout le principe à suivre pour faire simple et efficace mais merci beaucoup pour le coup de main.
    Le code est très clair, t'inquiète cela ira très bien comme ça !

    Merci encore.

    a+
    Jc.

  • DrakenDraken Membre
    26 août modifié #9

    Mon instinct technologique a parfois des ratés.. spectaculaires. Je préfère toujours tester ce que j'avance avec un peu de code, plutôt que de dire des bêtises.
    C'est juste une base de travail. Il te reste pas mal de boulot à faire : afficher des textes, changer la couleur et la taille des objets, etc ..

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