Qt中如何叠加两张QImage图片并保存为QPixmap

针对QImage加载的药水主图标、堆叠数量角标叠加需求，用QPainter直接叠绘是成本最低、性能最好的方案，完全适配QTableView的列表项渲染场景，不需要引入额外图像处理依赖。

实现逻辑 #

• 以药水主图标作为底图画布，直接从QImage转换为QPixmap，省去后续格式转换步骤
• 初始化QPainter绑定画布，将堆叠角标绘制到指定角标位置（常规UI一般放右上角/右下角）
• 结束绘制后得到的QPixmap即可直接用于界面渲染

可直接复用的代码 #

// 前置：已加载完成的两个素材实例
// QImage mainPotionImg;  // 药水主图标
// QImage stackCountBadge; // 堆叠数量标识角标

QPixmap composePotionIcon(const QImage& mainImg, const QImage& badgeImg)
{
    // 初始化画布：直接用主图生成QPixmap
    QPixmap res = QPixmap::fromImage(mainImg);
    QPainter painter(&res);
    
    // 可选配置：开启抗锯齿和平滑变换，避免图标边缘发虚
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);

    // 角标坐标计算：示例为右下角放置，留2px内边距更美观
    int badgePosX = res.width() - badgeImg.width() - 2;
    int badgePosY = res.height() - badgeImg.height() - 2;
    // 直接绘制角标，素材自带透明通道时会自动完成透明叠加，无需手动处理遮罩
    painter.drawImage(QPoint(badgePosX, badgePosY), badgeImg);

    painter.end();
    return res;
}

// 调用即可拿到合成后的QPixmap
QPixmap finalIcon = composePotionIcon(mainPotionImg, stackCountBadge);

注意事项 #

• 如果角标尺寸过大，可以在绘制前调用badgeImg.scaled()缩放到合适大小，常规角标尺寸为主图的1/3到1/2视觉效果最佳
• 该实现没有冗余内存拷贝，渲染性能足够支撑QTableView千级以上列表项的滑动刷新，不会出现卡顿
• 若素材本身不带透明通道，需要提前对非图标区域做抠图处理，否则叠加时会出现不透明的白底/黑底遮挡主图

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