Étudier la classe CCanvas. Comment dessiner des objets transparents

MetaTrader 5 — Exemples | 13 janvier 2022, 16:26

257

Vladimir Karputov

Table des matières

Introduction

Dessiner dans MetaTrader 5 est simple et vous n'avez besoin de connaître que quelques nuances. L'une des nuances est la façon dont l'écran du terminal est conçu. Plus précisément, nous nous intéressons à la manière dont les graphiques sont affichés à l'écran. Par exemple, un graphique peut être affiché au premier plan ou en arrière-plan. La sortie couleur à l'écran dépendra de l'affichage de la carte. Certains objets graphiques peuvent changer de couleur dans les zones de chevauchement ou d'intersection.

Avant de passer directement au dessin à l'aide de la classe CCanvas, analysons quelques définitions liées au traitement des couleurs. Par exemple, découvrons la signification du canal Alpha.

À mon avis, la mise en œuvre de la transparence est la technologie la plus importante, qui peut vivifier une image. Par exemple, la transparence peut être utilisée pour implémenter une interface plus attrayante avec une transition de couleur ou des ombres douces. L'ombre ajoute de la dimension à un objet graphique et adoucit visuellement les bords de l'objet.

1. Transparence (canal Alpha)

Nous vivons dans un monde en trois dimensions et percevons tout ce qui nous entoure en trois dimensions. Nous avions l'habitude de voir ou même de ressentir la tridimensionnalité. Dans le monde tridimensionnel, nous pouvons comprendre lequel des objets est le plus proche de nous.

Certains objets peuvent être translucides. Par exemple, prenez un verre transparent contenant un liquide translucide sur fond bleu. Le fond bleu est visible à travers le verre avec du liquide. Les détails de l'arrière-plan dépendent du degré de transparence du liquide.

Fig. 1 Vue commune de la dimensionnalité

La transparence dans cet exemple n'est ni virtuelle ni illusoire. La transparence dans ce cas est considérée comme une évidence.

C'est tout différent lorsqu'une image est affichée sur un écran d'ordinateur - la matrice de pixels est bidimensionnelle, c'est-à-dire que l'image affichée par la matrice a une hauteur et une largeur, mais n'a pas la troisième option de profondeur. Il n'est donc pas possible de positionner un pixel sur un autre simulant la situation où le pixel inférieur est un fond jaune, et le pixel supérieur est le verre translucide. Toute image d'un objet tridimensionnel et réaliste sur l'écran est une illusion, qui est obtenue grâce à l'utilisation de la couleur et de l'ombre.

Voyons l'exemple d'une image qui peut être divisée en deux couches : la couche inférieure, qui est un fond bleu et la couche supérieure, qui est un verre avec un liquide opaque. Voici à quoi cela ressemble à l'écran :

Fig. 2. Verre opaque

Sur l'image résultante, le verre est complètement opaque. Pour ajouter (modifier) la transparence, nous devons traduire toutes les couleurs de l'image en représentation des couleurs ARGB.

2. Représentation des couleurs ARGB

Je n'ai pas oublié la transparence du verre. La question sera discutée en détail dans la deuxième partie.

La représentation des couleurs ARGB est un uintde type à quatre octets, dans lequel les valeurs suivantes sont enregistrées : un canal alpha, rouge, vert, bleu. C'est-à-dire que pour conférer de la transparence à la couleur au format , un octetsupplémentaire avec une valeur de transparence qui est un canal alpha est ajouté.

Fig. 3. ARGB

Fig. 3. ARG

La valeur d'un canal alpha est définie de 0 (une couleur d'un pixel de premier plan ne modifie pas l'affichage d'un sous-jacent) jusqu'à 255 (une couleur d'un pixel sous-jacent est complètement remplacée par celle du pixel de premier plan). La transparence des couleurs en termes de pourcentage est calculée comme suit :

En d'autres termes, la plus petite valeur du canal alpha conduit à une couleur plus transparente. Si nous connaissons la transparence souhaitée, la valeur alpha peut être calculée comme suit :

La fonction ColorToARGB(couleur, alpha)) est utilisée pour convertir la couleur en ARGB.

