Saltar a contenido

Cómo usar un lienzo

El control de lienzo de la API de cTrader Algo permite a los operadores crear visuales personalizados, incluyendo textos, formas e imágenes en cTrader. Estos dibujos mejoran la visualización de datos para los flujos de trabajo y proporcionan una experiencia de operación más personalizada.

En este artículo y su video correspondiente, aprenderá a utilizar el control de lienzo en un gráfico de operaciones e implementar parámetros personalizables.

Crear control de lienzo

La clase Canvas puede ser accedida y utilizada por todos los tipos de algoritmos (cBots, indicadores y plugins). Además de dibujar textos, formas e imágenes, el control de lienzo puede utilizarse para añadir objetos especiales como flechas, etiquetas o incluso anotaciones directamente en los gráficos.

Desarrollaremos un cBot que dibuja un lienzo en un gráfico. En cTrader Algo, haga clic en el botón Nuevo para crear un cBot, introduzca un nombre y haga clic en Crear.

Declare un lienzo.

1
private Canvas _canvas;

Inicialice el lienzo y añádalo a un gráfico.

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

Dibuje elementos dentro del lienzo. Utilice las coordenadas Left y Top para posicionar los elementos.

 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

Los ejes x e y aquí difieren de los asociados con objetos o dibujos del gráfico. Las coordenadas x e y utilizadas por la clase Canvas representan valores numéricos que comienzan en (0, 0) desde la esquina superior izquierda del gráfico.

Puede copiar el código completo a continuación:

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

Para construir el cBot, use el atajo Ctrl+B o haga clic en Construir.

Añada una instancia local del cBot haciendo clic en Añadir instancia, seleccionando la opción Localmente y luego haciendo clic en Añadir instancia.

Haga clic en el icono de reproducción, y el lienzo debería aparecer en el gráfico. Debería ver cómo se colocan los elementos en relación con las esquinas del lienzo.

Añadir parámetros personalizables

Vuelva al editor de código del cBot y realice cambios para que las coordenadas de los objetos mostrados en el gráfico se conviertan en parámetros personalizables.

Cree parámetros para las coordenadas x e y del rectángulo.

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

Cree parámetros para el ancho y alto del rectángulo.

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

Cree parámetros para las coordenadas x e y del texto.

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

Modifique el código del rectangle para que pueda utilizar los nuevos parámetros personalizables.

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

Modifique el código del text para que pueda utilizar los nuevos parámetros personalizables.

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

Puede copiar el código completo a continuación:

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

Ejecute el cBot de nuevo, los parámetros personalizables para el rectángulo y el texto deberían ser visibles.

Puede introducir nuevos valores para cualquier parámetro, y los cambios se reflejarán en el gráfico inmediatamente.

Resumen

Este artículo le ha mostrado cómo utilizar el control de lienzo para dibujar objetos en un gráfico de operaciones y también implementar parámetros personalizables para variables.