Qt Quick学习之图像

版权声明：欢迎大佬们指点 https://blog.csdn.net/bloke_come/article/details/81004914

渐变色：Gradient(取值范围0.0——1.0)
示例代码：

Rectangle
{
    width:100;
    height:100;
    rotation: 90;//控制渐变色方向
    gradient:Gradient
    {
        Gradientstop {position:0.0; color:"#202020";}
        Gradientstop {position:0.3; color:"blue";}
        Gradientstop {position:1.0; color:"#FFFFFF";}
    }
}

Image 静态
边界图片 BorderImage
BorderImage将一个源图片分成9个区域，变化规则：
1、4个角，1、3、7、9区域不缩放
2、区域2和8通过horizontalTileMode属性设置的模式进行缩放
3、区域4和6通过verticalTileMode属性设置的模式进行缩放
4、中间部分，区域5会结合horizontalTileMode和verticalTileMode属性设置的模式进行缩放
5、Repeat平铺但可能修剪最后的图片、Stretch拉伸、Round进行平铺单将图片进行缩小来确保最后的图片不进行修剪

BorderImage
{
    width: 180;
    height: 180;
    border{ left:30; top:30; right: 30; bottom: 30 }  //上图中的四条线就是这4个属性
    horizontalTileMode: BorderImage.Repeat;
    verticalTileMode: BorderImage.Repeat;
    source: "color.png";
}

动态图片 AnimatedImage
currentFrame当前帧
frameCount动画总长度
playing开始
paused暂停

AnimatedImage
{
    source: "file:///C:/Users/admin/Desktop/key3.gif";
}

缩放、旋转和平移
scale 缩放，默认1，1.6就是放大
rotation 旋转,30°是指顺时针旋转30°
缩放是以transformOrigin属性指定的点为原点
共有9个，如下图

使用方法： transformOrigin: "TopLeft";

Transform是一个基本元素，有3个基本元素，分别为Rotation旋转、Scale缩放和Translate平移。通过3个轴XYZ实现

transform：Rotation
{
    origin.x: 30;
    origin.y: 30;
    axis
    {
        x: 0;
        y: 1;
        z: 0;
    }
    angle: 72;
}