2. Algorithmus der Kantenglättung

//+------------------------------------------------------------------+
//| Draw pixel with antialiasing                                     |
//+------------------------------------------------------------------+
void CCanvas::PixelSetAA(const double x,const double y,const uint clr)
  {

void CCanvas::PixelSetAA(const double x,const double y,const uint clr)
  {
   static double rr[4];
   static int    xx[4];
   static int    yy[4];

static int    yy[4];
//--- preliminary calculations
   int    ix=(int)MathRound(x);
   int    iy=(int)MathRound(y);

void OnStart()
  {
   Print("MathRound(3.2)=",DoubleToString(MathRound(3.2),8),"; (int)MathRound(3.2)=",IntegerToString((int)MathRound(3.2)));
   Print("MathRound(3.5)=",DoubleToString(MathRound(3.5),8),"; (int)MathRound(3.5)=",IntegerToString((int)MathRound(3.5)));
   Print("MathRound(3.8)=",DoubleToString(MathRound(3.8),8),"; (int)MathRound(3.8)=",IntegerToString((int)MathRound(3.8)));
  }
//+------------------------------------------------------------------+

MathRound(3.8)=4.00000000; (int)MathRound(3.8)=4
MathRound(3.5)=4.00000000; (int)MathRound(3.5)=4
MathRound(3.2)=3.00000000; (int)MathRound(3.2)=3

int    iy=(int)MathRound(y);
   double rrr=0;
   double k;
   double dx=x-ix;
   double dy=y-iy;

double dy=y-iy;
   uchar  a,r,g,b;
   uint   c;
//--- no need for anti-aliasing
   if(dx==0.0 && dy==0.0)
     {
      PixelSet(ix,iy,clr);
      return;
     }

PixelSet(ix,iy,clr);
      return;
     }
//--- prepare array of pixels
   xx[0]=xx[2]=ix;
   yy[0]=yy[1]=iy;
   if(dx<0.0)
      xx[1]=xx[3]=ix-1;
   if(dx==0.0)
      xx[1]=xx[3]=ix;
   if(dx>0.0)
      xx[1]=xx[3]=ix+1;
   if(dy<0.0)
      yy[2]=yy[2]=iy-1;
   if(dy==0.0)
      yy[2]=yy[2]=iy;
   if(dy>0.0)
      yy[2]=yy[2]=iy+1;

yy[2]=yy[2]=iy+1;
//--- calculate radii and sum of their squares
   for(int i=0;i<4;i++)
     {
      dx=xx[i]-x;
      dy=yy[i]-y;
      rr[i]=1/(dx*dx+dy*dy);
      rrr+=rr[i];
     }

rrr+=rr[i];
     }
//--- draw pixels
   for(int i=0;i<4;i++)
     {
      k=rr[i]/rrr;
      c=PixelGet(xx[i],yy[i]);
      a=(uchar)(k*GETRGBA(clr)+(1-k)*GETRGBA(c));
      r=(uchar)(k*GETRGBR(clr)+(1-k)*GETRGBR(c));
      g=(uchar)(k*GETRGBG(clr)+(1-k)*GETRGBG(c));
      b=(uchar)(k*GETRGBB(clr)+(1-k)*GETRGBB(c));
      PixelSet(xx[i],yy[i],ARGB(a,r,g,b));
     }

3. Der Schatten von Objekten

Das Zeichnen von Schatten gibt graphischen Objekten weichere Konturen und gibt ihnen etwas Volumen, sie scheinen nicht mehr flach zu sein. Schatten haben außerdem eine sehr interessante und vorteilhafte Eigenschaft: Die Schatten der Objekte sind normalerweise transparent, und bei der Überlagerung von Grafiken mit Schatten erzeugen sie zusätzlich Volumen.

3.1. Arten von Schatten

