キャンバスの使用方法

cTrader Algo APIのキャンバスコントロールを使用すると、トレーダーはテキスト、図形、画像などのカスタムビジュアルをcTrader内で作成できます。これらの描画は、ワークフローのデータ可視化を向上させ、よりパーソナライズされた取引体験を提供します。

この記事と対応するビデオでは、取引チャート上でキャンバスコントロールを使用し、カスタマイズ可能なパラメーターを実装する方法を学びます。

キャンバスコントロールを作成する

Canvasクラスは、すべてのアルゴリズムタイプ（cBot、インジケーター、プラグイン）でアクセスおよび使用できます。テキスト、図形、画像を描画するだけでなく、キャンバスコントロールを使用して、矢印、ラベル、さらには注釈などの特別なオブジェクトを直接チャートに追加することもできます。

チャート上にキャンバスを描画するcBotを開発します。 cTrader Algoで、新規ボタンをクリックしてcBotを作成し、名前を入力して作成をクリックします。

キャンバスを宣言します。

private Canvas _canvas;

キャンバスを初期化し、チャートに追加します。

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

キャンバス内に要素を描画します。 LeftとTop座標を使用して要素を配置します。

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座標は、チャートの左上隅から始まる数値です。

以下の完全なコードをコピーできます：

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座標のパラメーターを作成します。

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

テキストのx座標とy座標のパラメーターを作成します。

[Parameter("Text Left", DefaultValue = 70)]
public int TextLeft { get; set; }

[Parameter("Text Top", DefaultValue = 70)]
public int TextTop { get; set; }

rectangleコードを変更して、新しいカスタマイズ可能なパラメーターを使用できるようにします。

var rectangle = new Rectangle
{
    Left = RectangleLeft,
    Top = RectangleTop,
    Width = RectangleWidth,
    Height = RectangleHeight,
    StrokeColor = Color.Blue
};

textコードを変更して、新しいカスタマイズ可能なパラメーターを使用できるようにします。

var text = new TextBlock
{
    Left = TextLeft,
    Top = TextTop,
    Text = "Hello Canvas!",
};

以下の完全なコードをコピーできます：

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を再度実行すると、長方形とテキストのカスタマイズ可能なパラメーターが表示されるはずです。

どのパラメーターにも新しい値を入力でき、変更はすぐにチャートに反映されます。

'矩形左'を100に設定'テキスト左'を120に設定

概要

この記事では、キャンバスコントロールを使用して取引チャート上にオブジェクトを描画し、変数のカスタマイズ可能なパラメーターを実装する方法を紹介しました。