3. Le schéma de dessin d'objets dans le terminal

Pour mieux comprendre comment la couleur est traitée, considérons le schéma de l'arrangement mutuel des objets graphiques avec deux versions dans la configuration du graphique : le graphique en arrière-plan et le graphique au premier plan.

3.1. Graphique en arrière-plan

Pour cocher cette option, faites un clic droit sur le graphique, puis sélectionnez «Propriétés...» dans le menu déroulant et allez dans l'onglet «Commun».

Fig. 4. Graphique en arrière-plan

Une fenêtre graphique dans le terminal se compose de quatre couches. Vous pouvez dessiner sur les deux couches extrêmes («Arrière-plan» et «Premier plan») : :

Fig. 5. Le schéma de la fenêtre graphique

En arrière-plan et au premier plan, un objet dessiné se superpose à un autre en fonction de leur temps de création.

C'est-à-dire que les objets les plus anciens seront situés au tout dernier calque du «Arrière-plan» et au tout dernier calque du «Premier plan». Les objets plus jeunes apparaîtront sur le dessus.

Fig. 6. Emplacement des objets en fonction de la période de création

Fig. 6. Localisation des objets en fonction de la période de création

Tous les objets ne peuvent pas se chevaucher complètement, sans repeindre dans le ou les champs où ils se chevauchent avec les objets graphiques sous-jacents.

Le tableau ci-dessous résume les caractéristiques des objets graphiques suivi d'une explication du chevauchement des objets qui sont repeints au niveau des zones de chevauchement.

ID	Description	Chevauchement avec un objet sous-jacent
OBJ_VLINE	Ligne Verticale	Pas de repeinture
OBJ_HLINE	Ligne Horizontale	Pas de repeinture
OBJ_TREND	Ligne de tendance.	Pas de repeinture
OBJ_TRENDBYANGLE	Ligne de Tendance par Angle	Pas de repeinture
OBJ_CYCLES	Lignes de Cycle	Pas de repeinture
OBJ_ARROWED_LINE	Ligne Fléchée	Pas de repeinture
OBJ_CHANNEL	Canal Equidistant	Pas de repeinture
OBJ_STDDEVCHANNEL	Canal de Déviation Standard	Pas de repeinture
OBJ_REGRESSION	Canal de régression linéaire	Pas de repeinture
OBJ_PITCHFORK	Fourchette d'Andrews	Pas de repeinture
OBJ_GANNLINE	Ligne de Gann	Pas de repeinture
OBJ_GANNFAN	Eventail de Gann	Pas de repeinture
OBJ_GANNGRID	Grille de Gann	Pas de repeinture
OBJ_FIBO	Retracements de Fibonacci	Pas de repeinture
OBJ_FIBOTIMES	Périodes de Fibonacci	Pas de repeinture
OBJ_FIBOFAN	Eventail de Fibonacci	Pas de repeinture
OBJ_FIBOARC	Arcs de Fibonacci	Pas de repeinture
OBJ_FIBOCHANNEL	Canal de Fibonacci	Pas de repeinture
OBJ_EXPANSION	Expansion de Fibonacci	Pas de repeinture
OBJ_ELLIOTWAVE5	Elliott Waves - 5	Pas de repeinture
OBJ_ELLIOTWAVE3	Elliott Waves - 3	Pas de repeinture
OBJ_RECTANGLE	Rectangle	Pas de repeinture si pas de remplissage, repeindre si rempli
OBJ_TRIANGLE	Triangle	Pas de repeinture si pas de remplissage, repeindre si rempli
OBJ_ELLIPSE	Ellipse	Pas de repeinture si pas de remplissage, repeindre si rempli
OBJ_ARROW_THUMB_UP	Pouce en l'air	Pas de repeinture
OBJ_ARROW_THUMB_DOWN	Pouce vers le bas	Pas de repeinture
OBJ_ARROW_UP	Flèche vers le Haut	Pas de repeinture
OBJ_ARROW_DOWN	Tableau bas	Pas de repeinture
OBJ_ARROW_STOP	Arrêter	Pas de repeinture
OBJ_ARROW_CHECK	Coche	Pas de repeinture
OBJ_ARROW_LEFT_PRICE	Etiquette de prix à gauche	Pas de repeinture
OBJ_ARROW_RIGHT_PRICE	Etiquette de prix à droite	Pas de repeinture
OBJ_ARROW_BUY	Marque d'achat	Pas de repeinture
OBJ_ARROW_SELL	Marque de vente	Pas de repeinture
OBJ_ARROW	Objet flèche.	Pas de repeinture
OBJ_TEXT	Objet Texte.	Pas de repeinture
OBJ_LABEL	Objet Etiquette.	Pas de repeinture
OBJ_BUTTON	Objet bouton.	Pas de repeinture
OBJ_CHART	Objet Graphique.	Pas de repeinture
OBJ_BITMAP	Objet Bitmap.	Pas de repeinture
OBJ_BITMAP_LABEL	Objet étiquette Bitmap.	Pas de repeinture
OBJ_EDIT	Objet d'Édition.	Pas de repeinture
OBJ_EVENT	L'objet Evénement qui correspond à un événement du Calendrier Economique	Pas de repeinture
OBJ_RECTANGLE_LABEL	L'objet est utilisé pour créer et concevoir une interface graphique personnalisée.	Pas de repeinture