Es wird klar, ein "Aureole-Schatten" ist aus mehreren 1-Pixel starken Umrissen aufgebaut. Diese Umrisse haben eine schrittweise Änderung der Farbsättigung.

3.2. Berechnung mit der Normalverteilung

Für einen weichen Übergang beim Zeichnen der Schatten verwenden wir den häufigsten graphischen Filter — die Gaußsche Unschärfe (Informationen über die Gaußsche Unschärfe finden Sie unten). Dieser Filter verwendet die Normalverteilung, um die Transformation für jeden Pixel des Bildes zu berechnen. Die Berechnung der Unschärfe jedes Pixels des Bildes hängt vom Radius der Unschärfe ab (der Parameter wird vor der Verwendung übergeben) und muss unter Berücksichtigung der umgebenden Pixel erfolgen.

Obwohl vom Radius der Unschärfe gesprochen wurde, wird für die Berechnung tatsächlich ein N x N Gitter verwendet:

wobei Radius ein Radius der Unschärfe ist.

Das Bild unten zeigt das Beispiel eines Pixelgitters für einen Radius der Unschärfe von 3.

Fig. 6. Unschärferadius

Ich werde die Theorie einer schnellen Berechnung dieses Filters übergehen und nur kurz erwähnen, dass eine Trenneigenschaft des Gaußschen Filters verwendet wird: Zuerst 'verwischen' wir entlang der X-Achse und erst dann entlang der Y-Achse. Das beschleunigt die Berechnung, ohne die Qualität zu beeinflussen.

Der Einfluss benachbarter Pixel auf die berechneten Pixel ist unterschiedlich und verwendet die Normalverteilung zur Berechnung. Je weiter der Pixel vom berechneten Pixel entfernt ist, desto geringer ist seine Auswirkung. Zur Berechnung der Normalverteilung durch den Gaußschen Algorithmus verwenden wir die Numerik-Bibliothek ALGLIB. Das Skript GQGenerateRecToExel.mq5 demonstriert uns eine Normalverteilung. Von der Bibliothek ALGLIB library erhält das Skript einen Array mit Wichtungskoeffizienten der Normalverteilung und schreibt diese Werte in die Datei <data catalogue>\MQL5\Files\GQGenerateRecToExel.csv. Und so sieht der Chart aus, der mit Hilfe der Daten aus GQGenerateRecToExel.csv erstellt wurde:

Fig. 7. Normalverteilung

Am Beispiel des Skripts GQGenerateRecToExel.mq5 erkennen wir, wie wir den Array mit den Wichtungen der Normalverteilung erhalten. Im Folgenden wird dieselbe Funktion GetQuadratureWeights von den Skripten verwendet:

//+------------------------------------------------------------------+
//| Gets array of quadrature weights                                 |
//+------------------------------------------------------------------+
bool GetQuadratureWeights(const double mu0,const int n,double &w[])
  {
   CAlglib alglib;            // static member of class CAlglib
   double      alp[];         // array alpha coefficients 
   double      bet[];         // array beta coefficients 
   ArrayResize(alp,n);
   ArrayResize(bet,n);
   ArrayInitialize(alp,1.0);  // initializes a numeric array alpha
   ArrayInitialize(bet,1.0);  // initializes a numeric array beta

   double      out_x[];
   int         inf=0;
//| Info    -   error code:                                          |
//|                 * -3    internal eigenproblem solver hasn't      |
//|                         converged                                |
//|                 * -2    Beta[i]<=0                               |
//|                 * -1    incorrect N was passed                   |
//|                 *  1    OK                                       |
   alglib.GQGenerateRec(alp,bet,mu0,n,inf,out_x,w);
   if(inf!=1)
     {
      Print("Call error in CGaussQ::GQGenerateRec");
      return(false);
     }
   return(true);
  }

Diese Funktion füllt den Array w[] mit den Wichtungskoeffizienten der Normalverteilung und überprüft auch das Ergebnis des Aufrufs der Funktion aus der Bibliothek ALGLIB durch die Analyse der Variable inf.

