Vai al contenuto

Come usare un canvas

Il controllo canvas dell'API cTrader Algo consente ai trader di creare elementi visivi personalizzati, inclusi testi, forme e immagini in cTrader. Questi disegni migliorano la visualizzazione dei dati per i flussi di lavoro e offrono un'esperienza di trading più personalizzata.

In questo articolo e nel video corrispondente imparerai come usare il controllo canvas su un grafico di trading e implementare parametri personalizzabili.

Creare il controllo canvas

La classe Canvas può essere utilizzata da tutti i tipi di algoritmo (cBot, indicatori e plugin). Oltre a disegnare testi, forme e immagini, il controllo canvas può essere utilizzato per aggiungere oggetti speciali come frecce, etichette o anche annotazioni direttamente ai grafici.

Svilupperemo un cBot che disegna un canvas su un grafico. In cTrader Algo, fai clic sul pulsante Nuovo per creare un cBot, inserisci un nome e fai clic su Crea.

Dichiara un canvas.

1
private Canvas _canvas;

Inizializza il canvas e aggiungilo a un grafico.

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

Disegna elementi all'interno del canvas. Usa le coordinate Left e Top per posizionare gli elementi.

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

Nota

Gli assi x e y qui differiscono da quelli associati agli oggetti del grafico o ai disegni. Le coordinate x e y utilizzate dalla classe Canvas rappresentano valori numerici che partono da (0, 0) dall'angolo in alto a sinistra del grafico.

Puoi copiare il codice completo qui sotto:

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

Per compilare il cBot, usa la scorciatoia Ctrl+B o clicca su Compila.

Aggiungi un'istanza locale del cBot facendo clic su Aggiungi istanza, selezionando l'opzione Localmente e poi facendo clic su Aggiungi istanza.

Fai clic sull'icona play e il canvas dovrebbe apparire sul grafico. Dovresti vedere come gli elementi sono posizionati in relazione agli angoli del canvas.

Aggiungere parametri personalizzabili

Torna all'editor di codice per il cBot e apporta modifiche in modo che le coordinate per gli oggetti mostrati sul grafico diventino parametri personalizzabili.

Crea parametri per le coordinate x e y del rettangolo.

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

Crea parametri per la larghezza e l'altezza del rettangolo.

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

Crea parametri per le coordinate x e y del testo.

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

Modifica il codice rectangle per consentirgli di utilizzare i nuovi parametri personalizzabili.

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

Modifica il codice text per consentirgli di utilizzare i nuovi parametri personalizzabili.

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

Puoi copiare il codice completo qui sotto:

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

Esegui nuovamente il cBot, i parametri personalizzabili per il rettangolo e il testo dovrebbero essere visibili.

Puoi inserire nuovi valori per qualsiasi parametro e le modifiche si rifletteranno immediatamente nel grafico.

Questo articolo ti ha mostrato come usare il controllo canvas per disegnare oggetti su un grafico di trading e anche implementare parametri personalizzabili per le variabili.