Table 1 Superposition et transparence des objets graphiques

Voyons l'exemple de trois objets de type OBJ_RECTANGLE (rectangles) et discutons de l'algorithme de repeinture dans les zones de chevauchement d'objets qu'il faut repeindre (fichier xor.mq5).

Le script (fichier xor.mq5) définit la couleur de fond blanc (0xFFFFFF) et dessine les rectangles remplis №1 et №2 en bleu (0x0000FF), le rectangle №3 est rouge (0xFF0000) et rempli.

Fig. 7. Repeindre. Graphique en arrière-plan

Nous avons deux zones d'intersection, dans lesquelles la couleur a changé :

Zone №1 – la couleur résultante (0x000000) est entièrement transparente, donc dans la zone №1, nous voyons un arrière-plan et un graphique inchangés ;
Zone №2 – couleur résultante (0x00FF00).

Lorsque des objets graphiques tels que des rectangles se chevauchent, ils sont repeints par l'algorithme du Bitwise OR

La figure 6 ci-dessous montre un exemple de repeinture des couleurs pour les deux zones :

Représentation littérale	Représentation entière	Représentation binaire	Remarque
C’0,0,255’	0x0000FF	0000 0000 0000 0000 1111 1111	Bleu
		XOR
C’0,0,225’	0x0000FF	0000 0000 0000 0000 1111 1111	Bleu
		=
C’0,0,0’	0x000000	0000 0000 0000 0000 0000 0000	Transparent
		XOR
C=255,255,255;	0xFFFFFF	1111 1111 1111 1111 1111 1111	Fond blanc)
		=
C=255,255,255;	0xFFFFFF	1111 1111 1111 1111 1111 1111	Blanc

Table 2. Bitwise OR pour Bleu + Bleu + Blanc

Représentation littérale	Représentation entière	Représentation binaire	Remarque
C’0,0,255’	0x0000FF	0000 0000 0000 0000 1111 1111	Bleu
		XOR
C’255,0,0’	0xFF0000	1111 1111 0000 0000 0000 0000	Rouge
		=
С’255,0,255’	0xFF00FF	1111 1111 0000 0000 1111 1111
		XOR
C=255,255,255;	0xFFFFFF	1111 1111 1111 1111 1111 1111	Fond blanc)
		=
'0,255,0'	0x00FF00	0000 0000 1111 1111 0000 0000

Table 3. Bitwise OR pour Bleu + Rouge + Blanc

3.2. Graphique au premier plan

Lorsque le paramètre « Graphique au premier plan » est activé, la disposition des couches de la fenêtre graphique diffère de celle du graphique en arrière-plan :

Fig. 8. Schéma de la fenêtre graphique. Graphique en haut

Lorsque l'option « Graphique au premier plan » est activée, deux calques de dessin « Premier plan » et « Arrière-plan » fusionnent en un seul calque commun. Cette couche commune se trouve sous les couches avec des barres et une grille.