3.3. Ressourcen

Für das Zeichnen von Schatten auf der Leinwand werden gespeicherte Daten (ResourceReadImage) verwendet, zum Beispiel wird der Array mit Daten aus einer graphischen Quellen gefüllt.

Bei der Arbeit mit Quellen sollten Sie darauf achten, die Pixelarrays im Format uint zu sichern (mehr dazu: ARGB Farbdarstellung). Sie sollten auch wissen, wie 2D Bilder mit Breite und Höhe in einen eindimensionalen Array konvertiert werden. Ein Verfahren dieser Konvertierung wäre: nacheinander die Zeilen des Bildes zu einer einzigen Zeile zusammen zu kleben. Unten sehen Sie zwei Bilder in den Größen 4 x 3 Pixel und 3 x 4 Pixel, die zu einem eindimensionalen Array konvertiert werden:

Fig. 8. Bildkonvertierung in einen eindimensionalen Array

4. Beispiel für den Gaußschen Unschärfealgorithmus

Eine Gaußsche Unschärfe wird beispielsweise durch ShadowTwoLayers.mq5 verdeutlicht. Die zwei Dateien Canvas.mqh und Numerik-Bibliothek ALGLIB werden für die Berechnung geladen:

#property script_show_inputs
#include <Canvas\Canvas.mqh>
#include <Math\Alglib\alglib.mqh>

Eingabe-Parameter:

//--- input
input uint  radius=4;               // radius blur
input color clrShadow=clrBlack;     // shadow color
input uchar ShadowTransparence=160; // transparency shadows
input int   ShadowShift=3;          // shadow shift
input color clrDraw=clrBlue;        // shadow color
input uchar DrawwTransparence=255;  // transparency draws
//---

Wir erstellen zwei Leinwände. Die untere Leinwand dient uns als Schicht, um die Schatten zu zeichnen, und auf der oberen Schicht zeichnen wir die Graphiken. Beide sind gleich groß wie der Chart (eine Anleitung, wie die Höhe und Breite des Charts abgefragt werden, wird nicht gegeben, dazu gibt es Beispiele im Dokumententeil Beispiele für das Arbeiten mit Charts):

//--- create canvas
   CCanvas CanvasShadow;
   CCanvas CanvasDraw;
   if(!CanvasShadow.CreateBitmapLabel("ShadowLayer",0,0,ChartWidth,
      ChartHeight,COLOR_FORMAT_ARGB_NORMALIZE))
     {
      Print("Error creating canvas: ",GetLastError());
      return;
     }
   if(!CanvasDraw.CreateBitmapLabel("DrawLayer",0,0,ChartWidth
      ,ChartHeight,COLOR_FORMAT_ARGB_NORMALIZE))
     {
      Print("Error creating canvas: ",GetLastError());
      return;
     }

Ok, zeichnen wir mal etwas auf der Leinwand. Zuerst zeichnen wir den Schatten der Figur (Schatten sind normalerweise durchsichtig) auf der unteren Leinwand und dann ein Rechteck auf der oberen.

//--- draw on canvas
   CanvasShadow.Erase(ColorToARGB(clrNONE,0));
   CanvasShadow.FillRectangle(ChartWidth/10,ChartHeight/10,
                              ChartWidth/2-ChartWidth/10,ChartHeight/10*9,ColorToARGB(clrShadow,ShadowTransparence));
   CanvasShadow.FillRectangle(ChartWidth/2,ChartHeight/12,ChartWidth/3*2,
                              ChartHeight/2,ColorToARGB(clrShadow,ShadowTransparence));
   CanvasShadow.Update();

   CanvasDraw.Erase(ColorToARGB(clrNONE,0));
   CanvasDraw.FillRectangle(ChartWidth/10-ShadowShift,ChartHeight/10-ShadowShift,ChartWidth/2-ChartWidth/10-ShadowShift,
                            ChartHeight/10*9-ShadowShift,ColorToARGB(clrDraw,DrawwTransparence));
   CanvasDraw.Update();

