Generation d'un GIF en ASP.NET

Generation d'un GIF en ASP.NET - C#/.NET managed - Programmation

Marsh Posté le 03-05-2010 à 15:24:41    

Bonjour a tous.  :bounce:  
 
Dans le cadre de l'amelioration de l'ergo d'une appli web, je voudrais remplacer un champ texte 'heure' (en affichage) par un petit picto avec une horloge (gain de place). J'ai utilise la classe maison suivante :

Code :
  1. using System;
  2. using System.Collections;
  3. using System.Configuration;
  4. using System.Data;
  5. using System.Linq;
  6. using System.Web;
  7. using System.Web.Security;
  8. using System.Web.UI;
  9. using System.Web.UI.HtmlControls;
  10. using System.Web.UI.WebControls;
  11. using System.Web.UI.WebControls.WebParts;
  12. using System.Xml.Linq;
  13. using System.Drawing;
  14. using System.Drawing.Imaging;
  16. namespace Horloge
  17. {
  18.     public partial class Horloge : System.Web.UI.Page
  19.     {
  20.         const double LG_IMAGE = 19;
  21.         const double HT_IMAGE = 19;
  22.         const double LG_ARC_MINUTE = 7;
  23.         const double LG_ARC_HEURE = 5;
  25.         protected DateTime Tick
  26.         {
  27.             get
  28.             {
  29.                 return new DateTime(long.Parse(Request["ticks"]));
  30.             }
  31.         }
  33.         protected void Page_Load(object sender, EventArgs e)
  34.         {
  35.             this.Response.ClearContent();
  36.             this.Response.ContentType = "image/gif";
  37.             Bitmap lHorloge = new Bitmap((int)LG_IMAGE, (int)HT_IMAGE);
  38.             Pen lPen = new Pen(Color.Red, 1);
  39.             Graphics lGraphics = Graphics.FromImage(lHorloge);
  40.             Rectangle lImage = new Rectangle(1, 1, (int)LG_IMAGE - 2, (int)HT_IMAGE - 2);
  42.             lGraphics.DrawEllipse(lPen, lImage);
  43.             Point lCentre = new Point((int)LG_IMAGE / 2 + 1, (int)HT_IMAGE / 2 + 1);
  44.             lGraphics.DrawRectangle(lPen, new Rectangle((int)lCentre.X, (int)lCentre.Y, 1, 1));
  46.             // Dessin du cadran
  47.             Point[] lHeure = new Point[13];
  48.             Point[] lMinute = new Point[13];
  49.             int lAngleInitial = 270;
  50.             for (int i = 0; i < 13; i++)
  51.             {
  52.                 lMinute[i] = new Point(
  53.                     (int)Math.Floor((Math.Cos(Math.PI * (lAngleInitial) / 180) * LG_ARC_MINUTE + LG_IMAGE / 2 + 1)),
  54.                     (int)Math.Floor((Math.Sin(Math.PI * (lAngleInitial) / 180) * LG_ARC_MINUTE + HT_IMAGE / 2 + 1)));
  55.                 lHeure[i] = new Point(
  56.                     (int)Math.Floor((Math.Cos(Math.PI * (lAngleInitial) / 180) * LG_ARC_HEURE + LG_IMAGE / 2 + 1)),
  57.                     (int)Math.Floor((Math.Sin(Math.PI * (lAngleInitial) / 180) * LG_ARC_HEURE + HT_IMAGE / 2 + 1)));
  58.                 if ((i % 3) == 0)
  59.                 {
  60.                     lGraphics.DrawRectangle(lPen, new Rectangle((int)lMinute[i].X, (int)lMinute[i].Y, 1, 1));
  61.                 }
  63.                 lAngleInitial += 30;
  64.             }
  65.             // Dessin des aiguilles
  66.             int lMinutesParam = Tick.Minute;
  67.             int lHeuresParam = Tick.Hour;
  69.             lGraphics.DrawLine(new Pen(Color.Yellow), lCentre, lMinute[lMinutesParam / 5]);
  70.             lGraphics.DrawLine(new Pen(Color.Red), lCentre, lHeure[lHeuresParam % 12]);
  72.             lHorloge.Save(this.Response.OutputStream, ImageFormat.Gif);
  73.             this.Response.End();
  74.         }
  76.         protected override void Render(HtmlTextWriter writer)
  77.         {
  78.         }
  79.     }
  80. }


