![Estudando a Classe CCanvas. Como Desenhar Objetos Transparentes](https://c.mql5.com/i/articles/overlay.png)
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
- 4. Mistura de cores. Resultando da Cor
- 5. A Ilusão da Transparência
- 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:
- Área №1 - a cor resultante (0x000000) é totalmente transparente, de modo que na área №1 vemos o fundo inalterado e o gráfico;
- Á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; //coordinatesPara 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.
Traduzido do russo pela MetaQuotes Ltd.
Artigo original: https://www.mql5.com/ru/articles/1341
![Thiago Duarte Thiago Duarte](https://c.mql5.com/avatar/2019/5/5CCB0EAE-0909.jpg)
![Dicas para Comprar um Produto no Mercado. Guia Passo-a-Passo](https://c.mql5.com/2/18/metatrader-market.png)
![Negociação Bidirecional e de Cobertura de Posições no MetaTrader 5 Através da API HedgeTerminal, Parte 2](https://c.mql5.com/2/17/HedgeTerminalaArticle200x200_2p2.png)
![Dicas para Escolher um Sinal de Negociação para Assinar. Guia Passo-a-Passo](https://c.mql5.com/2/18/signals__1.png)
![Guia Prático MQL5: Implementando um Array Associativo ou um Dicionário para Acesso Rápido ao Dados](https://c.mql5.com/2/18/MQL5_Associative_Arrays__1.png)
![MQL5 - Linguagem para estratégias de negociação inseridas no terminal do cliente MetaTrader 5](https://c.mql5.com/i/registerlandings/logo-2.png)
- Aplicativos de negociação gratuitos
- 8 000+ sinais para cópia
- Notícias econômicas para análise dos mercados financeiros
Você concorda com a política do site e com os termos de uso