Estudando a Classe CCanvas. Como Desenhar Objetos Transparentes

Índice

• Introdução
• 1. Transparência (Alpha)
• 2. Representação das cores em ARGB
• 3. Esquema de Desenhar Objetos no Terminal
  
  • 3.1. Gráfico no Fundo
  • 3.2. Gráfico em Primeiro Plano
  • 3.3. Redesenho para o "Gráfico em Primeiro Plano"
• 4. Mistura de cores. Resultando da Cor
  
  • 4.1. Métodos de Processamento da Cor ENUM_COLOR_FORMAT
• 5. A Ilusão da Transparência
  
  • 5.1. Criando o Script "Illusion.mq5"
• Conclusão
  

Introdução

Desenhar no MetaTrader 5 é simples e você precisa saber de apenas algumas nuances. Uma das nuances é de como a tela do terminal é desenhada. Mais precisamente, nós estamos interessados ​​na forma como os gráficos são produzidos na tela. Por exemplo, um gráfico pode ser exibido em primeiro plano ou no fundo. A saída de cores na tela dependerá do visor gráfico. Alguns objetos gráficos podem mudar de cor nas áreas de sobreposição ou de interseção.

Antes de prosseguir diretamente para o desenho usando a classe CCanvas, vamos analisar algumas definições relacionadas com o processamento de cores. Por exemplo, vamos descobrir o significado de Alpha.

Na minha opinião, a implementação da transparência é a tecnologia mais importante, que pode vivificar uma imagem. Por exemplo, a transparência pode ser utilizada para implementar uma interface mais atraente, com uma transição de cor suave ou sombras. A sombra adiciona o conceito de dimensão de um objeto gráfico e suaviza visualmente as bordas do objeto.

1. Transparência (Alpha)

Nós vivemos em um mundo tridimensional e percebemos tudo, ao nosso redor, em três dimensões. Nós vemos ou mesmo sentimos a tridimensionalidade. No mundo tridimensional, nós podemos entender quais objetos estão mais perto de nós.

Alguns objetos podem ser translúcidos. Por exemplo, pegue um copo transparente contendo um líquido translúcido em um fundo azul. O fundo azul é visível através do vidro com o líquido. Os detalhes do fundo dependem do grau de transparência do líquido.

Fig. 1. Perspectiva comum da dimensionalidade

A transparência, neste exemplo, não é virtual e nem ilusória. A transparência, neste caso, é visto com obviedade.

É tudo diferente quando uma imagem é exibida no monitor do computador - a matriz de pixel é bidimensional, isto é, a imagem exibida pela matriz tem uma altura e uma largura, mas não possui a terceira opção de profundidade. Por conseguinte, não é possível posicionar um pixel ao longo de outro simulando a situação quando o pixel inferior é um fundo amarelo, e o pixel superior é um vidro translúcido. Qualquer imagem de um objeto tridimensional realista na tela é uma ilusão, que é alcançada através da utilização de cores e sombras.

Vamos ver o exemplo de uma imagem que pode ser dividida em duas camadas: a camada inferior, que é um fundo azul e a camada superior, que é um vidro com um líquido opaco. Aqui está como ela se parece na tela:

Fig. 2. Vidro opaco

Na imagem resultante, o vidro é completamente opaco. Para adicionar (mudar) transparência, nós precisamos traduzir todas as cores da imagem numa representação de cores em ARGB.

2. Representação das cores em ARGB

Eu não esqueci sobre a transparência do vidro. A questão será discutida em detalhes na segunda parte.

A representação das cores em ARGB é um tipo de quatro bytes uint, na qual os seguintes valores são registados: vermelho (red), verde (green), azul (blue), alpha. Isto é, para dar transparência à cor no Formato RGB um byte extra com um valor de transparência é adicionado, que é o alpha.

Fig. 3. ARGB

O valor de alpha é definido de 0 (a cor de um pixel de primeiro plano não altera a exibição de um pixel subjacente) até 255 (a cor de um pixel subjacente é completamente substituído pelo pixel do primeiro plano). A transparência da cor em termos percentuais é calculado da seguinte forma:

Em outras palavras, o menor valor de alpha nos leva a uma cor mais transparente. Se nós conhecemos a transparência desejada, o valor de alpha pode ser calculado a seguir:

