技术文档

SVG编辑器大作业

项目设计

  1. 模块化设计
    • 核心功能被划分为多个独立的库，实现了低耦合和高内聚
    • 使用LIB确保组件之间的接口清晰
  2. 设计模式应用
    • 命令模式：实现撤销/重做功能
    • 工厂模式：用于创建图形和属性面板
    • 观察者模式：用于UI组件间通讯
    • 单例模式：用于全局管理器类
  3. 拓展性考虑
    • 提供了良好的接口和基类，可以轻松添加新的图形类型
    • 属性面板可以动态扩展支持新的图形类型
    • 工具栏设计支持添加新的编辑工具

一些关键的功能

Shape类是一个抽象基类，提供了图形属性和操作的通用接口，任何具体的图形类都应该继承这个类并实现其纯虚函数。允许编辑器统一处理不同类型的图形，同时支持通过多态性实现每种图形特定的行为。

ShapeFactory 类实现了工厂设计模式，提供了一个中央位置来创建和管理不同类型的图形。通过这种方式，添加新的图形类型变得更加简单，只需实现新的图形类并在工厂中注册即可。主要特点包括：

  1. 单例模式：确保全局只有一个工厂实例
  2. 类型注册机制：允许注册不同的图形类型和它们的创建函数
  3. SVG解析支持：能够从SVG DOM元素创建相应的图形对象
  4. 可扩展性：设计支持轻松添加新的图形类型
  5. 创建方法封装：封装了每种图形的默认创建参数和逻辑

这种设计使得添加新图形类型对系统其他部分的影响最小化，符合开闭原则（对扩展开放，对修改关闭）。

Canvas 类是SVG编辑器的核心组件，负责管理和绘制所有图形，处理用户交互，以及提供文件操作功能。它实现了以下主要功能：

  1. 图形管理：添加、删除、选择和操作图形对象
  2. 绘图功能：处理绘制图形的绘图上下文，并应用适当的变换
  3. 事件处理：处理鼠标和键盘事件，并通过当前工具对象转发这些事件
  4. 文件操作：加载、保存SVG文件以及导出为PNG
  5. 撤销/重做：通过命令模式支持撤销和重做操作
  6. 视图控制：缩放、平移和调整画布大小
  7. 网格功能：显示网格及对齐到网格

该类充分利用了Qt的事件系统和绘图功能，并通过信号-槽机制与主窗口和其他组件进行通信。

Command 类和相关子类实现了命令模式，用于支持SVG编辑器的撤销/重做功能。这个实现的主要特点：

  1. 基础命令类 (Command) ：继承自Qt的QUndoCommand，提供了execute()方法作为命令执行入口。
  2. 宏命令 (MacroCommand) ：可以组合多个命令成一个原子操作，如拖动多个图形。
  3. 具体命令类：
    • AddShapeCommand：添加图形
    • RemoveShapeCommand：删除图形
    • MoveShapeCommand：移动图形
    • ResizeShapeCommand：调整图形大小
    • ChangeZOrderCommand：改变图形层次顺序
    • ModifyShapePropertyCommand：修改图形属性
  4. 命令管理器 (CommandManager) ：单例设计，提供命令执行、宏命令管理、创建各种命令的工厂方法等功能。

这些类一起构成了SVG编辑器撤销/重做系统的核心，使用命令模式封装和管理用户操作，实现了操作历史的记录和恢复。注意CommandManager的canUndo、canRedo、undo、redo方法在此实现中是简化的，实际使用时需要将它们连接到具体的UndoStack。

Tool是一个抽象基类，定义了所有绘图和编辑工具必须实现的接口。它处理用户与画布的交互，如鼠标事件和键盘事件。

主要特点：

  1. 事件处理：提供处理鼠标按下、移动、释放和键盘事件的虚函数
  2. 绘制功能：tools可以在画布上绘制特殊的视觉效果，如橡皮筋选择框或预览形状
  3. 游标管理：每个工具可以设置自己的鼠标光标样式
  4. 名称标识：每个工具必须提供一个名称，用于UI显示和标识

具体的工具类（如选择工具、矩形绘制工具等）将继承这个基类并实现这些抽象方法，提供各自特定的行为和功能。

这个PropertyPanelFactory类实现了工厂设计模式，用于创建适合不同图形类型的属性面板。主要特点：

  1. 单例模式：确保整个应用程序中只有一个工厂实例，便于集中管理和访问
  2. 注册机制：允许注册和管理针对不同图形类型的面板创建函数
  3. 自动匹配：根据图形的类名自动创建对应的属性面板
  4. 可扩展性：轻松添加对新图形类型的支持，只需注册一个新的创建函数
  5. 默认面板支持：如果某个图形类型没有专门的面板，会使用基础面板

这个工厂类与PropertyPanelContainer协同工作，为SVG编辑器提供了灵活且可扩展的属性编辑界面。通过这种设计，添加新的图形类型和对应的属性面板变得非常简单，只需两步：创建新的面板类，然后在工厂中注册即可，完全符合开闭原则（对扩展开放，对修改封闭）。

一些缺点和Bug

  1. 直线的大小调整问题，应该选择从QRectf中获取属性，绘制直线
  2. 同时选中多个图形时，有的图形的线条不再显示
  3. 属性面板不够完善，不能对每个图形都有专属的属性面板
  4. 撤销重做的命令性能太差，有概率崩溃
  5. ui设计太潦草，部分的按键功能不完全
  6. svg文件不能正确导入

项目运行效果展示


posted @ 2025-05-20 04:59  uanQ  阅读(25)  评论(0)    收藏  举报