zoukankan      html  css  js  c++  java
  • Qt之图标切分与合并

        有些时候会将多张有相同功能的图片绘制成一张,不管是使用或者绘制上都会方便很多。对美工与开发者来说也都是一件省事、省力、更省心的方式。二全其美,又何乐而不为呢。。。

    例如:QQ等级

        0-9可以组成很多种不同的数字等级(不多做解释)!绘制多张图片来描述不同的等级吗?那么请问得绘制多少张呢?想都不敢想。如上方式,已经完全解决了这个问题。

        前提条件:
        美工:制作一张有多张图标相连的图片。
        开发者:只需要根据自己的需求,将部分图片拷贝为副本,再进行合并即可!

    下面举个小例子:

    #include "qqlevel.h"

    QQLevel::QQLevel(QWidget *parent)
    : QWidget(parent)
    {
    setFixedSize(300, 200);
    level_button = new QPushButton();
    grade_button = new QPushButton();

    //分别获取0-9数字图标
    QPixmap pixmap_0 = getPixmap(QString(":/level/level_value"), 10, 0);
    QPixmap pixmap_1 = getPixmap(QString(":/level/level_value"), 10, 1);
    QPixmap pixmap_2 = getPixmap(QString(":/level/level_value"), 10, 2);
    QPixmap pixmap_3 = getPixmap(QString(":/level/level_value"), 10, 3);
    QPixmap pixmap_4 = getPixmap(QString(":/level/level_value"), 10, 4);
    QPixmap pixmap_5 = getPixmap(QString(":/level/level_value"), 10, 5);
    QPixmap pixmap_6 = getPixmap(QString(":/level/level_value"), 10, 6);
    QPixmap pixmap_7 = getPixmap(QString(":/level/level_value"), 10, 7);
    QPixmap pixmap_8 = getPixmap(QString(":/level/level_value"), 10, 8);
    QPixmap pixmap_9 = getPixmap(QString(":/level/level_value"), 10, 9);

    int count = 3;
    int pixmap_width = pixmap_8.width();
    int pixmap_height = pixmap_8.height();

    //最前面LV图标
    QPixmap pixmap_lv(":/level/lv");
    int lv_width = pixmap_lv.width();
    QPixmap total_pixmap(QSize(pixmap_width*count + lv_width, pixmap_height));
    QPainter painter(&total_pixmap);

    //绘制LV图标
    painter.drawPixmap(QRect(0, 0, lv_width, pixmap_height), pixmap_lv);

    //再绘制LV888图标
    for(int i=0; i
    {
    painter.drawPixmap(QRect(lv_width+pixmap_width*i, 0, pixmap_width, pixmap_height), pixmap_8);
    }

    level_button->setFixedHeight(30);
    level_button->setIcon(total_pixmap);
    level_button->setIconSize(total_pixmap.size());

    //分别获取皇冠、太阳、月亮、星星、...等图标
    QPixmap pixmap_grade_0 = getPixmap(QString(":/level/grade"), 5, 0);
    QPixmap pixmap_grade_1 = getPixmap(QString(":/level/grade"), 5, 1);
    QPixmap pixmap_grade_2 = getPixmap(QString(":/level/grade"), 5, 2);
    QPixmap pixmap_grade_3 = getPixmap(QString(":/level/grade"), 5, 3);
    QPixmap pixmap_grade_4 = getPixmap(QString(":/level/grade"), 5, 4);

    //绘制5个皇冠
    int grade_count = 5;
    int pixmap_grade_width = pixmap_grade_0.width();
    int pixmap_grade_height = pixmap_grade_0.height();
    QPixmap total_grade_pixmap(QSize(pixmap_grade_width*grade_count, pixmap_grade_height));
    QPainter grade_painter(&total_grade_pixmap);
    for(int i=0; i
    {
    grade_painter.drawPixmap(QRect(pixmap_grade_width*i, 0, pixmap_grade_width, pixmap_grade_height), pixmap_grade_0);
    }
    grade_button->setFixedHeight(30);
    grade_button->setIcon(total_grade_pixmap);
    grade_button->setIconSize(total_grade_pixmap.size());


    QVBoxLayout *main_layout = new QVBoxLayout();
    main_layout->addStretch();
    main_layout->addWidget(level_button);
    main_layout->addWidget(grade_button);
    main_layout->addStretch();
    main_layout->setSpacing(20);
    main_layout->setContentsMargins(0, 0, 0, 0);

    setLayout(main_layout);
    }

    QQLevel::~QQLevel()
    {

    }

    QPixmap QQLevel::getPixmap(QString pixmap_name, int count, int index)
    {
    QPixmap final_pixmap;
    if(!pixmap_name.isEmpty() && count > 0)
    {
    QPixmap pixmap(pixmap_name);
    int pixmap_width = pixmap.width()/count;
    int pixmap_height = pixmap.height();
    final_pixmap = pixmap.copy(pixmap_width*index, 0, pixmap_width, pixmap_height);
    }

    return final_pixmap;
    }

    运行效果如下:

    好了,多张图片的切分与合并完美实现,It's so easy!
  • 相关阅读:
    IE浏览器中Image对象onload失效的解决办法
    jquery.lazyload 实现图片延迟加载jquery插件
    在JS方法中返回多个值的三种方法
    遭遇input与button按钮背景图失效不显示的解决办法
    jquery:validate的例子
    JavaScript toLowerCase() 方法 把字符串转换为小写
    Linux下的MySQL简单操作(服务启动与关闭、启动与关闭、查看版本)
    phpcms-v9视频模型的添加
    Linux下如何查看tomcat是否启动
    margin-top无效的问题解决方法
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3238993.html
Copyright © 2011-2022 走看看