A função ColorToARGB(color, alpha) é utilizada para a conversão da cor em ARGB.

3. O Esquema de Desenhar Objetos no Terminal

Para entender melhor como a cor é processada, vamos considerar o esquema da disposição mútua de objetos gráficos com duas versões de configuração do gráfico: o gráfico no fundo e o gráfico em primeiro plano.

3.1. Gráfico no Fundo

Para verificar esta opção, clique com o botão direito sobre o gráfico, em seguida, selecione "Propriedades ..." do menu suspenso e vá para a aba "Comum".

Fig. 4. Gráfico no Fundo

Uma janela do gráfico no terminal consiste de quatro camadas. Você pode desenhar nas duas camadas extremas ("Fundo" e "Primeiro Plano"):

Fig. 5. O esquema da janela do gráfico

No fundo e em primeiro plano, um objeto desenhado é sobreposto com outro de acordo com o seu tempo de criação.

Isto é, os objetos mais antigos estará localizados na camada mais atrás do "Fundo" e na camada mais atrás do "Primeiro Plano". Objetos mais novos vão aparecer no topo.

Fig. 6. Local dos objetos, dependendo do tempo de criação

Nem todos os objetos podem se sobrepor completamente, sem o redesenho no campo (ou campos) em que coincidam com os objetos gráficos subjacentes.

A tabela abaixo resume as características dos objetos gráficos seguido de uma explicação sobre a sobreposição de objetos que são redesenhadas nas áreas de sobreposição.

ID	Objeto	Descrição	Sobreposição com um objeto subjacente
OBJ_VLINE		Linha Vertical	Sem redesenho
OBJ_HLINE		Linha Horizontal	Sem redesenho
OBJ_TREND		Linha de Tendência	Sem redesenho
OBJ_TRENDBYANGLE		Linha de Tendência por Ângulo	Sem redesenho
OBJ_CYCLES		Linhas de Ciclo	Sem redesenho
OBJ_ARROWED_LINE		Linha de Seta	Sem redesenho
OBJ_CHANNEL		Canal Equidistante	Sem redesenho
OBJ_STDDEVCHANNEL		Canal de Desvio Padrão	Sem redesenho
OBJ_REGRESSION		Canal de Regressão Linear	Sem redesenho
OBJ_PITCHFORK		Forquilha de Andrews	Sem redesenho
OBJ_GANNLINE		Linha Gann	Sem redesenho
OBJ_GANNFAN		Ventilador Gann	Sem redesenho
OBJ_GANNGRID		Grade Gann	Sem redesenho
OBJ_FIBO		Retração de Fibonacci	Sem redesenho
OBJ_FIBOTIMES		Fusos Horários de Fibonacci	Sem redesenho
OBJ_FIBOFAN		Fibonacci Fan	Sem redesenho
OBJ_FIBOARC		Arcos de Fibonacci	Sem redesenho
OBJ_FIBOCHANNEL		Canal de Fibonacci	Sem redesenho
OBJ_EXPANSION		Expansão de Fibonacci	Sem redesenho
OBJ_ELLIOTWAVE5		Ondas de Elliott - 5	Sem redesenho
OBJ_ELLIOTWAVE3		Ondas de Elliott - 3	Sem redesenho
OBJ_RECTANGLE		Retângulo	Sem redesenho se não há preenchimento, redesenho se preenchido
OBJ_TRIANGLE		Triângulo	Sem redesenho se não há preenchimento, redesenho se preenchido
OBJ_ELLIPSE		Ellipse	Sem redesenho se não há preenchimento, redesenho se preenchido
OBJ_ARROW_THUMB_UP		Polegar para Cima	Sem redesenho
OBJ_ARROW_THUMB_DOWN		Polegar para Baixo	Sem redesenho
OBJ_ARROW_UP		Seta para Cima	Sem redesenho
OBJ_ARROW_DOWN		Seta para Baixo	Sem redesenho
OBJ_ARROW_STOP		Sinal Stop	Sem redesenho
OBJ_ARROW_CHECK		Marca de Verificação	Sem redesenho
OBJ_ARROW_LEFT_PRICE		Etiqueta de Preço à Esquerda	Sem redesenho
OBJ_ARROW_RIGHT_PRICE		Etiqueta de Preço à Direita	Sem redesenho
OBJ_ARROW_BUY		Comprar	Sem redesenho
OBJ_ARROW_SELL		Vender	Sem redesenho
OBJ_ARROW		Seta	Sem redesenho
OBJ_TEXT		Texto	Sem redesenho
OBJ_LABEL		Etiqueta de Texto	Sem redesenho
OBJ_BUTTON		Botão	Sem redesenho
OBJ_CHART		Gráfico	Sem redesenho
OBJ_BITMAP		Bitmap	Sem redesenho
OBJ_BITMAP_LABEL		Etiqueta Bitmap	Sem redesenho
OBJ_EDIT		Edição	Sem redesenho
OBJ_EVENT		O objeto Event que corresponde a um evento no Calendário Econômico	Sem redesenho
OBJ_RECTANGLE_LABEL		O objeto de etiqueta retângulo usado para criar e projetar a interface gráfica personalizada	Sem redesenho

