Skip to content

ElaGraphicsView 组件文档

概述

ElaGraphicsView 是一个现代化的图形视图组件,继承自 QGraphicsView。它提供了缩放、平移、抗锯齿等特性,适用于图形编辑场景。

特性

  • 平滑缩放
  • 拖拽平移
  • 抗锯齿渲染
  • 橡皮筋选择
  • 自定义滚动条
  • 鼠标追踪
  • 键盘控制
  • 性能优化

属性

基础属性

cpp
// 最大缩放比例
Q_PROPERTY(qreal maxTransform 
    READ getMaxTransform 
    WRITE setMaxTransform)

// 最小缩放比例
Q_PROPERTY(qreal minTransform 
    READ getMinTransform 
    WRITE setMinTransform)

构造函数

cpp
// 基础构造
explicit ElaGraphicsView(
    QWidget* parent = nullptr
);

// 指定场景构造
explicit ElaGraphicsView(
    QGraphicsScene* scene, 
    QWidget* parent = nullptr
);

事件处理

鼠标滚轮事件

cpp
void wheelEvent(QWheelEvent* event) override {
    // Ctrl + 滚轮实现缩放
    if (event->modifiers() == Qt::CTRL) {
        if (event->angleDelta().y() > 0) {
            // 放大
            scale(1.1, 1.1);
        } else {
            // 缩小
            scale(1.0/1.1, 1.0/1.1);
        }
    }
}

键盘事件

cpp
void keyPressEvent(QKeyEvent* event) override {
    // Alt 键按下切换为手型工具
    if (event->key() == Qt::Key_Alt) {
        setDragMode(
            QGraphicsView::ScrollHandDrag
        );
    }
}

void keyReleaseEvent(QKeyEvent* event) override {
    // Alt 键释放恢复橡皮筋选择
    if (event->key() == Qt::Key_Alt) {
        setDragMode(
            QGraphicsView::RubberBandDrag
        );
    }
}

使用示例

基础用法

1. 创建视图

cpp
// 创建视图
ElaGraphicsView* view = 
    new ElaGraphicsView(this);

// 设置场景
view->setScene(scene);

// 设置缩放范围
view->setMaxTransform(5.0);
view->setMinTransform(0.15);

2. 视图设置

cpp
// 设置渲染提示
view->setRenderHints(
    QPainter::Antialiasing |
    QPainter::TextAntialiasing |
    QPainter::SmoothPixmapTransform
);

// 设置变换锚点
view->setTransformationAnchor(
    QGraphicsView::AnchorUnderMouse
);

// 设置调整锚点
view->setResizeAnchor(
    QGraphicsView::AnchorUnderMouse
);

3. 交互控制

cpp
// 启用鼠标追踪
view->setMouseTracking(true);

// 设置拖拽模式
view->setDragMode(
    QGraphicsView::RubberBandDrag
);

// 自定义滚动条
view->setVerticalScrollBar(
    new ElaScrollBar(view)
);
view->setHorizontalScrollBar(
    new ElaScrollBar(view)
);

高级用法

1. 缩放控制

cpp
// 自定义缩放步长
void customZoom(qreal factor) {
    qreal currentScale = transform().m11();
    if (factor > 1.0 && 
        currentScale <= maxTransform) {
        scale(factor, factor);
    } 
    else if (factor < 1.0 && 
        currentScale >= minTransform) {
        scale(factor, factor);
    }
}

2. 视图变换

cpp
// 重置视图
void resetView() {
    resetTransform();
    centerOn(0, 0);
}

// 适应视图
void fitView() {
    fitInView(
        scene()->sceneRect(),
        Qt::KeepAspectRatio
    );
}

注意事项

  1. 继承自 QGraphicsView
  2. 自动处理主题切换
  3. 智能内存管理
  4. 事件处理
  5. 性能优化
  6. 缩放限制
  7. 平滑渲染
  8. 交互控制

最佳实践

  1. 合理设置缩放范围
  2. 优化渲染性能
  3. 控制刷新频率
  4. 注意内存使用
  5. 统一交互方式
  6. 保持流畅度
  7. 动画平滑
  8. 响应式布局

相关组件

  • QGraphicsView: 基类
  • ElaGraphicsScene: 场景组件
  • ElaScrollBar: 滚动条组件
  • QGraphicsItem: 图形项基类