Damit sollten wir folgendes Bild erhalten (Achtung: die Schatten des Rechtecks sind noch ohne Unschärfe):

Fig. 9. Die Schatten noch ohne Unschärfe

Die Unschärfe wird auf der unteren Leinwand ausgeführt(CanvasShadow). Dafür müssen wir die Daten (ResourceReadImage) der Graphikquelle der unteren Leinwand lesen (CanvasShadow.ResourceName()) und müssen sie (res_data) in einen eindimensionalen Array kopieren:

//+------------------------------------------------------------------+
//| reads data from the graphical resource                           |
//+------------------------------------------------------------------+
   ResetLastError();
   if(!ResourceReadImage(CanvasShadow.ResourceName(),res_data,res_width,res_height))
     {
      Print("Error reading data from the graphical resource ",GetLastError());
      Print("attempt number two");
      //--- attempt number two: now the picture width and height are known
      ResetLastError();
      if(!ResourceReadImage(CanvasShadow.ResourceName(),res_data,res_width,res_height))
        {
         Print("Error reading data from the graphical resource ",GetLastError());
         return;
        }
     }

Für den nächsten Schritt benötigen wir den Array mit den Wichtungskoeffizienten der Normalverteilung von der Funktion GetQuadratureWeights, und wir zerlegen den eindimensionalen Array in vier Arrays: Alfa, Red, Green und Blue. Graphischen Effekte können nur auf einzelne Farbkomponenten angewendet werden, daher müssen die Farben zerlegt werden.

//+------------------------------------------------------------------+
//| decomposition of pictures on the components r, g, b              |
//+------------------------------------------------------------------+
...
   if(!GetQuadratureWeights(1,NNodes,weights))
      return;

   for(int i=0;i<size;i++)
     {
      clr_temp=res_data[i];
      a_data[i]=GETRGBA(clr_temp);
      r_data[i]=GETRGBR(clr_temp);
      g_data[i]=GETRGBG(clr_temp);
      b_data[i]=GETRGBB(clr_temp);
     }

Der Code im nächsten Teil ist verantwortlich für die "Magie" der Unschärfe. Zuerst wird die Unschärfe des Bildes auf der X-Achse erzeugt, dann in gleicher Weise auf der Y-Achse. Dieser Ansatz ergibt sich aus den Trenneigenschaften der Gaußschen Filter, die eine Beschleunigung der Berechnung ohne Qualitätseinbußen erlaubt. Hier das Beispiel für die Unschärfe der X Achse des Bildes:

//+------------------------------------------------------------------+
//| blur horizontal (axis X)                                         |
//+------------------------------------------------------------------+
   uint XY;             // pixel coordinate in the array
   double   a_temp=0.0,r_temp=0.0,g_temp=0.0,b_temp=0.0;
   int      coef=0;
   int      j=(int)radius;
   for(uint Y=0;Y<res_height;Y++)                  // cycle on image width
     {
      for(uint X=radius;X<res_width-radius;X++)    // cycle on image height
        {
         XY=Y*res_width+X;
         a_temp=0.0; r_temp=0.0; g_temp=0.0; b_temp=0.0;
         coef=0;
         for(int i=-1*j;i<j+1;i=i+1)
           {
            a_temp+=a_data[XY+i]*weights[coef];
            r_temp+=r_data[XY+i]*weights[coef];
            g_temp+=g_data[XY+i]*weights[coef];
            b_temp+=b_data[XY+i]*weights[coef];
            coef++;
           }
         a_data[XY]=(uchar)MathRound(a_temp);
         r_data[XY]=(uchar)MathRound(r_temp);
         g_data[XY]=(uchar)MathRound(g_temp);
         b_data[XY]=(uchar)MathRound(b_temp);
        }
      //--- remove artifacts on the left
      for(uint x=0;x<radius;x++)
        {
         XY=Y*res_width+x;
         a_data[XY]=a_data[Y*res_width+radius];
         r_data[XY]=r_data[Y*res_width+radius];
         g_data[XY]=g_data[Y*res_width+radius];
         b_data[XY]=b_data[Y*res_width+radius];
        }
      //--- remove artifacts on the right
      for(uint x=res_width-radius;x<res_width;x++)
        {
         XY=Y*res_width+x;
         a_data[XY]=a_data[(Y+1)*res_width-radius-1];
         r_data[XY]=r_data[(Y+1)*res_width-radius-1];
         g_data[XY]=g_data[(Y+1)*res_width-radius-1];
         b_data[XY]=b_data[(Y+1)*res_width-radius-1];
        }
     }

