Langkau tajuk talian

Cara menggunakan kanvas

Kawalan kanvas dari API cTrader Algo membolehkan pedagang mencipta visual tersuai, termasuk teks, bentuk dan imej dalam cTrader. Lukisan ini meningkatkan visualisasi data untuk aliran kerja dan menyediakan pengalaman dagangan yang lebih diperibadikan.

Dalam artikel ini dan video yang berkaitan, anda akan mempelajari cara menggunakan kawalan kanvas pada carta dagangan dan melaksanakan parameter yang boleh disesuaikan.

Cipta kawalan kanvas

Kelas Canvas boleh diakses dan digunakan oleh semua jenis algoritma (cBot, indikator dan plugin). Selain melukis teks, bentuk dan imej, kawalan kanvas boleh digunakan untuk menambah objek khas seperti anak panah, label atau anotasi terus pada carta.

Kita akan membangunkan cBot yang melukis kanvas pada carta. Di cTrader Algo, klik butang New untuk mencipta cBot, masukkan nama dan klik Create.

Isytiharkan kanvas.

1
private Canvas _canvas;

Mulakan kanvas dan tambahkannya pada carta.

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

Lukis elemen di dalam kanvas. Gunakan koordinat Left dan Top untuk meletakkan elemen.

 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

Paksi x dan y di sini berbeza daripada yang berkaitan dengan objek carta atau lukisan. Koordinat x dan y yang digunakan oleh kelas Canvas mewakili nilai angka bermula dari (0, 0) dari sudut kiri atas carta.

Anda boleh menyalin kod penuh di bawah:

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

Untuk membina cBot, gunakan kekunci pintas Ctrl+B atau klik Build.

Tambah contoh tempatan cBot dengan mengklik Add instance, memilih pilihan Locally dan kemudian mengklik Add instance.

Klik ikon play, dan kanvas sepatutnya muncul pada carta. Anda sepatutnya melihat bagaimana elemen diletakkan berhubung dengan sudut kanvas.

Tambah parameter boleh suai

Kembali ke penyunting kod untuk cBot dan buat perubahan supaya koordinat untuk objek yang ditunjukkan pada carta menjadi parameter boleh suai.

Cipta parameter untuk koordinat x dan y segi empat tepat.

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

Cipta parameter untuk lebar dan tinggi segi empat tepat.

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

Cipta parameter untuk koordinat x dan y teks.

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

Ubah suai kod rectangle untuk membolehkannya menggunakan parameter boleh suai baharu.

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

Ubah suai kod text untuk membolehkannya menggunakan parameter boleh suai baharu.

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

Anda boleh menyalin kod penuh di bawah:

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

Jalankan cBot sekali lagi, parameter boleh suai untuk segi empat tepat dan teks sepatutnya kelihatan.

Anda boleh memasukkan nilai baharu untuk mana-mana parameter, dan perubahan akan ditunjukkan pada carta dengan serta-merta.

Ringkasan

Artikel ini telah menunjukkan kepada anda cara menggunakan kawalan kanvas untuk melukis objek pada carta dagangan dan juga melaksanakan parameter boleh suai untuk pemboleh ubah.