Tabela 1. Cobrimento e Transparência de objetos gráficos

Vejamos o exemplo de três objetos do tipo OBJ_RECTANGLE (retângulos) e vamos discutir o algoritmo de redesenho no objeto de áreas sobrepostas que devem ser redesenhadas (arquivo xor.mq5).

O script (arquivo xor.mq5) define a cor de fundo branca (0xFFFFFF) e desenha retângulos preenchidos №1 e №2 em azul (0x0000FF), retângulo №3 é vermelho (0xFF0000) e preenchido.

Fig. 7. Redesenho. Gráfico no Fundo

Temos duas áreas de interseção, em que a cor mudou:

1. Área №1 - a cor resultante (0x000000) é totalmente transparente, de modo que na área №1 vemos o fundo inalterado e o gráfico;
2. Área №2 - cor resultante (0x00ff00).

Quando objetos gráficos, tais como retângulos, se sobrepõem, eles são redesenhados pelo algoritmo de Bitwise OR.

A fig. 6 abaixo mostra um exemplo de redesenho de cores para ambas as áreas:

Representação literal	Representação inteira	Representação binária	Nota
C’0,0,255’	0x0000FF	0000 0000 0000 0000 1111 1111	Azul
		XOR
C’0,0,225’	0x0000FF	0000 0000 0000 0000 1111 1111	Azul
		=
C’0,0,0’	0x000000	0000 0000 0000 0000 0000 0000	Transparente
		XOR
C’255,255,255’	0xFFFFFF	1111 1111 1111 1111 1111 1111	Branco (Fundo)
		=
C’255,255,255’	0xFFFFFF	1111 1111 1111 1111 1111 1111	Branco

Tabela 2. Bitwise OR para Azul + Azul + Branco

Representação literal	Representação inteira	Representação binária	Nota
C’0,0,255’	0x0000FF	0000 0000 0000 0000 1111 1111	Azul
		XOR
C’255,0,0’	0xFF0000	1111 1111 0000 0000 0000 0000	Vermelho
		=
С’255,0,255’	0xFF00FF	1111 1111 0000 0000 1111 1111
		XOR
C’255,255,255’	0xFFFFFF	1111 1111 1111 1111 1111 1111	Branco (Fundo)
		=
С’0,255,0’	0x00FF00	0000 0000 1111 1111 0000 0000

Tabela 3. Bitwise OR for Azul + Vermelho + Branco

3.2. Gráfico em Primeiro Plano

Quando o parâmetro do "Gráfico em Primeiro Plano" estiver ligado, a disposição das camadas de janela do gráfico se diferem com o gráfico em segundo plano:

Fig. 8. Esquema da janela do gráfico. Gráfico na Frente

Quando a opção do 'Gráfico em Primeiro Plano' está ligada, duas camadas de desenho "Primeiro Plano" e "Fundo" se fundem em uma camada comum. Esta camada comum está abaixo das camadas com barra e grade.

3.3. Redesenho para o "Gráfico em Primeiro Plano"

Como na Fig. 7, nós consideramos o algoritmo de redesenho na sobreposição de objetos que são redesenhados (arquivo xor.mq5).

O script (arquivo xor.mq5) define a cor de fundo branca (0xFFFFFF) e desenha retângulos preenchidos №1 e №2 em azul (0x0000FF), retângulo №3 é vermelho (0xFF0000) e preenchido.

