QML学习——图像特效及QtGraphicalEffects（五）

图像特效及QtGraphicalEffects

3D旋转效果

• 效果图：
• 使用transform属性来进行变换特效；
  • 需要指定一个Transform元素列表，Transform元素是抽象基类元素，没有实例化，所以QtQuick 2.15提供四个可用的实体元素类型：
    • Rotation：提供Item旋转变换效果；
    • Scale：提供缩放效果；
    • Translate：提供平移效果；
    • Matrix4x4：提供矩阵变换；
  • 每个实体元素都有专门的属性来进行更加高级的设置，其中Rotation提供了坐标轴和原点属性：
    • axis.x、axis.y、axis.z代表x、y、z轴；
      • 数值>0表示在哪个方向顺时针旋转，<0表示逆时针；
    • 原点由origin.x和origin.y指定；
• AnimateImage是Image元素的扩展，可以用来播放包含一系列帧的图像动画，例如gif文件；
  • 可以使用currentFrame属性获得当前帧，使用frameCount属性获得动画总长度；
  • 还可以更改playing和paused属性的值来手动开始、暂停、停止动画；

举个例子：

Rectangle {
    id: rootRect_ID
    width: animatedImage_ID.width
    height: animatedImage_ID.height
    transform: Rotation {
        //设置图像原点的位置
        origin.x: animatedImage_ID.width / 2
        origin.y: animatedImage_ID.height / 2
        axis {
            x: 1
            y: 1
            z: 1
        }
        //定义Rotation元素中属性angle（角度）上的动画
        NumberAnimation on angle {
            from: 0
            to: 360
            duration: 10000
            loops: Animation.Infinite
        }
    }

    AnimatedImage {
        id: animatedImage_ID
        source: "qrc:/Pictures/Used_Images/Pictures/01_QML.png"
    }
}

QtGraphicalEffects图形特效

• QML的QtGraphicalEffects库提供了图形特效元素类型，其中有实现图像由彩色变黑白、加阴影、模糊处理、对比度、亮度等特效；
• 使用QtGraphicalEffects的BrightnessContrast特效元素，可以设置源元素的亮度和对比度；
  • source属性一般是一个Image或AnimatedImage；
  • brightness属性设置源元素的亮度，由最暗到最亮对应的取值范围是： -1.0 ~ 1.0，默认为0.0
  • contrast属性设置源元素的对比度，取值范围为：-1.0 ~ 1.0，其中，-1.0 ~ 0.0的对比度是线性增加，0.0 ~ 1.0的对比度是非线性增加的，越接近1.0增加曲线越陡峭；
• BrightnessContrast effect is available when running with OpenGL

QtGraphicalEffects的其他元素类型

• QtGraphicalEffects的其他元素，可参考PhotoShop中对图像的处理：
  • Blend：使用混合模式合并两个源项；
  • coloroverlayer：通过应用叠加颜色来改变源项的颜色；
  • Colorize：类似于将彩色玻璃放在灰度图像上所发生的效果。Colorize使用色调、饱和度和明度(HSL)色彩空间；
  • Desaturate：降低颜色的饱和度，其desaturation属性越大饱和度越小；
  • GammaAdjust：调节Gamma曲线值改变亮度；
  • HueSaturation：更改HSL颜色空间中的源元素的颜色；
  • LevelAdjust：调整RGBA色彩空间中的色彩级别；
  • ConicalGradient：锥形渐变；
  • LinearGradient：线性渐变；
  • RadialGradient：径向渐变；
  • Displace：根据给定的位移图，移动源元素；
  • DropShadow：在源元素后面生成一个柔和的阴影；
  • InnerShadow：在源元素内部产生一个彩色和模糊的阴影；
  • FastBlur：快速模糊效果；
  • GaussianBlur：高斯模糊效果；
  • MaskedBlur：通过给定源来应用不同强度的模糊；
  • RecursiveBlur：反复强烈模糊；
  • DirectionalBlur：对指定方向应用模糊效果；
  • RadialBlur：在源元素中心点周围的圆形方向上应用方向模糊；
  • ZoomBlur：对源元素中心点应用方向模糊效果；
  • Glow：在源元素周围产生类似光晕的辉光；
  • RectangularGlow：产生一个给人 ”源元素是发光的感觉” 的模糊和彩色矩形；
  • OpacityMask：使用另一个源来遮盖源元素；
  • ThresholdMask：使用另一个源来遮盖源元素并应用阈值调整源元素；

举个例子：

• Rectangle {
      width: animatedImage1_ID.width + animatedImage2_ID.width
      height: Math.max(animatedImage1_ID.height, animatedImage2_ID.height)
  
      Row {
          Item {
              width: animatedImage1_ID.width
              height: animatedImage1_ID.height
              AnimatedImage {
                  id: animatedImage1_ID
                  source: "qrc:/Pictures/Used_Images/GIF/countryside_512x512.gif"
              }
              LevelAdjust {
                  id: rgbaLevelAdjust_ID
                  anchors.fill: animatedImage1_ID
                  source: animatedImage1_ID
              }
          }
  
          Item {
              width: animatedImage2_ID.width
              height: animatedImage2_ID.height
              AnimatedImage {
                  id: animatedImage2_ID
                  source: "qrc:/Pictures/Used_Images/GIF/countryside_512x512.gif"
              }
              BrightnessContrast {
                  id: brightnessContrast_ID
                  anchors.fill: animatedImage2_ID
                  source: animatedImage2_ID
              }
          }
      }
  
      ParallelAnimation {
          id: animation_ID
          running: false
          loops: Animation.Infinite
  
          SequentialAnimation {
              NumberAnimation {
                  target: brightnessContrast_ID
                  property: "brightness"
                  to: -0.5
                  duration: 3000
              }
              NumberAnimation {
                  target: brightnessContrast_ID
                  property: "contrast"
                  to: 0.25
                  duration: 3000
              }
          }
  
          ParallelAnimation {
              PropertyAnimation {
                  target: rgbaLevelAdjust_ID
                  property: "minimumOutput"
                  to: "#00ffffff"
                  duration: 3000
              }
              PropertyAnimation {
                  target: rgbaLevelAdjust_ID
                  property: "maximumOutput"
                  to: "#ff000000"
                  duration: 3000
              }
          }
      }
  
      MouseArea {
          anchors.fill: parent
          onClicked: {
              animation_ID.running = true;
          }
      }
  }
  

• 鼠标单击后，左边更改为反色，右边先变暗然后对比度增强；

• 效果图：

•