渐变色: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;
}