PyQt5 QGraphicsView绘图分辨率适配：实现FabricJS式绘图效果

核心思路 #

FabricJS的绘图逻辑是基于画布像素坐标的：所有绘制操作直接作用于底层图像，视图缩放仅改变图像的显示比例，不会影响绘制内容的实际像素尺寸。对应Qt场景，我们需要将绘图操作直接绑定到QPixmap（作为底层画布），同时正确处理QGraphicsView的视图坐标与Pixmap像素坐标的映射。

方案1：基于Pixmap的画布绘图（推荐） #

关键步骤 #

1. 初始化时将固定分辨率的QPixmap作为QGraphicsPixmapItem加入场景，作为绘图的底层画布。
2. 处理鼠标事件时，将视图坐标转换为Pixmap的像素坐标（而非场景坐标），再在Pixmap上执行绘制操作。
3. 绘制完成后更新PixmapItem，触发视图刷新。

完整示例代码 #

from PyQt5.QtWidgets import QApplication, QMainWindow, QGraphicsView, QGraphicsScene, QGraphicsPixmapItem
from PyQt5.QtGui import QPixmap, QPainter, QPen, QColor
from PyQt5.QtCore import Qt, QPointF

class DrawingView(QGraphicsView):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.scene = QGraphicsScene()
        self.setScene(self.scene)
        
        # 初始化固定分辨率的底层画布（示例为800x600像素）
        self.canvas_pixmap = QPixmap(800, 600)
        self.canvas_pixmap.fill(Qt.white)
        self.pixmap_item = QGraphicsPixmapItem(self.canvas_pixmap)
        self.scene.addItem(self.pixmap_item)
        
        self.is_drawing = False
        self.last_pos = None
        # 设定画笔参数（线宽对应实际像素大小，示例为2px）
        self.pen = QPen(QColor(0,0,0), 2, Qt.SolidLine)

    def mousePressEvent(self, event):
        if event.button() == Qt.LeftButton:
            self.is_drawing = True
            # 视图坐标 → 场景坐标 → Pixmap像素坐标的转换
            view_pos = event.pos()
            scene_pos = self.mapToScene(view_pos)
            pixmap_pos = self.pixmap_item.mapFromScene(scene_pos).toPoint()
            # 确保坐标在Pixmap范围内
            if self.canvas_pixmap.rect().contains(pixmap_pos):
                self.last_pos = pixmap_pos

    def mouseMoveEvent(self, event):
        if not self.is_drawing or self.last_pos is None:
            super().mouseMoveEvent(event)
            return
        
        view_pos = event.pos()
        scene_pos = self.mapToScene(view_pos)
        pixmap_pos = self.pixmap_item.mapFromScene(scene_pos).toPoint()
        
        if self.canvas_pixmap.rect().contains(pixmap_pos):
            # 直接在Pixmap上绘制像素级内容
            painter = QPainter(self.canvas_pixmap)
            painter.setPen(self.pen)
            painter.drawLine(self.last_pos, pixmap_pos)
            painter.end()
            # 更新PixmapItem以刷新视图
            self.pixmap_item.setPixmap(self.canvas_pixmap)
            self.last_pos = pixmap_pos

    def mouseReleaseEvent(self, event):
        if event.button() == Qt.LeftButton:
            self.is_drawing = False
            self.last_pos = None

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.view = DrawingView()
        self.setCentralWidget(self.view)
        self.setWindowTitle("分辨率绑定绘图")
        self.resize(800, 600)

if __name__ == "__main__":
    app = QApplication([])
    window = MainWindow()
    window.show()
    app.exec_()

代码说明 #

• 坐标转换逻辑：通过mapToScene将视图坐标转为场景坐标，再用mapFromScene得到Pixmap的局部像素坐标，该坐标与视图缩放无关，严格对应底层图像的像素位置。
• 所有绘制操作直接作用于QPixmap，视图缩放仅改变图像的显示比例，绘制的线条/图形始终保持设定的像素尺寸，完全匹配FabricJS的效果。

方案2：保留图形项但绑定分辨率 #

如果需要保留QGraphicsItem的可编辑特性（比如单独修改某条线条），可以通过坐标映射和属性设置实现分辨率绑定：

1. 将场景的sceneRect设置为与目标图像分辨率一致（比如800x600）。
2. 鼠标事件中，将视图坐标转换为场景坐标，确保坐标与图像像素一一对应。
3. 添加图形项时，设置ItemIgnoresTransformations属性，让图形项不受视图缩放变换影响。

关键代码片段 #

from PyQt5.QtWidgets import QGraphicsLineItem
from PyQt5.QtCore import QGraphicsItem

# 在DrawingView的mouseMoveEvent中替换为以下逻辑
def mouseMoveEvent(self, event):
    if not self.is_drawing or self.last_pos is None:
        super().mouseMoveEvent(event)
        return
    
    view_pos = event.pos()
    scene_pos = self.mapToScene(view_pos)
    # 确保坐标在场景范围内（即图像分辨率内）
    if self.scene.sceneRect().contains(scene_pos):
        # 添加线条项，固定线宽为像素单位
        line = QGraphicsLineItem(self.last_pos.x(), self.last_pos.y(), scene_pos.x(), scene_pos.y())
        line.setPen(QPen(QColor(0,0,0), 2))
        # 关闭视图缩放对图形项的影响
        line.setFlag(QGraphicsItem.ItemIgnoresTransformations)
        self.scene.addItem(line)
        self.last_pos = scene_pos

注意点 #

• ItemIgnoresTransformations会让图形项固定显示尺寸，但位置仍基于场景坐标，需确保场景坐标与图像分辨率严格对应。
• 该方案适合需要编辑单个图形项的场景，但大量绘制时性能略低于Pixmap方案。

问题根源说明 #

你之前的初始实现直接在场景中添加QGraphicsEllipseItem/QGraphicsLineItem，这些图形项会跟随视图缩放放大缩小，导致绘制内容的实际尺寸随视图变化，与图像分辨率脱节。而上述两种方案均通过坐标映射或直接操作像素，实现了绘制内容与图像分辨率的绑定。

内容的提问来源于stack exchange，提问作者Rimuto