3.3. Repeindre pour « Graphique en haut »

Comme sur la figure 7, nous considérons l'algorithme de repeinture au niveau du chevauchement des objets qui sont repeints (fichier xor.mq5).

Le script (fichier xor.mq5) définit la couleur de fond blanc (0xFFFFFF) et dessine les rectangles remplis №1 et №2 en bleu (0x0000FF), le rectangle №3 est rouge (0xFF0000) et rempli.

Fig. 9. Repeindre. Graphique au premier plan

Si nous comparons les figures 7 et 9, nous voyons que les zones de chevauchement sont repeintes de manière égale.

4. Mélange de couleurs résultante

Comme mentionné ci-dessus, la transparence sur l'écran est une illusion. Manipulation des couleurs. Pour simuler la figure 2 à l'écran, il suffit de comprendre comment afficher une couleur avec transparence à l'écran. C'est-à-dire que nous devons calculer la couleur résultante du pixel.

Supposons que nous voulions dessiner du rouge avec le canal alpha 128 sur une toile sur un fond blanc (fond de graphique dans le jeu de couleurs «Noir sur blanc»). Au format ARGB, la couleur est 0x80FF0000. Pour calculer la couleur résultante, nous devons calculer la couleur de chacun des canaux (Rouge, Vert, Bleu).

Voici la formule pour calculer la couleur résultante avec un canal alpha appliqué à la couleur, normalisé à un :

Avec :

résultat est la valeur résultante de l'intensité du canal de couleur. Si la valeur est supérieure à 255, elle renvoie 255.
arrière plan est la valeur du canal de couleur de fond.
premier plan est la valeur du canal de couleur de l'image superposée.
alpha est une valeur alpha normalisée à un.

Calculons la couleur résultante selon la formule (1.3):

Canal alpha	Canal alpha, normalisé à «1»	R	G	B	Remarque
		255	255	255	Blanc
128	0,5	255	0	0	Rouge avec alpha 128
		255(1-0.5)+2550.5=255	255(1-0.5)+00.5=127	255(1-0.5)+00.5=127

Table 4. Résultats du calcul utilisant la formule (1.3)

La couleur résultante à l'écran est la suivante :

Fig. 10. Couleur résultante

4.1. [in] Méthode de traitement de la couleur. ENUM_COLOR_FORMAT

Lors de la création d'un canevas, vous pouvez spécifier l'une des trois méthodes de traitement des couleurs (ENUM_COLOR_FORMAT):

