Lewati ke isi

Cara menggunakan canvas

Kontrol canvas dari API cTrader Algo memungkinkan trader untuk membuat visual kustom, termasuk teks, bentuk, dan gambar di cTrader. Gambar-gambar ini meningkatkan visualisasi data untuk alur kerja dan memberikan pengalaman trading yang lebih personal.

Dalam artikel ini dan video terkaitnya, Anda akan belajar cara menggunakan kontrol canvas pada grafik trading dan mengimplementasikan parameter yang dapat disesuaikan.

Buat kontrol canvas

Kelas Canvas dapat diakses dan digunakan oleh semua jenis algoritma (cBot, indikator, dan plugin). Selain menggambar teks, bentuk, dan gambar, kontrol canvas dapat digunakan untuk menambahkan objek khusus seperti panah, label, atau bahkan anotasi langsung ke grafik.

Kita akan mengembangkan cBot yang menggambar canvas pada grafik. Di cTrader Algo, klik tombol New untuk membuat cBot, masukkan nama dan klik Create.

Deklarasikan canvas.

1
private Canvas _canvas;

Inisialisasi canvas dan tambahkan ke grafik.

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

Gambar elemen di dalam canvas. Gunakan koordinat Left dan Top untuk memposisikan 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);

Catatan

Sumbu x dan y di sini berbeda dari yang terkait dengan objek atau gambar grafik. Koordinat x dan y yang digunakan oleh kelas Canvas mewakili nilai numerik yang dimulai dari (0, 0) dari sudut kiri atas grafik.

Anda dapat menyalin kode lengkapnya di bawah ini:

 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 membangun cBot, gunakan hotkey Ctrl+B atau klik Build.

Tambahkan instance lokal cBot dengan mengklik Add instance, pilih opsi Locally dan kemudian klik Add instance.

Klik ikon play, dan canvas seharusnya muncul di grafik. Anda akan melihat bagaimana elemen-elemen ditempatkan dalam kaitannya dengan sudut-sudut canvas.

Tambahkan parameter yang dapat disesuaikan

Kembali ke editor kode untuk cBot dan buat perubahan sehingga koordinat untuk objek yang ditampilkan pada grafik menjadi parameter yang dapat disesuaikan.

Buat parameter untuk koordinat x dan y dari persegi panjang.

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

Buat parameter untuk lebar dan tinggi persegi panjang.

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

Buat parameter untuk koordinat x dan y dari 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; }

Modifikasi kode rectangle untuk memungkinkannya menggunakan parameter yang dapat disesuaikan yang baru.

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

Modifikasi kode text untuk memungkinkannya menggunakan parameter yang dapat disesuaikan yang baru.

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

Anda dapat menyalin kode lengkapnya di bawah ini:

 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 lagi, parameter yang dapat disesuaikan untuk persegi panjang dan teks seharusnya terlihat.

Anda dapat memasukkan nilai baru untuk parameter apa pun, dan perubahan akan langsung tercermin dalam grafik.

Ringkasan

Artikel ini telah menunjukkan kepada Anda cara menggunakan kontrol canvas untuk menggambar objek pada grafik trading dan juga mengimplementasikan parameter yang dapat disesuaikan untuk variabel.