Перейти к содержанию

Как использовать холст

Элемент управления холстом из cTrader Algo API позволяет трейдерам создавать пользовательские визуальные элементы, включая тексты, фигуры и изображения в cTrader. Эти рисунки улучшают визуализацию данных для рабочих процессов и обеспечивают более персонализированный торговый опыт.

В этой статье и соответствующем видео вы узнаете, как использовать элемент управления холстом на торговом графике и реализовать настраиваемые параметры.

Создание элемента управления холстом

Класс Canvas доступен и может использоваться всеми типами алгоритмов (сиБотами, индикаторами и плагинами). Помимо рисования текстов, фигур и изображений, элемент управления холстом можно использовать для добавления специальных объектов, таких как стрелки, метки или даже аннотации непосредственно на графики.

Мы разработаем сиБота, который рисует холст на графике. В cTrader Algo нажмите кнопку New, чтобы создать сиБота, введите имя и нажмите Create.

Объявите холст.

1
private Canvas _canvas;

Инициализируйте холст и добавьте его на график.

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

Нарисуйте элементы внутри холста. Используйте координаты Left и Top для позиционирования элементов.

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

Примечание

Оси x и y здесь отличаются от тех, которые связаны с объектами графика или рисунками. Координаты x и y, используемые классом Canvas, представляют собой числовые значения, начинающиеся с (0, 0) от верхнего левого угла графика.

Вы можете скопировать полный код ниже:

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

Чтобы собрать сиБота, используйте горячую клавишу Ctrl+B или нажмите Собрать.

Добавьте локальный экземпляр сиБота, нажав Add instance, выбрав опцию Locally, а затем нажав Add instance.

Нажмите значок play, и холст должен появиться на графике. Вы должны увидеть, как элементы размещены относительно углов холста.

Добавление настраиваемых параметров

Вернитесь в редактор кода для сиБота и внесите изменения, чтобы координаты объектов, отображаемых на графике, стали настраиваемыми параметрами.

Создайте параметры для координат x и y прямоугольника.

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

Создайте параметры для ширины и высоты прямоугольника.

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

Создайте параметры для координат x и y текста.

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

Измените код rectangle, чтобы он использовал новые настраиваемые параметры.

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

Измените код text, чтобы он использовал новые настраиваемые параметры.

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

Вы можете скопировать полный код ниже:

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

Запустите сиБота снова, настраиваемые параметры для прямоугольника и текста должны быть видны.

Вы можете ввести новые значения для любого параметра, и изменения будут немедленно отражены на графике.

Обзор

В этой статье показано, как использовать элемент управления холстом для рисования объектов на торговом графике, а также реализовать настраиваемые параметры для переменных.