ID	Description
COLOR_FORMAT_XRGB_NOALPHA	Le composant alpha est ignoré
COLOR_FORMAT_ARGB_RAW	Les composants de couleur ne sont pas traités par le terminal (ils doivent être correctement spécifiés par l'utilisateur)
COLOR_FORMAT_ARGB_NORMALIZE	Les composants de couleur sont traités par le terminal

Table 5. Méthodes de traitement des couleurs pour la création de toiles

COLOR_FORMAT_ARGB_NORMALIZE fournit une image plus belle en prenant en compte la superposition correcte des composants RVB. La couleur résultante lors de l'application de la couleur avec un canal alpha est calculée selon la formule (1.3).

COLOR_FORMAT_ARGB_RAW ne contrôle pas le débordement des composants RVB d'une couleur, donc COLOR_FORMAT_ARGB_RAW est une méthode plus rapide par rapport à COLOR_FORMAT_ARGB_NORMALIZE.

Voici la formule de calcul de la couleur résultante avec un canal alpha appliqué à la couleur normalisée à un, pour la méthode COLOR_FORMAT_ARGB_RAW :

Avec :

résultat est la valeur résultante de l'intensité du canal de couleur. Si la valeur est supérieure à 255, elle renvoie 255.
arrière plan est la valeur du canal de couleur de fond.
premier plan est la valeur du canal de couleur de l'image superposée.
alpha est une valeur alpha normalisée à un.

5. L'illusion de la transparence

Nous pouvons maintenant passer à la mise en œuvre pratique de la transparence.

Dessinons un certain nombre de rectangles remplis (script «xor.mq5»). Pour illustrer la différence des méthodes de traitement des couleurs, appliquons trois toiles horizontales qui ne se chevauchent pas en haut du graphique.

Le premier est traité à l'aide de COLOR_FORMAT_XRGB_NOALPHA, le second - COLOR_FORMAT_ARGB_RAW et le troisième - COLOR_FORMAT_ARGB_NORMALIZE. Ensuite, nous changeons progressivement la transparence de 255 (entièrement opaque) à 0 (entièrement transparente). Appelons notre script «Illusion.mq5».

La vidéo montre comment fonctionne le script «Illusion.mq5»:

Fig. 11. Travail de script illusion.mq5

5.1. Création du script «Illusion.mq5»

Les parties de code nouvelles ou modifiées sont mises en évidence.

Le modèle de script vide :

//+------------------------------------------------------------------+
//|                                                     Illusion.mq5 |
//|                              Copyright © 2015, Vladimir Karputov |
//|                                           http://wmua.ru/slesar/ |
//+------------------------------------------------------------------+
#property copyright "Copyright © 2015, Vladimir Karputov"
#property link      "http://wmua.ru/slesar/"
#property version   "1.0"
//+------------------------------------------------------------------+
//| Script program start function                                    |
//+------------------------------------------------------------------+
void OnStart()
  {
//---
  }

Ajoutons la description du script, une option pour entrer des paramètres lors du démarrage du script, et connectons la classe CCanvas , qui permet de dessiner :

#property version   "1.0"
#property description "The illusion of transparency"
//--- show the window of input parameters when launching the script
#property script_show_inputs
#include <Canvas\Canvas.mqh>

L'opération de script nécessite un certain nombre de variables - hauteur et largeur du graphique, hauteur et largeur du canevas, ainsi que des variables auxiliaires pour dessiner les coordonnées du canevas :

#include <Canvas\Canvas.mqh>

//+------------------------------------------------------------------+
//| inputs                                                           |
//+------------------------------------------------------------------+
input color colr=clrRed;
input color clr_Circle=clrBlue;
//--- variable width and height of the chart.
int            ChartWidth=-1;
int            ChartHeight=-1;
//---
uchar alpha=0;                //alpha channel managing color transparency
int   can_width,can_height;   //width and height of the canvas
int   can_x1,can_y1,can_x2,can_y2,can_y3,can_x3;   //coordinates

Pour recevoir la largeur et la hauteur du graphique, nous utilisons des fonctions standards:


//+------------------------------------------------------------------+
//| Script program start function                                    |
//+------------------------------------------------------------------+
void OnStart()
  {
//---
  }

//+------------------------------------------------------------------+
//| Chart property width                                             |
//+------------------------------------------------------------------+
int ChartWidthInPixels(const long chart_ID=0)
  {
//--- prepare the variable to get the property value
   long result=-1;
//--- reset the error value
   ResetLastError();
//--- receive the property value
   if(!ChartGetInteger(chart_ID,CHART_WIDTH_IN_PIXELS,0,result))
     {
      //--- display the error message in Experts journal
      Print(__FUNCTION__+", Error Code = ",GetLastError());
     }
//--- return the value of the chart property
   return((int)result);
  }
//+------------------------------------------------------------------+
//| Chart property height                                            |
//+------------------------------------------------------------------+
int ChartHeightInPixelsGet(const long chart_ID=0,const int sub_window=0)
  {
//--- prepare the variable to get the property value
   long result=-1;
//--- reset the error value
   ResetLastError();
//--- receive the property value
   if(!ChartGetInteger(chart_ID,CHART_HEIGHT_IN_PIXELS,sub_window,result))
     {
      //--- display the error message in Experts journal
      Print(__FUNCTION__+", Error Code = ",GetLastError());
     }
//--- return the value of the chart property
   return((int)result);
  }

Accédez directement à OnStart().

Pour plus de clarté, la figure 12 montre la disposition des canevas sur le graphique et les variables auxiliaires pour les coordonnées du canevas :

Fig. 12. Coordonnées sur la carte

Trouvons la hauteur et la largeur du graphique et calculons les variables auxiliaires pour les coordonnées du canevas :

void OnStart()
  {
//--- width and height of the chart
   ChartWidth=ChartWidthInPixels();
   ChartHeight=ChartHeightInPixelsGet()-50;
//---
   can_width=ChartWidth/3;   can_height=ChartHeight;
   can_x1=0;            can_y1=0;
   can_x2=can_width;    can_y2=0;
   can_x3=can_width*2;  can_y3=0;
  }

Avec la largeur et la hauteur calculées de la toile et les coordonnées auxiliaires, nous pouvons commencer à dessiner.

Modifions ensuite le type de vide de la fonction OnStart() en int et dessinons sur le premier canevas un rectangle rempli, un texte avec le nom de la méthode de traitement des couleurs du canevas et un cercle plein :

int OnStart()
  {
//--- width and height of the chart
   ChartWidth=ChartWidthInPixels();
   ChartHeight=ChartHeightInPixelsGet()-50;
//---
   can_width=ChartWidth/3;   can_height=ChartHeight;
   can_x1=0;            can_y1=0;
   can_x2=can_width;    can_y2=0;
   can_x3=can_width*2;  can_y3=0;
//--- create canvas COLOR_FORMAT_XRGB_NOALPHA
   CCanvas canvas_XRGB_NOALPHA,canvas_ARGB_RAW,canvas_XARGB_NORMALIZE;
   if(!canvas_XRGB_NOALPHA.CreateBitmapLabel("canvas_XRGB_NOALPHA",can_x1,can_y1,can_width-1,can_height,COLOR_FORMAT_XRGB_NOALPHA))
     {
      Print("Error creating canvas: ",GetLastError());
      return(-1);
     }
   canvas_XRGB_NOALPHA.Erase(ColorToARGB(colr,alpha));
   canvas_XRGB_NOALPHA.TextOut((can_width)/2,can_height/2,"canvas_XRGB_NOALPHA",ColorToARGB(clrBlue,255),TA_CENTER|TA_VCENTER);
   canvas_XRGB_NOALPHA.FillCircle((can_width)/2,can_height/2+50,25,ColorToARGB(clr_Circle,255));
   canvas_XRGB_NOALPHA.Update();
   return(0);
  }

Plus de détails sur la dernière partie de code ajoutée.

canvas_XRGB_NOALPHA.CreateBitmapLabel("canvas_XRGB_NOALPHA",can_x1,can_y1,can_width-1,can_height,COLOR_FORMAT_XRGB_NOALPHA)

canvas_XRGB_NOALPHA.CreateBitmapLabel- Ici, nous créons une ressource graphique liée à un objet graphique.

La méthode de traitement des couleurs du premier canevas est COLOR_FORMAT_XRGB_NOALPHA - la composante alpha est ignorée.

canvas_XRGB_NOALPHA.Erase(ColorToARGB(colr,alpha));

Remplit toute la toile avec une couleur au format ARGB avec la transparence alpha.

Le canevas sera rempli en ignorant le canal alpha, car la méthode COLOR_FORMAT_XRGB_NOALPHA pour le traitement des couleurs est utilisée ici.

canvas_XRGB_NOALPHA.TextOut((can_width)/2,can_height/2,"canvas_XRGB_NOALPHA",ColorToARGB(clrBlue,255),TA_CENTER|TA_VCENTER);

Sortie de texte - le type de traitement d'image pour le canevas. La couleur du texte est au format ARGB et le canal alpha de 255, c'est-à-dire que la couleur du texte affiché est complètement opaque.

Le texte affiché est aligné horizontalement (TA_CENTER) et verticalement (TA_VCENTER) au centre du rectangle.

canvas_XRGB_NOALPHA.FillCircle((can_width)/2,can_height/2+50,25,ColorToARGB(clr_Circle,255));

Peindre un cercle rempli. Nous allons dessiner le cercle sur la couleur, qui remplit le canevas (canvas_XRGB_NOALPHA.Erase(ColorToARGB(colr, alpha));).

Il s'agit de montrer qu'une forme dessinée sur le canevas (ou une zone/un point) recouvre complètement une image sous-jacente sur le canevas. C'est-à-dire qu'il n'y a pas de repeinture sur la toile, puisque le dernier dessin couvre complètement la zone sous-jacente.

canvas_XRGB_NOALPHA.Update();

Pour afficher tous les objets dessinés à l'écran, nous devons rafraîchir l'écran.

Les deux autres toiles sont dessinées de la même manière : la toile avec le mode d'affichage COLOR_FORMAT_ARGB_RAW et la troisième avec COLOR_FORMAT_ARGB_NORMALIZE :

   canvas_XRGB_NOALPHA.Update();

//--- create canvas COLOR_FORMAT_ARGB_RAW
   if(!canvas_ARGB_RAW.CreateBitmapLabel("canvas_ARGB_RAW",can_x2,can_y2,can_width-1,can_height,COLOR_FORMAT_ARGB_RAW))
     {
      Print("Error creating canvas: ",GetLastError());
      return(-1);
     }
   canvas_ARGB_RAW.Erase(ColorToARGB(colr,alpha)); //clrNONE,0));
   canvas_ARGB_RAW.TextOut((can_width)/2,can_height/2,"canvas_ARGB_RAW",ColorToARGB(clrBlue,255),TA_CENTER|TA_VCENTER);
   canvas_ARGB_RAW.FillCircle((can_width)/2,can_height/2+50,25,ColorToARGB(clr_Circle,255));
   canvas_ARGB_RAW.Update();

//--- create canvas COLOR_FORMAT_ARGB_NORMALIZE
   if(!canvas_XARGB_NORMALIZE.CreateBitmapLabel("canvas_XARGB_NORMALIZE",can_x3,can_y3,can_width-1,can_height,COLOR_FORMAT_ARGB_NORMALIZE))
     {
      Print("Error creating canvas: ",GetLastError());
      return(-1);
     }
   canvas_XARGB_NORMALIZE.Erase(ColorToARGB(colr,alpha));
   canvas_XARGB_NORMALIZE.TextOut((can_width)/2,can_height/2,"canvas_XARGB_NORMALIZE",ColorToARGB(clrBlue,255),TA_CENTER|TA_VCENTER);
   canvas_XARGB_NORMALIZE.FillCircle((can_width)/2,can_height/2+50,25,ColorToARGB(clr_Circle,255));
   canvas_XARGB_NORMALIZE.Update();
   return(0);
  }

