QML 图像状态和动画 九

Posted 2020-07-31 Dkma像疯子一样战斗

1 渐变

使用Gradient项目来定义。渐变中颜色使用一组GradientStop子项目进行定义。

    Rectangle{
        id:window
        width:240; height:150
        gradient: Gradient{
        GradientStop{position:0.0; color:"red"}
        GradientStop{position:0.33; color:"yellow"}
        GradientStop{position:1.0; color:"green"}
        }
    }

　　

 

2.图片、边界图片和动态图片 

2.1Image

    QML中的Image元素用来在声明式用户界面中显示图片。图片资源使用source属性作为URL来制动。

Image元素自动使用加载的图片的大小。默认的，如果指定了Image的大小，那么图片会缩放到这个大小。

也可以用fillMode属性进行拉伸或者平铺。

2.2 边界图片 BorderImage

    BorderImge元素通过缩放或者平铺图片的各个部分来创建超出图片的边界。其将图片分成九个部分

当图像缩放是，源图像的各个区域使用下面的方式进行缩放或者平铺来创建要现实的额边界图像：

• 四个角1 3 9 7 不缩放
• 2 8 horizontalTileMode属性设置的模式进行缩放
• 4 6 vertivalTileMode属性设置的模式进行缩放
• 5 两个结合属性设置进行缩放。

使用BorderImage的效果

   

2.3 动态图片 AnimatedImage

     AnimatedImage 扩展了Image元素的功能，可以用来播放包含了一些列帧的图片动画，比如GIF文件。当前帧的动画总长度等信息可以使用currentFrame和frameCount属性来获取。可以通过改变playing和paused属性的值来开始、暂停和停止动画。 

 

3. 缩放、旋转和平移

   Item元素拥有一个scale属性和一个rotation属性进行缩放和旋转。

   scale: <1 缩小 >1放大 负数镜像效果。

   rotation:项目顺时针旋转度数。

   transform属性：需要指定一个Transform元素列表。类型由三个Rotation, Scale, Translate。

                          Rotation 提供了坐标轴和远点属性。有3D效果， angle指定度数