Bỏ qua

Cách sử dụng canvas

Điều khiển canvas từ API cTrader Algo cho phép các nhà giao dịch tạo ra các hình ảnh tùy chỉnh, bao gồm văn bản, hình dạng và hình ảnh trong cTrader. Những hình vẽ này cải thiện việc trực quan hóa dữ liệu cho quy trình làm việc và cung cấp trải nghiệm giao dịch được cá nhân hóa hơn.

Trong bài viết này và video tương ứng, bạn sẽ học cách sử dụng điều khiển canvas trên biểu đồ giao dịch và triển khai các tham số có thể tùy chỉnh.

Tạo điều khiển canvas

Lớp Canvas có thể được truy cập và sử dụng bởi tất cả các loại thuật toán (cBot, chỉ báo và plugin). Ngoài việc vẽ văn bản, hình dạng và hình ảnh, điều khiển canvas có thể được sử dụng để thêm các đối tượng đặc biệt như mũi tên, nhãn hoặc thậm chí là chú thích trực tiếp vào biểu đồ.

Chúng ta sẽ phát triển một cBot vẽ canvas trên biểu đồ. Trong cTrader Algo, nhấp vào nút New để tạo một cBot, nhập tên và nhấp vào Create.

Khai báo một canvas.

1
private Canvas _canvas;

Khởi tạo canvas và thêm nó vào biểu đồ.

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

Vẽ các phần tử bên trong canvas. Sử dụng tọa độ Left và Top để định vị các phần tử.

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

Ghi chú

Trục x và y ở đây khác với những trục liên quan đến các đối tượng biểu đồ hoặc hình vẽ. Tọa độ x và y được sử dụng bởi lớp Canvas đại diện cho các giá trị số bắt đầu từ (0, 0) từ góc trên bên trái của biểu đồ.

Bạn có thể sao chép toàn bộ mã bên dưới:

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

Để xây dựng cBot, sử dụng phím tắt Ctrl+B hoặc nhấp vào Build.

Thêm một phiên bản cục bộ của cBot bằng cách nhấp vào Add instance, chọn tùy chọn Locally và sau đó nhấp vào Add instance.

Nhấp vào biểu tượng play, và canvas sẽ xuất hiện trên biểu đồ. Bạn sẽ thấy cách các phần tử được đặt liên quan đến các góc của canvas.

Thêm các tham số có thể tùy chỉnh

Quay lại trình chỉnh sửa mã cho cBot và thực hiện các thay đổi để tọa độ của các đối tượng hiển thị trên biểu đồ trở thành các tham số có thể tùy chỉnh.

Tạo các tham số cho tọa độ x và y của hình chữ nhật.

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

Tạo các tham số cho chiều rộng và chiều cao của hình chữ nhật.

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

Tạo các tham số cho tọa độ x và y của văn bản.

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

Sửa đổi mã rectangle để cho phép nó sử dụng các tham số có thể tùy chỉnh mới.

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

Sửa đổi mã text để cho phép nó sử dụng các tham số có thể tùy chỉnh mới.

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

Bạn có thể sao chép toàn bộ mã bên dưới:

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

Chạy lại cBot, các tham số có thể tùy chỉnh cho hình chữ nhật và văn bản sẽ hiển thị.

Bạn có thể nhập giá trị mới cho bất kỳ tham số nào, và các thay đổi sẽ được phản ánh ngay lập tức trên biểu đồ.

Tổng quan

Bài viết này đã chỉ cho bạn cách sử dụng điều khiển canvas để vẽ các đối tượng trên biểu đồ giao dịch và cũng triển khai các tham số có thể tùy chỉnh cho các biến.