Le canevas et les objets graphiques dans les canevas ont été dessinés.

Ajoutons maintenant la boucle, qui changera la transparence de l'ensemble du canevas :

   canvas_XARGB_NORMALIZE.FillCircle((can_width)/2,can_height/2+50,25,ColorToARGB(clr_Circle,255));
   canvas_XARGB_NORMALIZE.Update();
   //--- transparent from 255 to 0
   uchar transparent;
   for(transparent=255;transparent>0;transparent--)
     {
      canvas_XRGB_NOALPHA.TransparentLevelSet(transparent);
      canvas_XRGB_NOALPHA.Update();
      canvas_ARGB_RAW.TransparentLevelSet(transparent);
      canvas_ARGB_RAW.Update();
      canvas_XARGB_NORMALIZE.TransparentLevelSet(transparent);
      canvas_XARGB_NORMALIZE.Update();
      Sleep(50);
     }
   canvas_XRGB_NOALPHA.TransparentLevelSet(transparent);
   canvas_XRGB_NOALPHA.Update();
   canvas_ARGB_RAW.TransparentLevelSet(transparent);
   canvas_ARGB_RAW.Update();
   canvas_XARGB_NORMALIZE.TransparentLevelSet(transparent);
   canvas_XARGB_NORMALIZE.Update();
   Sleep(6000);
   return(0);
  }

