ข้ามไปที่เนื้อหา

วิธีใช้ผืนผ้าใบ

การควบคุมแคนวาสของ API ของ cTrader Algo ช่วยให้นักเทรดสามารถสร้างภาพที่กำหนดเองได้ รวมถึงข้อความ รูปร่าง และรูปภาพใน cTrader การวาดเหล่านี้ช่วยเพิ่มประสิทธิภาพการแสดงข้อมูลสำหรับขั้นตอนการทำงานและให้ประสบการณ์การเทรดที่ปรับแต่งได้มากขึ้น

ในบทความนี้และวิดีโอที่เกี่ยวข้อง คุณจะได้เรียนรู้วิธีใช้การควบคุมแคนวาสในกราฟการเทรดและการใช้พารามิเตอร์ที่ปรับแต่งได้

สร้างการควบคุมผืนผ้าใบ

คลาส Canvas สามารถเข้าถึงและใช้งานได้โดยอัลกอริทึมทุกประเภท (cBots, อินดิเคเตอร์ และปลั๊กอิน) นอกจากการวาดข้อความ รูปร่าง และรูปภาพแล้ว การควบคุมแคนวาสยังสามารถใช้เพื่อเพิ่มวัตถุพิเศษ เช่น ลูกศร ป้ายกำกับ หรือแม้แต่คำอธิบายประกอบลงในกราฟได้โดยตรง

เราจะพัฒนา cBot ที่วาดแคนวาสบนกราฟ ใน cTrader Algo ให้คลิกปุ่ม ใหม่ เพื่อสร้าง cBot ป้อนชื่อ และคลิก สร้าง

ประกาศแคนวาส

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

ในการสร้าง cBot ให้ใช้ปุ่มลัด Ctrl+B หรือคลิก Build

เพิ่มอินสแตนซ์ cBot ในเครื่องโดยคลิกที่ เพิ่มอินสแตนซ์ เลือกตัวเลือก ในเครื่อง แล้วคลิกที่ เพิ่มอินสแตนซ์

คลิกที่ไอคอนเล่น และผืนผ้าใบควรปรากฏบนกราฟ คุณควรเห็นวิธีการวางองค์ประกอบต่างๆ ในความสัมพันธ์กับมุมของผืนผ้าใบ

เพิ่มพารามิเตอร์ที่ปรับแต่งได้

กลับไปที่โค้ดเอดิเตอร์สำหรับ cBot และทำการเปลี่ยนแปลงเพื่อให้พิกัดของวัตถุที่แสดงบนกราฟกลายเป็นพารามิเตอร์ที่ปรับแต่งได้

สร้างพารามิเตอร์สำหรับพิกัด 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
        }
    }
}

รัน cBot อีกครั้ง พารามิเตอร์ที่ปรับแต่งได้สำหรับสี่เหลี่ยมผืนผ้าและข้อความควรจะปรากฏให้เห็น

คุณสามารถป้อนค่าใหม่สำหรับพารามิเตอร์ใดก็ได้ และการเปลี่ยนแปลงจะแสดงผลบนกราฟทันที

สรุป

บทความนี้ได้แสดงให้คุณเห็นวิธีการใช้การควบคุมแคนวาสเพื่อวาดวัตถุบนกราฟการเทรดและยังใช้พารามิเตอร์ที่ปรับแต่งได้สำหรับตัวแปร