Aller au contenu

Comment utiliser un canvas

Le contrôle canvas de l'API cTrader Algo permet aux traders de créer des visuels personnalisés, y compris des textes, des formes et des images dans cTrader. Ces dessins améliorent la visualisation des données pour les flux de travail et offrent une expérience de trading plus personnalisée.

Dans cet article et la vidéo correspondante, vous apprendrez à utiliser le contrôle canvas sur un graphique de trading et à implémenter des paramètres personnalisables.

Créer un contrôle canvas

La classe Canvas peut être accessible et utilisée par tous les types d'algorithmes (cBots, indicateurs et plug-ins). En plus de dessiner des textes, des formes et des images, le contrôle canvas peut être utilisé pour ajouter des objets spéciaux tels que des flèches, des étiquettes ou même des annotations directement sur les graphiques.

Nous allons développer un cBot qui dessine un canvas sur un graphique. Dans cTrader Algo, cliquez sur le bouton Nouveau pour créer un cBot, entrez un nom et cliquez sur Créer.

Déclarez un canvas.

1
private Canvas _canvas;

Initialisez le canvas et ajoutez-le à un graphique.

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

Dessinez des éléments à l'intérieur du canvas. Utilisez les coordonnées Left et Top pour positionner les éléments.

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

Remarque

Les axes x et y diffèrent ici de ceux associés aux objets de graphique ou aux dessins. Les coordonnées x et y utilisées par la classe Canvas représentent des valeurs numériques commençant à (0, 0) depuis le coin supérieur gauche du graphique.

Vous pouvez copier le code complet ci-dessous :

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

Pour créer le cBot, utilisez le raccourci clavier Ctrl+B ou cliquez sur Créer.

Ajoutez une instance locale du cBot en cliquant sur Ajouter une instance, en sélectionnant l'option Localement, puis en cliquant sur Ajouter une instance.

Cliquez sur l'icône lecture, et le canvas devrait apparaître sur le graphique. Vous devriez voir comment les éléments sont placés par rapport aux coins du canvas.

Ajouter des paramètres personnalisables

Retournez à l'éditeur de code pour le cBot et apportez des modifications afin que les coordonnées des objets affichés sur le graphique deviennent des paramètres personnalisables.

Créez des paramètres pour les coordonnées x et y du rectangle.

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

Créez des paramètres pour la largeur et la hauteur du rectangle.

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

Créez des paramètres pour les coordonnées x et y du texte.

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

Modifiez le code rectangle pour lui permettre d'utiliser les nouveaux paramètres personnalisables.

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

Modifiez le code text pour lui permettre d'utiliser les nouveaux paramètres personnalisables.

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

Vous pouvez copier le code complet ci-dessous :

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

Exécutez à nouveau le cBot, les paramètres personnalisables pour le rectangle et le texte devraient être visibles.

Vous pouvez entrer de nouvelles valeurs pour n'importe quel paramètre, et les modifications seront immédiatement reflétées dans le graphique.

Résumé

Cet article vous a montré comment utiliser le contrôle canvas pour dessiner des objets sur un graphique de trading et également implémenter des paramètres personnalisables pour les variables.