Qt Quick学习笔记(六)

第10章

Canvas

QML中的canvas，俗称画布，它用来定义一个绘图区域，你可以使用ECMAScript代码来绘制直线、矩形、贝塞尔曲线、弧线、图片文字等图元，还可以为图元应用填充颜色和边框颜色，甚至还可以进行低阶像素级操作。

Context2D

var ctx=getContext(“2d”);

画笔

笔有颜色，是为strokeStyle属性；笔有粗细，是为lineWidth属性。

画刷

在Context2D，fillStyle属性就是描述画刷的。

图元

基本图元有线、弧、矩形、曲线、文本、图片等。

基本绘图模式

Canvas是Item的派生类，通过设置width和height属性，就可以设定一个绘图区域，然后在onPaint()信号处理器内使用Context2D对象来绘图。

PropertyAnimation对象

//定义一个PropertyAnimation对象。默认不启动。当你用鼠标左键点击蓝色矩形，通过设置running属性为true来启动动画，把蓝色矩形宽度设置为150，矩形变成正方形。
    Rectangle{
        id:rect;
        width:50;
        height:150;
        anchors.centerLn:parent;
        color:"blue";

        PropertyAnimation{
            id:animation;
            //设置target属性指定要操作的目标对象
            //即id=“rect”的矩形
            target:rect;
            //使用property属性指定要改变目标对象的那个属性

            property:"width";
            //使用to属性指定目标属性的目标值
            to:150;
            //设置duration为1000ms
            duration:1000;
        }
        MouseArea{
            anchors.fill:parent;
            onClicked:animation.running=true;
        }
    }
    //PropertyAnimation还有from属性，指定动画启动时候要改变的目标属性的初始值。如果不指定，动画对象会使用动画开始时候目标对象的目标属性当前值。

改变多个属性

如果想改变多个属性，可以使用PropertyAnimation的properties属性来指定，属性名以英文逗号分隔，而这些属性共用to指定的目标值。所以目标属性最好是同一个类型property 。

PropertyAnimation{
id:animation;
target:rect;
properties:”width,height”;
to:220；
}

同时改变多个目标对象

PropertyAnimation{
id：animation;
targets:[rectA,rectB];
properties: “width”;
to :150;
duration:1000;
}

NumberAnimation

是PropertyAnimation的派生类，专门处理数字类型的property，它重写了from和to2个属性，将其类型设置为real。