QML元素 - BrightnessContrast

在QML中，BrightnessContrast 是 QtGraphicalEffects 模块中的一个元素，用于调整图像的亮度和对比度。以下是其使用技巧和关键点：

---

1. 基本用法

导入模块并设置图像源：

import QtGraphicalEffects 1.0

BrightnessContrast {
    width: 200
    height: 200
    // 设置输入图像源（支持任何 Item 类型）
    source: Image { source: "image.png" }
    // 调整亮度和对比度
    brightness: 0.5    // 默认值0，范围[-1.0, 1.0]
    contrast: 0.3      // 默认值0，范围[-1.0, 1.0]
}

---

2. 关键属性详解

• brightness（亮度）

  • 取值范围：-1.0（全黑）到 1.0（全亮），默认 0。
  • 正值为增亮，负值为变暗。

• contrast（对比度）

  • 取值范围：-1.0（完全灰）到 1.0（高对比），默认 0。
  • 正值为增强对比度，负值为降低对比度。

• cached（缓存）

  • 若为 true，渲染结果会被缓存以提升性能（适用于静态内容），默认 false。

• transparentBorder（透明边框）

  • 若为 true，输入图像的边缘会保持透明，避免边缘伪影，默认 false。

---

3. 高级技巧

优化性能

• 启用缓存：对静态图像设置 cached: true，减少重复渲染。
• 限制渲染区域：通过 width/height 或 anchors 约束作用范围。
• 预缩放图像：若需缩放图像，优先在 source 的 Image 中设置 sourceSize，而非缩放 BrightnessContrast 自身。

动态效果

• 动画化亮度和对比度：结合 PropertyAnimation 实现平滑过渡。

  BrightnessContrast {
      id: bcEffect
      source: imageSource
      brightness: 0.0
      Behavior on brightness { NumberAnimation { duration: 500 } }
  }
  // 点击后增亮
  MouseArea {
      onClicked: bcEffect.brightness = 0.5
  }
  

组合其他效果

// 先模糊图像，再调整亮度和对比度
BrightnessContrast {
    source: GaussianBlur {
        source: Image { source: "image.png" }
        radius: 8
    }
    brightness: 0.2
    contrast: 0.4
}

---

4. 常见问题

• 性能问题：在移动端高分辨率图像上慎用，可降低 sourceSize 或缩小作用区域。
• 颜色失真：确保输入图像的格式支持透明度（如 PNG），并检查 transparentBorder 设置。
• 输入源类型错误：source 必须是 Item 类型（如 Image、Rectangle），不可直接使用文件路径。

---

5. 示例：交互式调整亮度和对比度

Column {
    spacing: 10

    BrightnessContrast {
        id: bcEffect
        width: 300
        height: 200
        source: Image { source: "landscape.jpg" }
    }

    // 通过滑块动态控制
    Slider {
        from: -1.0
        to: 1.0
        value: 0
        onMoved: bcEffect.brightness = value
    }
    Slider {
        from: -1.0
        to: 1.0
        value: 0
        onMoved: bcEffect.contrast = value
    }
}

---

6. 与其他效果叠加

// 叠加颜色覆盖和亮度对比度调整
ColorOverlay {
    source: BrightnessContrast {
        source: Image { source: "photo.jpg" }
        brightness: -0.2
        contrast: 0.5
    }
    color: "#80ff0000" // 半透明红色叠加
}

---

通过灵活调整 brightness 和 contrast，结合动画与组合效果，可以实现动态的视觉增强或风格化处理。建议在实际使用中逐步调整参数，观察效果变化。