Je sais que ce n'est pas optimise (calculs maths alors que je n'ai pas besoin de tous les points) mais ce n'est pas le probleme (pour le moment, j'optimiserai si necessaire).  
Ce truc fonctionne a peu pres bien si ce n'est que je me retrouve avec un fond noir sur mon image alors que je n'ai specifie ca nulle part et que je n'arrive meme pas a peindre un rectangle blanc avant de dessiner mon horloge pour eviter ca.  :pt1cable:  
Qu'ai-je donc loupe pour ne pas pouvoir definir la couleur de fond (ou a defaut de la transparence) pour ce petit GIF tres primaire ?  :ange:  
 
Merci d'avance.
 
Fred.
 
edit : je precise l'appel : dans un aspx  

Code :
  1. <img src="horloge.aspx?DateTime.Now.Ticks=0" alt='Heure <%= DateTime.Now.ToString("HH:mm" ); %>" />


par ex.


Message édité par fred777888999 le 03-05-2010 à 15:30:03
Reply

Marsh Posté le 03-05-2010 à 15:24:41   

Reply

Marsh Posté le 03-05-2010 à 15:56:16    

Il te manque apres la création de ton graphic qqch du genre :
SolidBrush pinceauFond = new SolidBrush(Color.White);
graphic.FillRectangle(pinceauFond, 0, 0, largeur, longueur);


---------------
Topic .Net - C# @ Prog
Reply

Marsh Posté le 03-05-2010 à 16:00:04    