Wir sehen die zwei verschachtelten Schleifen:

for(uint Y=0;Y<res_height;Y++)                  // cycle on image width
     {
      for(uint X=radius;X<res_width-radius;X++)    // cycle on image height
        {
         ...
        }
     }

Diese Verschachtelung stellt sicher, dass alle Pixel des Bildes bearbeitet werden:

Fig. 10. Der Weg über alle Pixel des Bildes

Eine verschachtelte Schleife stellt sicher, dass alle Pixel des Bildes berechnet werden:

for(uint X=radius;X<res_width-radius;X++)    // cycle on image height
        {
         XY=Y*res_width+X;
         a_temp=0.0; r_temp=0.0; g_temp=0.0; b_temp=0.0;
         coef=0;
         for(int i=-1*j;i<j+1;i=i+1)
           {
            a_temp+=a_data[XY+i]*weights[coef];
            r_temp+=r_data[XY+i]*weights[coef];
            g_temp+=g_data[XY+i]*weights[coef];
            b_temp+=b_data[XY+i]*weights[coef];
            coef++;
           }
         a_data[XY]=(uchar)MathRound(a_temp);
         r_data[XY]=(uchar)MathRound(r_temp);
         g_data[XY]=(uchar)MathRound(g_temp);
         b_data[XY]=(uchar)MathRound(b_temp);
        }

Die Zahl der rechts und links benachbarten Pixel werden entsprechend des Radius' für die Unschärfe ausgewählt. Erinnern wir uns, wir verwendeten die Funktion GetQuadratureWeights, um den Array mit den Wichtungskoeffizienten der Normalverteilung zu erhalten. Es stellt sich heraus, die Zahl benachbarter Pixel links + dem Pixel mit zu berechnender Unschärfe + der Zahl benachbarter Pixel rechts = der Zahl der Elemente im Array der Wichtungskoeffizienten. Auf diesem Weg entspricht jedem benachbarte Pixel ein spezifischer Wert im Array der Wichtungskoeffizienten.

Und so wird dann die Unschärfe einer Farbe berechnet: jeder benachbarte Pixel wird mit dem ihm entspr. Wichtungskoeffizienten multipliziert und aufsummiert. Unten ist ein Beispiel der Berechnung der Unschärfe von Rot und einem Unschärferadius von 4:

Fig. 11. Berechnung der Unschärfe

Mit diesem Algorithmus die Unschärfe verbleiben aber an den Rändern des Bildes Artefakte – Pixelstreifen ohne Unschärfe. Die Breite dieser Streifen ist gleich dem Radius der Unschärfe. Je größer dieser Unschärferadius ist, desto breiter sind die Streifen der Pixel ohne Unschärfe. Im Algorithmus werden diese Artefakte durch das Kopieren der Pixel mit Unschärfe entfernt:

//--- remove artifacts on the left
      for(uint x=0;x<radius;x++)
        {
         XY=Y*res_width+x;
         a_data[XY]=a_data[Y*res_width+radius];
         r_data[XY]=r_data[Y*res_width+radius];
         g_data[XY]=g_data[Y*res_width+radius];
         b_data[XY]=b_data[Y*res_width+radius];
        }
      //--- remove artifacts on the right
      for(uint x=res_width-radius;x<res_width;x++)
        {
         XY=Y*res_width+x;
         a_data[XY]=a_data[(Y+1)*res_width-radius-1];
         r_data[XY]=r_data[(Y+1)*res_width-radius-1];
         g_data[XY]=g_data[(Y+1)*res_width-radius-1];
         b_data[XY]=b_data[(Y+1)*res_width-radius-1];
        }

Ähnliche Unschärfeberechnungen führen wir für die Y-Achse durch. Als Ergebnis erhalten wir vier Arrays a1_data[], r1_data[], g1_data[], b1_data[] mit den Unschärfewerten jeweils für Alpha, Rot, Grün und Blau. Jetzt bleibt nur noch, die vier Farbkomponenten eines jeden Pixels zusammenzuführen und auf die Leinwand CanvasShadow zu übertragen:

//---
   for(int i=0;i<size;i++)
     {
      clr_temp=ARGB(a1_data[i],r1_data[i],g1_data[i],b1_data[i]);
      res_data[i]=clr_temp;
     }
   for(uint X=0;X<res_width;X++)
     {
      for(uint Y=radius;Y<res_height-radius;Y++)
        {
         XY=Y*res_width+X;
         CanvasShadow.PixelSet(X,Y,res_data[XY]);
        }
     }
   CanvasShadow.Update();
   CanvasDraw.Update();
   Sleep(21000);

Das Ergebnis der Unschärfe einer Schicht mit Schatten:

Fig. 12. Schatten sind jetzt unscharf

5. Klasse für das Zeichnen von Schatten

Das Beispiel einer Zeichnung auf einer Leinwand ist Teil der Klasse CGauss. Die Klasse CGauss erlaubt das Zeichnen solcher Primitives mit Schatten:

Demo-Video über das Skript Blur.mq5, das die Primitives mit Schatten zeichnet:

Video 2. Zeichnen von Primitives mit Schatten

Die Numerik-Bibliothek ALGLIB wird für die Berechnung der Schattenfarbe in der Klasse CGauss benötigt. Ein Schattentyp ist in dieser Klasse realisiert — ein außen und schräg nach rechts unten versetzter Schatten (siehe Fig. 4).

Die allgemeine Idee der Klasse CGauss ist die Verwendung zweier Leinwände. Die untere Leinwand dient uns als Schicht, um die Schatten zu zeichnen, und auf der oberen Schicht zeichnen wir die Graphiken. Die Größe beider Leinwände ist gleich der Größe des Charts. Wobei die untere Leinwand nach ihrer Erstellung einfach horizontal und vertikal um die Breite des Schattens verschoben werden — auf diese Weise wird die Berechnung der Koordinaten der Schatten leichter.

Der Algorithmus für das Zeichnen der Schatten folgt diesem Prinzip: Auf der unteren Leinwand werden der Reihe nach die Anzahl der Objekte mit Radius der Unschärfe gezeichnet. Die Farbe jedes Objekts wird anhand des Gaußschen Algorithmus erstellt, der einen weichen Übergang von der angegebenen Schattenfarbe bis zur kompletten Transparenz erzeugt.

Schlussfolgerung

In diesem Artikel beschrieben wir den Algorithmus der Kantenglättung der Klasse CCanvas, zusammen mit Beispielen der Berechnung und dem Zeichnen von unscharfen Objekten und Schatten. Wir verwendeten die Numerik-Bibliothek ALGLIB zur Berechnung der Unschärfe und Schatten.

Zusätzlich wurde die Klasse CGauss geschrieben, die graphische Primitives auf der Basis verschiedener Beispiele zeichnet.