Fig. 9. Redesenho. Gráfico em Primeiro Plano

Se compararmos a Fig. 7 e 9, vemos que as áreas sobrepostas são igualmente redesenhadas.

4. Misturando Cores Resultantes da Cor

Como mencionado acima, a transparência na tela é uma ilusão. Manipulações de cor. Para simular a fig. 2 na tela, nós só precisamos entender como exibir uma cor com transparência na tela. Isso é o que nós precisamos para calcular a cor resultante do pixel.

Suponha que queremos desenhar a cor vermelha com alpha 128 no canvas em um fundo branco (esquema de cores em "Preto no Branco" no fundo do gráfico). No formato ARGB a cor é 0x80FF0000. Para calcular a cor resultante, precisamos calcular a cor de cada uma delas (Vermelho, Verde, Azul).

Aqui está a fórmula para calcular a cor resultante com o alpha aplicado à cor, normalizados para um:

onde:

• resultado é o valor resultante da intensidade da cor. Se o valor for maior que 255, ele retorna 255.
• fundo é o valor da cor do fundo.
• primeiro plano é o valor da cor da imagem de sobreposição.
• alpha é um valor normalizado para um alpha.

Vamos calcular a cor resultante de acordo com a fórmula (1.3):

Alpha	Alpha, normalizado para "1"	R	G	B	Nota
		255	255	255	Branco
128	0,5	255	0	0	Vermelho com 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

Tabela 4. Os resultados do cálculo utilizando a fórmula (1.3)

A cor resultante na tela é a seguinte:

Fig. 10. Cor resultante

4.1. Métodos de Processamento da Cor ENUM_COLOR_FORMAT

Ao criar uma tela, você pode especificar um dos três métodos de processamento de cores (ENUM_COLOR_FORMAT):

ID	Descrição
COLOR_FORMAT_XRGB_NOALPHA	O componente alpha é ignorado
COLOR_FORMAT_ARGB_RAW	Os componentes de cor não são processadas pelo terminal (que deve ser corretamente especificado pelo usuário)
COLOR_FORMAT_ARGB_NORMALIZE	Os componentes de cor são processados ​​pelo terminal

Tabela 5. Métodos de Processamento da Cor para a Criação da Canvas

COLOR_FORMAT_ARGB_NORMALIZE fornece uma imagem mais bonita, tendo em conta a sobreposição correta dos componentes RGB. A cor resultante na aplicação de cor com um alpha é calculado de acordo com a fórmula (1.3).

COLOR_FORMAT_ARGB_RAW não controla o excesso de componentes RGB de uma cor, portanto o COLOR_FORMAT_ARGB_RAW é um método mais rápido em comparação com a COLOR_FORMAT_ARGB_NORMALIZE.

Aqui está a fórmula para calcular a cor resultante com um alpha aplicado para colorir normalizado para o método COLOR_FORMAT_ARGB_RAW:

onde:

• resultado é o valor resultante da intensidade da cor. Se o valor for maior que 255, ele retorna 255.
• fundo é o valor da cor do fundo.
• primeiro plano é o valor da cor da imagem de sobreposição.
• alpha é um valor normalizado para um alpha.

5. A Ilusão da Transparência

Agora nós podemos proceder para a aplicação prática da transparência.

Vamos desenhar uma série de retângulos preenchidos (script "xor.mq5"). Para ilustrar a diferença dos métodos de processamento de cor, vamos aplicar três telas horizontais não sobrepostas no topo da tabela.

O primeiro é processado usando COLOR_FORMAT_XRGB_NOALPHA, o segundo - COLOR_FORMAT_ARGB_RAW e o terceiro - COLOR_FORMAT_ARGB_NORMALIZE. Em seguida, gradualmente alteramos a transparência de 255 (totalmente opaco) a 0 (totalmente transparente). Vamos chamar nosso script de "Illusion.mq5".

O vídeo mostra como o script "Illusion.mq5" funciona:

Fig. 11. Funcionamento do script illusion.mq5

5.1. Criando o Script "Illusion.mq5"

Partes do código novo ou modificado estão realçados.

O modelo de script vazio:

//+------------------------------------------------------------------+
//|                                                     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()
  {
//---
  }