J'ai essaye ces lignes de code avant de poster, j'avais un joli gif tout noir :( C'etait le sens de ma remarque 'je n'arrive meme pas a peindre un rectangle blanc...' :(

Reply

Marsh Posté le 03-05-2010 à 16:05:28    

comment ça ? :heink:
Je t'assure que le code extrêmement simple que je t'ai donné fonctionne.  
Essaie de décomposer tout appli si tu ne t'en sors pas, là le code est un peu entremêlé.
- Construction du bmp
- Creation du fond
- Creation du cadran
- Aiguilles
(c'est un exemple)
Et tu peux faire des Save de ton bitmap dans un fichier différent entre chaque étape pour voir l'évolution. Et ne passe pas forcément par ton navigateur, fais des vrais fichiers.


---------------
Topic .Net - C# @ Prog
Reply

Marsh Posté le 03-05-2010 à 16:23:15    

Ben oui, quand je mets le code  

Code :
  1. Graphics lGraphics = Graphics.FromImage(lHorloge);
  2.   Rectangle lImage = new Rectangle(1, 1, (int)LG_IMAGE - 2, (int)HT_IMAGE - 2);
  3.   SolidBrush lBrushWhite = new SolidBrush(Color.White);
  4.   Pen lPenWhite = new Pen(lBrushWhite);
  6.   lGraphics.DrawRectangle(lPenWhite, lImage);
  7.   lGraphics.DrawEllipse(lPen, lImage);
  8.   Point lCentre = new Point((int)LG_IMAGE / 2 + 1, (int)HT_IMAGE / 2 + 1);


J'ai tj mon image sur fond noir. Ce qui doit chier (je pense) est l'utilisation du pen pour l'elipse qui doit avoir une couleur de fond (noir) et qui du coup me dessine mon cercle sur fond noir lors de l'instruction :

Code :
  1. lGraphics.DrawEllipse(lPen, lImage);


mais je n'ai pas trouve de signature au constructeur du crayon qui me permet de definir une couleur de fond :(

Reply

Marsh Posté le 03-05-2010 à 16:31:44    

Je suis un boulet... Pas drawRectangle (qui ne sert a rien) mais fillRectangle bien sur. Le reste etait Ok, c'est la dessus que j'avais zappe depuis le debut.
Merci.

Reply

Marsh Posté le 03-05-2010 à 17:16:34    

Pour clore definitivement le sujet, la version a peu pres optimisee :

Code :
  1. using System;
  2. using System.Web;
  3. using System.Drawing;
  4. using System.Drawing.Imaging;
  5. using System.Web.UI;
  7. public partial class UI_Horloge : System.Web.UI.Page
  8. {
  9.  const double LG_IMAGE = 19;
  10.  const double HT_IMAGE = 19;
  11.  const double LG_ARC_MINUTE = 8;
  12.  const double LG_ARC_HEURE = 5;
  14.  protected DateTime _Tick = null;
  15.  protected DateTime Tick
  16.  {
  17.   get
  18.   {
  19.    if (_Tick == null)
  20.    {
  21.     _Tick = new DateTime(long.Parse(Request["ticks"]));
  22.    }
  23.    return _Tick;
  24.   }
  25.  }
  27.  protected void Page_Load(object sender, EventArgs e)
  28.  {
  29.   this.Response.ClearContent();
  30.   this.Response.ContentType = "image/gif";
  31.   Bitmap lHorloge = new Bitmap((int)LG_IMAGE+1, (int)HT_IMAGE+1);
  32.   Pen lPen = new Pen(Color.Black, 1);
  34.   Graphics lGraphics = Graphics.FromImage(lHorloge);
  35.   Rectangle lImage = new Rectangle(0, 0, (int)LG_IMAGE, (int)HT_IMAGE);
  36.   SolidBrush lBrushWhite = new SolidBrush(Color.White);
  38.   lGraphics.FillRectangle(lBrushWhite, new Rectangle(0,0,(int)LG_IMAGE+1, (int)HT_IMAGE+1));
  39.   lGraphics.DrawEllipse(lPen, lImage);
  40.   Point lCentre = new Point((int)LG_IMAGE / 2, (int)HT_IMAGE / 2);
  41.   lGraphics.DrawRectangle(lPen, new Rectangle((int)lCentre.X, (int)lCentre.Y, 1, 1));
  43.   // Dessin du cadran  
  44.   for (int i = 0; i < 13; i += 3)
  45.   {
  46.    lGraphics.DrawRectangle(lPen,
  47.      (int)Math.Floor((Math.Cos(Math.PI * (270 + i * 30) / 180) * LG_ARC_MINUTE + LG_IMAGE / 2)),
  48.      (int)Math.Floor((Math.Sin(Math.PI * (270 + i * 30) / 180) * LG_ARC_MINUTE + HT_IMAGE / 2)),
  49.      1,
  50.      1
  51.    );
  52.   }
  54.   // Dessin des aiguilles  
  55.   Point lMinute =
  56.   new Point(
  57.    (int)Math.Floor((Math.Cos(Math.PI * (270 + Tick.Minute * 6) / 180) * LG_ARC_MINUTE + LG_IMAGE / 2)),
  58.    (int)Math.Floor((Math.Sin(Math.PI * (270 + Tick.Minute * 6) / 180) * LG_ARC_MINUTE + HT_IMAGE / 2)));
  60.   Point lHeure = new Point(
  61.    (int)Math.Floor((Math.Cos(Math.PI * (270 + Tick.Hour * 30) / 180) * LG_ARC_HEURE + LG_IMAGE / 2)),
  62.    (int)Math.Floor((Math.Sin(Math.PI * (270 + Tick.Hour * 30) / 180) * LG_ARC_HEURE + HT_IMAGE / 2)));
  64.   lGraphics.DrawLine(new Pen(Color.Red), lCentre, lMinute);
  65.   lGraphics.DrawLine(new Pen(Color.Blue), lCentre, lHeure);
  67.   lHorloge.Save(this.Response.OutputStream, ImageFormat.Gif);
  68.   this.Response.End();
  69.  }
  71.  protected override void Render(HtmlTextWriter writer)
  72.  {
  73.  }
  74. }

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed