콘텐츠로 이동

캔버스 사용 방법

cTrader Algo API의 캔버스 컨트롤은 트레이더가 텍스트, 도형 및 이미지를 포함한 맞춤형 시각적 요소를 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축은 차트 객체 또는 그림과 관련된 축과 다릅니다. Canvas 클래스에서 사용하는 x와 y 좌표는 차트의 왼쪽 상단 모서리에서 시작하는 (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 단축키를 사용하거나 빌드를 클릭하세요.

인스턴스 추가를 클릭하고 로컬 옵션을 선택한 후 인스턴스 추가를 클릭하여 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을 다시 실행하면 사각형과 텍스트에 대한 맞춤형 매개변수가 표시됩니다.

어떤 매개변수에 대해 새로운 값을 입력하면 변경 사항이 즉시 차트에 반영됩니다.

요약

이 글에서는 캔버스 컨트롤을 사용하여 트레이딩 차트에 객체를 그리는 방법과 변수에 대한 맞춤형 매개변수를 구현하는 방법을 보여주었습니다.