La transparence de toutes les toiles est modifiée à l'aide des lignes de code :

.TransparentLevelSet(transparent)

Après la fin du dessin, nous devons nettoyer, c'est-à-dire supprimer les ressources graphiques.

Puisque nous avons créé les ressources graphiques en référence à l'objet graphique (méthode CreateBitmapLabel), supprimons la ressource à l'aide de la méthode Destroy(), qui supprimera également l'objet graphique (Bitmap Label) :

   canvas_XARGB_NORMALIZE.Update();
   Sleep(6000);
   //--- finish
   canvas_XRGB_NOALPHA.Destroy();
   canvas_ARGB_RAW.Destroy();
   canvas_XARGB_NORMALIZE.Destroy();
   return(0);
  }

Le script qui modifie en douceur la transparence fonctionne.

La différence entre les modes COLOR_FORMAT_ARGB_RAW et COLOR_FORMAT_ARGB_NORMALIZE est mieux visible si vous exécutez d'abord le script sur l'arrière-plan du graphique blanc, puis en noir.

Conclusion

L'article couvre les bases du travail avec la couleur. Nous avons appris à dessiner des objets dans une fenêtre graphique. L'article traite également des bases de l'utilisation de la classe CCanvasde la bibliothèque Standard et du format ARGB de représentation des couleurs avec transparence.