Vamos adicionar a descrição do script, uma opção para entrada de parâmetros durante o início do script, e conectar a classe CCanvas, que permite o desenho:

#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>

A operação do script requer uma série de variáveis ​​- altura e largura do gráfico, altura e largura da canvas, ​​bem como as variáveis ​​auxiliares para as coordenadas de desenho na tela:

#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

Para receber a largura e a altura do gráfico, usamos as funções padrão:

//+------------------------------------------------------------------+
//| 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);
  }

Vai diretamente para a OnStart().

Para maior clareza, a Fig. 12 mostra o layout das telas no gráfico e as variáveis ​​auxiliares para as coordenadas da tela:

Fig. 12. Coordenadas no gráfico

Vamos encontrar a altura e a largura do gráfico e calcular as variáveis ​​auxiliares para as coordenadas da tela:

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;
  }

Com a largura e a altura calculada da tela e das coordenadas auxiliares, nós podemos começar a desenhar.

Em seguida, vamos alterar o tipo void da função OnStart() para int e desenhar na primeira tela um retângulo preenchido, um texto com o nome do método de processamento da cor da tela e um círculo preenchido:

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);
  }

Mais detalhes sobre a última última parte do código adicionado.

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

canvas_XRGB_NOALPHA.CreateBitmapLabel - Aqui vamos criar um recurso gráfico vinculado a um objeto gráfico.

O método de processamento da cor da primeira tela é COLOR_FORMAT_XRGB_NOALPHA - o componente alfa é ignorado.

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

Preenche toda a tela com uma cor no formato ARGB com a transparência alpha.

A tela será preenchida, ignorando o alpha, pois o método COLOR_FORMAT_XRGB_NOALPHA para processamento de cores é usado aqui.

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

Saída de texto - O tipo de processamento de imagem para a tela. A cor do texto é em formato ARGB e alpha de 255, a cor do texto exibido é completamente opaco.

O texto mostrado é encaixado horizontalmente (TA_CENTER) e verticalmente (TA_VCENTER) para o centro do retângulo.

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

Redesenhando um círculo preenchido. Vamos desenhar o círculo sobre a cor, que preenche a tela (canvas_XRGB_NOALPHA.Erase(ColorToARGB (colr, alpha));).

Isso é para mostrar que uma forma desenhada sobre a tela (ou uma área/ponto) cobre completamente uma imagem subjacente na tela. Isto é, não há nenhum redesenho sobre a tela, uma vez que o último desenho cobre completamente a área subjacente.

canvas_XRGB_NOALPHA.Update();

Para exibir todos os objetos desenhados na tela, precisamos atualizar a tela.

As outras duas telas são desenhadas de forma semelhante: a tela com o modo de exibição COLOR_FORMAT_ARGB_RAW e o terceiro com 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);
  }

A tela e os objetos gráficos dentro das telas foram desenhados.

Agora vamos adicionar o loop, que vai alterar a transparência de toda a tela:

   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);
  }

A transparência para todas as telas é alterada usando as linhas de código:

.TransparentLevelSet(transparent)

Após o fim do desenho, é preciso limpar, ou seja, remover os recursos gráficos.

Já que criamos os recursos gráficos com referência ao objeto gráfico (método CreateBitmapLabel), vamos remover o recurso usando o método Destroy(), que também irá excluir o objeto gráfico (Etiqueta Bitmap):

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

O script, que muda suavemente a transparência está funcionando.

A diferença entre os modos COLOR_FORMAT_ARGB_RAW e COLOR_FORMAT_ARGB_NORMALIZE é a melhor visibilidade se você executar primeiro o script no fundo do gráfico branco, e, em seguida, no preto.

Conclusão

O artigo aborda os conceitos básicos de se trabalha com as cores. Nós aprendemos como desenhar os objetos em uma janela do gráfico. O artigo também discute os conceitos básicos de se trabalhar com a classe da biblioteca padrão CCanvas e o formato ARGB de representação de cores com transparência.

Isto é apenas o básico, e ainda há muito mais oportunidades para explorar e criar vários efeitos gráficos no terminal MetaTrader 5. Este artigo lida com a transparência: é a transparência parcial que dá a forma mais atraente para a borda de objetos gráficos. Devido ao caráter bidimensional dos monitores, a transparência no gráfico é uma ilusão alcançada pelo processamento de pixels.