![Étudier la classe CCanvas. Comment dessiner des objets transparents](https://c.mql5.com/i/articles/overlay.png)
Étudier la classe CCanvas. Comment dessiner des objets transparents
Table des matières
- Introduction
- 1. Transparence (canal Alpha)
- 2. Représentation des couleurs ARGB
- 3. Schéma de dessin d'objet dans le terminal
- 4. Mélanger les couleurs. Couleur résultante
- 5. L'illusion de la transparence
- Conclusion
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. 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. 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 | Objet | 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)+255*0.5=255 | 255*(1-0.5)+0*0.5=127 | 255*(1-0.5)+0*0.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; //coordinatesPour 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
![Technique de test (optimisation) et quelques critères de sélection des paramètres de l'Expert Advisor](https://c.mql5.com/2/17/884_29.gif)
![Le MQL5 Cookbook : Implémentation d'un tableau associatif ou d'un dictionnaire pour un accès rapide aux données](https://c.mql5.com/2/18/MQL5_Associative_Arrays__1.png)
![La règle d'or des Traders](https://c.mql5.com/2/12/1021_34.png)
![Trading bidirectionnel et couverture des positions dans MetaTrader 5 à l’aide du HedgeTerminalAPI, Partie 2](https://c.mql5.com/2/17/HedgeTerminalaArticle200x200_2p2.png)
![MQL5 - Langage des stratégies de trading intégré au terminal client MetaTrader 5](https://c.mql5.com/i/registerlandings/logo-2.png)
- Applications de trading gratuites
- Plus de 8 000 signaux à copier
- Actualités économiques pour explorer les marchés financiers
Vous acceptez la politique du site Web et les conditions d'utilisation