Ce ne sont que les bases, et il y a encore beaucoup plus d'opportunités à explorer pour créer divers effets graphiques dans le terminal MetaTrader 5. Cet article traite de la transparence : c'est la transparence partielle qui donne la forme la plus attractive pour le contour des objets graphiques. En raison du caractère bidimensionnel des moniteurs, la transparence dans le graphique est une illusion obtenue par le traitement des pixels.

Traduit du russe par MetaQuotes Ltd.
Article original : https://www.mql5.com/ru/articles/1341

Fichiers joints |

Télécharger ZIP

xor.mq5 (6.99 KB)

Illusion.mq5 (5.88 KB)

Avertissement: Tous les droits sur ces documents sont réservés par MetaQuotes Ltd. La copie ou la réimpression de ces documents, en tout ou en partie, est interdite.

Autres articles par cet auteur

Aller à la discussion

Technique de test (optimisation) et quelques critères de sélection des paramètres de l'Expert Advisor

Il n'y a aucun mal à trouver le Graal de l'épreuve, il est cependant bien plus difficile de s'en débarrasser. Cet article traite de la sélection des paramètres de fonctionnement de l'Expert Advisor avec un traitement de groupe automatisé des résultats d'optimisation et de test lors d'une utilisation maximale des capacités de performance du terminal et d'une charge minimale de l'utilisateur final.

Le MQL5 Cookbook : Implémentation d'un tableau associatif ou d'un dictionnaire pour un accès rapide aux données

Cet article décrit un algorithme spécial permettant d'accéder aux éléments par leurs clés uniques. Tout type de données de base peut être utilisé comme clé. Par exemple, elles peuvent être représentées sous la forme d'une chaîne ou d'une variable entière. Un tel conteneur de données est communément appelé dictionnaire ou tableau associatif. Il fournit un moyen plus facile et plus efficace de résoudre les problèmes.

La règle d'or des Traders

Afin de réaliser des bénéfices basés sur des attentes élevées, nous devons comprendre trois principes de base d'un bon trading : 1) connaître votre risque en entrant sur le marché ; 2) réduisez vos pertes tôt et laissez courir vos bénéfices ; 3) connaître les attentes de votre système - tester et ajuster régulièrement. Cet article fournit un code de programme qui suit les positions ouvertes et actualise le deuxième principe d'or, car il permet aux bénéfices de courir au plus haut niveau possible.

Trading bidirectionnel et couverture des positions dans MetaTrader 5 à l’aide du HedgeTerminalAPI, Partie 2

Cet article décrit une nouvelle approche de la couverture des positions et trace la ligne dans les débats entre les utilisateurs de MetaTrader 4 et MetaTrader 5 à ce sujet. C'est la suite de la première partie : « Trading bidirectionnel et couverture des positions dans MetaTrader 5 à l’aide du panneau HedgeTerminal, Partie 1 » Dans la deuxième partie, nous discutons de l'intégration des Expert Advisors personnalisés dans HedgeTerminalAPI, qui est une bibliothèque de visualisation spéciale conçue pour le trading bidirectionnel dans un environnement logiciel confortable fournissant des outils pour une gestion de position pratique.