Zum Inhalt

Wie man eine Canvas verwendet

Das Canvas-Steuerelement aus der cTrader Algo API ermöglicht es Händlern, benutzerdefinierte visuelle Elemente zu erstellen, einschließlich Texte, Formen und Bilder in cTrader. Diese Zeichnungen verbessern die Datenvisualisierung für Arbeitsabläufe und bieten ein persönlicheres Handelserlebnis.

In diesem Artikel und dem dazugehörigen Video erfahren Sie, wie Sie das Canvas-Steuerelement auf einem Trading-Chart verwenden und anpassbare Parameter implementieren.

Canvas-Steuerelement erstellen

Auf die Canvas-Klasse kann von allen Algorithmustypen (cBots, Indikatoren und Plugins) zugegriffen und verwendet werden. Zusätzlich zum Zeichnen von Texten, Formen und Bildern kann das Canvas-Steuerelement verwendet werden, um spezielle Objekte wie Pfeile, Beschriftungen oder sogar Anmerkungen direkt zu Charts hinzuzufügen.

Wir werden einen cBot entwickeln, der eine Canvas auf einem Chart zeichnet. Klicken Sie in cTrader Algo auf den Button Neu, um einen cBot zu erstellen, geben Sie einen Namen ein und klicken Sie auf Erstellen.

Deklarieren Sie eine Canvas.

1
private Canvas _canvas;

Initialisieren Sie die Canvas und fügen Sie sie einem Chart hinzu.

1
2
_canvas = new Canvas();
Chart.AddControl(_canvas);

Zeichnen Sie Elemente innerhalb der Canvas. Verwenden Sie die Koordinaten Left und Top, um die Elemente zu positionieren.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var rectangle = new Rectangle
{
    Left = 50,
    Top = 50,
    Width = 100,
    Height = 50,
    StrokeColor = Color.Blue
};

_canvas.AddChild(rectangle);

var text = new TextBlock
{
    Left = 70,
    Top = 70,
    Text = "Hello Canvas!",
};

_canvas.AddChild(text);

Hinweis

Die x- und y-Achsen unterscheiden sich hier von denen, die mit Chart-Objekten oder Zeichnungen verbunden sind. Die von der Canvas-Klasse verwendeten x- und y-Koordinaten stellen numerische Werte dar, die bei (0, 0) von der oberen linken Ecke des Charts aus beginnen.

Sie können den vollständigen Code unten kopieren:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Robots
{
    [Robot(AccessRights = AccessRights.None, AddIndicators = true)]
    public class CanvasExample : Robot
    {
        [Parameter(DefaultValue = "Hello world!")]
        public string Message { get; set; }

        private Canvas _canvas;

        protected override void OnStart()
        {
           _canvas = new Canvas();
           Chart.AddControl(_canvas);

           var rectangle = new Rectangle
           {
               Left = 50,
               Top = 50,
               Width = 100,
               Height = 50,
               StrokeColor = Color.Blue 
           };

           _canvas.AddChild(rectangle);

           var text = new TextBlock
           {
               Left = 70,
               Top = 70,
               Text = "Hello Canvas!",
           };

           _canvas.AddChild(text);
        }

        protected override void OnTick()
        {
            // Handle price updates here
        }

        protected override void OnStop()
        {
            // Handle cBot stop here
        }
    }
}

Um den cBot zu erstellen, verwenden Sie die Tastenkombination Ctrl+B oder klicken Sie auf Erstellen.

Fügen Sie eine lokale Instanz des cBots hinzu, indem Sie auf Instanz hinzufügen klicken, die Option Lokal auswählen und dann auf Instanz hinzufügen klicken.

Klicken Sie auf das Play-Symbol, und die Canvas sollte auf dem Chart erscheinen. Sie sollten sehen, wie die Elemente in Bezug auf die Canvas-Ecken platziert werden.

Anpassbare Parameter hinzufügen

Kehren Sie zum Code-Editor für den cBot zurück und nehmen Sie Änderungen vor, sodass die Koordinaten für die auf dem Chart angezeigten Objekte zu anpassbaren Parametern werden.

Erstellen Sie Parameter für die x- und y-Koordinaten des Rechtecks.

1
2
3
4
5
[Parameter("Rectangle Left", DefaultValue = 50)]
public int RectangleLeft { get; set; }

[Parameter("Rectangle Top", DefaultValue = 50)]
public int RectangleTop { get; set; }

Erstellen Sie Parameter für die Breite und Höhe des Rechtecks.

1
2
3
4
5
[Parameter("Rectangle Width", DefaultValue = 100)]
public int RectangleWidth { get; set; }

[Parameter("Rectangle Height", DefaultValue = 50)]
public int RectangleHeight { get; set; }

Erstellen Sie Parameter für die x- und y-Koordinaten des Textes.

1
2
3
4
5
[Parameter("Text Left", DefaultValue = 70)]
public int TextLeft { get; set; }

[Parameter("Text Top", DefaultValue = 70)]
public int TextTop { get; set; }

Ändern Sie den rectangle-Code, damit er die neuen anpassbaren Parameter verwenden kann.

1
2
3
4
5
6
7
8
var rectangle = new Rectangle
{
    Left = RectangleLeft,
    Top = RectangleTop,
    Width = RectangleWidth,
    Height = RectangleHeight,
    StrokeColor = Color.Blue
};

Ändern Sie den text-Code, damit er die neuen anpassbaren Parameter verwenden kann.

1
2
3
4
5
6
var text = new TextBlock
{
    Left = TextLeft,
    Top = TextTop,
    Text = "Hello Canvas!",
};

Sie können den vollständigen Code unten kopieren:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Robots
{
    [Robot(AccessRights = AccessRights.None, AddIndicators = true)]
    public class CanvasExample : Robot
    {
        [Parameter("Rectangle Left", DefaultValue = 50 )]
        public int RectangleLeft { get; set; }

        [Parameter("Rectangle Top", DefaultValue = 50 )]
        public int RectangleTop { get; set; }

        [Parameter("Rectangle Width", DefaultValue = 100 )]
        public int RectangleWidth { get; set; }

        [Parameter("Rectangle Height", DefaultValue = 50 )]
        public int RectangleHeight { get; set; }

        [Parameter("Text Left", DefaultValue = 70 )]
        public int TextLeft { get; set; }

        [Parameter("Text Top", DefaultValue = 70 )]
        public int TextTop { get; set; }

        private Canvas _canvas;

        protected override void OnStart()
        {
           _canvas = new Canvas();
           Chart.AddControl(_canvas);

           var rectangle = new Rectangle
           {
               Left = RectangleLeft,
               Top = RectangleTop,
               Width = RectangleWidth,
               Height = RectangleHeight,
               StrokeColor = Color.Blue 
           };

           _canvas.AddChild(rectangle);

           var text = new TextBlock
           {
               Left = TextLeft,
               Top = TextTop,
               Text = "Hello Canvas!",
           };

           _canvas.AddChild(text);
        }

        protected override void OnTick()
        {
            // Handle price updates here
        }

        protected override void OnStop()
        {
            // Handle cBot stop here
        }
    }
}

Führen Sie den cBot erneut aus, die anpassbaren Parameter für das Rechteck und den Text sollten sichtbar sein.

Sie können neue Werte für jeden Parameter eingeben, und die Änderungen werden sofort im Chart angezeigt.

Zusammenfassung

Dieser Artikel hat Ihnen gezeigt, wie Sie das Canvas-Steuerelement verwenden, um Objekte auf einem Trading-Chart zu zeichnen und auch anpassbare Parameter für Variablen zu implementieren.