Canvas

简介

canvas是画布控件。可通过JS脚本实现在指定区域绘制自定义图片,能够把图片元素绘制到画布中。

canvas能够实现一系列图标,如柱饼图、折线图、柱状图等。甚至能够通过canvas制作游戏。

具体使用方法和API请查阅Canvas文档

Sample

sample演示如何利用canvas制作简易饼图,更多画布相关的sample请查阅:

https://www.rt-thread.org/document/site/tutorial/PersimmonM/lesson04/

控件布局

layout

直接在Page中拖放一个Canvas控件,背景颜色设置为白色。

JS代码

onload函数中执行绘制代码。

onLoad:function(event){
    var data = [ 20, 30, 40, 50, 60, 70 ];  //饼图数据
    var colors = [ "#ff0000", "#ffff00", "#ff00ff", 
                   "#00ff00", "#00ffff", "#0000ff"];   //饼图颜色
    var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象
    if (context)
    {
        var total = 0;  //饼图数据总和

        for( var index = 0; index < data.length; index++ )
        {
            total += data[ index ];
        }

        var point = { x: 200, y: 200 };     //圆心坐标,相对于画布
        var radius = 150;                   //半径
        var start = -0.5 * Math.PI;         //起始弧度

        for( var i = 0; i < data.length; i++ )
        {
            var stop = start + data[ i ] / total * 2 * Math.PI;     //结束弧度

            context.beginPath();    //开始新的路径

            context.arc( point.x, point.y, radius, start, stop, false);     //画一段圆弧

            context.lineTo( point.x, point.y );     //连接圆弧终点和圆心
            context.setFillStyle( colors[ i ] );    //设置填充颜色
            context.fill();                         //填充路径

            context.closePath();                    //关闭路径
            start = stop;                           //起始弧度更新
        }

        context.draw();     //更新画布
    }
},

效果

sample

Canvas属性

公共属性

  • 控件类型

    默认 canvas,且不可改动。

  • 透明度

    设置背景颜色的透明度,范围: 0 ~ 255。也可以在背景颜色中设定。

    注:当背景图片的设定不为空时,将自动设置为 0。

名称

  • 控件名称

    设定控件的名称。

    在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

    如果设定值为True,则设计器中无法移动该控件。

  • 是否隐藏控件

    选项:True/False

    设定该控件是否需要隐藏。

    如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。

    当控件已隐藏时,可通过在工程管理器中点击来选中该控件。

调用属性

  • bindtouch

    绑定touch事件,如果设定值为onTouch时,当canvas被触碰时,将调用JS脚本中Page对象中的onTouch函数。

图片

  • 背景图片

    设定控件的背景图片,不支持缩放,且居中显示。

外观

  • 背景颜色

    设定背景颜色,设定背景颜色的ARGB值。

    可打开颜色选择器,通过颜色选择器修改RGB值。

    Alpha值(即透明度),可以直接修改设定值 或 修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。

位置属性

  • x坐标点

    设定 控件的左上角 相对于 父控件的左上角 的横坐标。

  • y坐标点

    设定 控件的左上角 相对于 父控件的左上角 的纵坐标。

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度