Dessiner sur une image...

Réponses

• Draken Membre

  août 2018 #2

  @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.
• Jcb84 Membre

  août 2018 #3

  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 ?
• Draken Membre

  août 2018 #4

  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 ?
• Jcb84 Membre

  août 2018 #5

  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.
• Draken Membre

  août 2018 #6

  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 :

  
• Draken Membre

  août 2018 août 2018 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 ?
• Jcb84 Membre

  août 2018 #8

  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.
• Draken Membre

  août 2018 août 2018 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 ..