如何使用画布

cTrader Algo API 中的画布控件使交易者能够创建自定义视觉效果，包括文本、形状和图像。这些绘图改善了工作流程的数据可视化，并提供了更加个性化的交易体验。

在本文及其对应的视频中，您将学习如何在交易图表上使用画布控件并实现可自定义的参数。

创建画布控件

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 坐标表示从图表左上角开始的 (0, 0) 数值。

您可以复制以下完整代码：

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

摘要

本文向您展示了如何使用画布控件在交易图表上绘制对象，并为变量实现可自定义的参数。