Foro de elhacker.net

Programación => Programación C/C++ => Mensaje iniciado por: alvarogt91 en 6 Junio 2014, 20:20 pm



Título: Marcos con croma Qt Designer
Publicado por: alvarogt91 en 6 Junio 2014, 20:20 pm
Hola! tengo un problema a la hora de manejar un complemento de mi programa de croma.
El programa consiste en cargar una imagen de fondo, un marco con croma (zona en verde puro) y manejar una serie de sliders horizontales y verticales a modo de zoom para situar la imagen de fondo dentro del marco como nos interesa.

El caso es que a la hora de manejar el zoom puedo aumentar la escala de la imagen, pero no disminuirla.

ENUNCIADO:
En este ejercicio vamos a realizar un programa para componer imágenes usando el efecto croma. En concreto, el usuario podrá cargar en la aplicación dos imágenes, una foto y un marco, donde el marco vendrá preparado con la zona del croma en verde puro:Claro está, las imágenes no tienen la misma resolución y la zona de la cara no tiene por qué coincidir con la del croma en el marco. Por ello, la aplicación contendrá los controles para trasladar la imagen en horizontal y vertical o escalarla:
La imagen de trabajo de la aplicación será de 800x600 píxeles. La imagen de marco se debe escalar con esas proporciones, mientras que las proporciones de la foto vendrán ajustadas por el usuario. Como vemos, el programa debe ser capaz de componer las dos imágenes, colocando una sobre otra en función de la posición determinada por el usuario y sustituyendo los píxeles verdes del marco por los de la foto.
El menú principal contendrá un submenú fichero, con el que podremos cargar las imágenes (foto y marco), grabar en disco la composición actual o salir y un submenú About que mostrará el nombre de los autores de la práctica.
Como vemos, la posición y escala de la foto se maneja con sliders y un botón central para restaurar escala y posición a sus valores predeterminados.
Junto con el enunciado de la práctica se adjuntan distintos archivos con los recursos necesarios (iconos, marcos y fotos). Para crear tus propios marcos y fotos, se recomienda el formato bmp y una resolución no mayor de 800x600. En general, se debe usar un formato sin compresión para que el color del croma sea lo más puro posible.
Código
  1. ----------------------------------------------------------------------------------------------
  2. <mainwindow.ui>
  3. <?xml version="1.0" encoding="UTF-8"?>
  4. <ui version="4.0">
  5. <class>MainWindow</class>
  6. <widget class="QMainWindow" name="MainWindow">
  7.  <property name="geometry">
  8.   <rect>
  9.    <x>0</x>
  10.    <y>0</y>
  11.    <width>613</width>
  12.    <height>432</height>
  13.   </rect>
  14.  </property>
  15.  <property name="mouseTracking">
  16.   <bool>false</bool>
  17.  </property>
  18.  <property name="windowTitle">
  19.   <string>Aplicacion de Marcos</string>
  20.  </property>
  21.  <property name="windowIcon">
  22.   <iconset resource="resources.qrc">
  23.    <normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_app_neotux.png</normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_app_neotux.png</iconset>
  24.  </property>
  25.  <widget class="QWidget" name="centralWidget">
  26.   <widget class="QLabel" name="label_3">
  27.    <property name="geometry">
  28.     <rect>
  29.      <x>150</x>
  30.      <y>10</y>
  31.      <width>451</width>
  32.      <height>341</height>
  33.     </rect>
  34.    </property>
  35.    <property name="text">
  36.     <string/>
  37.    </property>
  38.    <property name="scaledContents">
  39.     <bool>false</bool>
  40.    </property>
  41.   </widget>
  42.   <widget class="QWidget" name="layoutWidget">
  43.    <property name="geometry">
  44.     <rect>
  45.      <x>10</x>
  46.      <y>10</y>
  47.      <width>131</width>
  48.      <height>193</height>
  49.     </rect>
  50.    </property>
  51.    <layout class="QVBoxLayout" name="verticalLayout_2">
  52.     <item>
  53.      <layout class="QVBoxLayout" name="verticalLayout">
  54.       <item>
  55.        <widget class="QLabel" name="label">
  56.         <property name="text">
  57.          <string>Colocación imagen</string>
  58.         </property>
  59.        </widget>
  60.       </item>
  61.       <item>
  62.        <widget class="QSlider" name="horizontalSlider">
  63.         <property name="minimum">
  64.          <number>1</number>
  65.         </property>
  66.         <property name="maximum">
  67.          <number>100</number>
  68.         </property>
  69.         <property name="sliderPosition">
  70.          <number>50</number>
  71.         </property>
  72.         <property name="orientation">
  73.          <enum>Qt::Horizontal</enum>
  74.         </property>
  75.        </widget>
  76.       </item>
  77.      </layout>
  78.     </item>
  79.     <item>
  80.      <layout class="QHBoxLayout" name="horizontalLayout_2">
  81.       <property name="sizeConstraint">
  82.        <enum>QLayout::SetNoConstraint</enum>
  83.       </property>
  84.       <item>
  85.        <widget class="QSlider" name="verticalSlider">
  86.         <property name="minimum">
  87.          <number>1</number>
  88.         </property>
  89.         <property name="maximum">
  90.          <number>100</number>
  91.         </property>
  92.         <property name="sliderPosition">
  93.          <number>50</number>
  94.         </property>
  95.         <property name="orientation">
  96.          <enum>Qt::Vertical</enum>
  97.         </property>
  98.        </widget>
  99.       </item>
  100.       <item>
  101.        <widget class="QPushButton" name="pushButton">
  102.         <property name="enabled">
  103.          <bool>true</bool>
  104.         </property>
  105.         <property name="autoFillBackground">
  106.          <bool>false</bool>
  107.         </property>
  108.         <property name="text">
  109.          <string/>
  110.         </property>
  111.         <property name="icon">
  112.          <iconset resource="resources.qrc">
  113.           <normaloff>:/etiquetas/Material ejercicio 2/Quick_restart.png</normaloff>:/etiquetas/Material ejercicio 2/Quick_restart.png</iconset>
  114.         </property>
  115.         <property name="iconSize">
  116.          <size>
  117.           <width>50</width>
  118.           <height>50</height>
  119.          </size>
  120.         </property>
  121.         <property name="flat">
  122.          <bool>false</bool>
  123.         </property>
  124.        </widget>
  125.       </item>
  126.      </layout>
  127.     </item>
  128.     <item>
  129.      <layout class="QHBoxLayout" name="horizontalLayout">
  130.       <item>
  131.        <widget class="QLabel" name="label_2">
  132.         <property name="text">
  133.          <string>Escala</string>
  134.         </property>
  135.        </widget>
  136.       </item>
  137.       <item>
  138.        <widget class="QSlider" name="horizontalSlider_2">
  139.         <property name="minimum">
  140.          <number>1</number>
  141.         </property>
  142.         <property name="maximum">
  143.          <number>10</number>
  144.         </property>
  145.         <property name="singleStep">
  146.          <number>1</number>
  147.         </property>
  148.         <property name="pageStep">
  149.          <number>1</number>
  150.         </property>
  151.         <property name="value">
  152.          <number>5</number>
  153.         </property>
  154.         <property name="sliderPosition">
  155.          <number>5</number>
  156.         </property>
  157.         <property name="orientation">
  158.          <enum>Qt::Horizontal</enum>
  159.         </property>
  160.        </widget>
  161.       </item>
  162.      </layout>
  163.     </item>
  164.    </layout>
  165.   </widget>
  166.  </widget>
  167.  <widget class="QMenuBar" name="menuBar">
  168.   <property name="geometry">
  169.    <rect>
  170.     <x>0</x>
  171.     <y>0</y>
  172.     <width>613</width>
  173.     <height>21</height>
  174.    </rect>
  175.   </property>
  176.   <widget class="QMenu" name="menuFichero">
  177.    <property name="title">
  178.     <string>Fichero</string>
  179.    </property>
  180.    <addaction name="actionCargar"/>
  181.    <addaction name="actionGrabar_en_el_disco"/>
  182.    <addaction name="actionSalir"/>
  183.   </widget>
  184.   <widget class="QMenu" name="menuAcerca_de">
  185.    <property name="title">
  186.     <string>Acerca de...</string>
  187.    </property>
  188.   </widget>
  189.   <addaction name="menuFichero"/>
  190.   <addaction name="menuAcerca_de"/>
  191.  </widget>
  192.  <widget class="QToolBar" name="mainToolBar">
  193.   <attribute name="toolBarArea">
  194.    <enum>TopToolBarArea</enum>
  195.   </attribute>
  196.   <attribute name="toolBarBreak">
  197.    <bool>false</bool>
  198.   </attribute>
  199.   <addaction name="actionCargar"/>
  200.   <addaction name="actionGrabar_en_el_disco"/>
  201.   <addaction name="actionSalir"/>
  202.   <addaction name="actionAcerca_de"/>
  203.  </widget>
  204.  <widget class="QStatusBar" name="statusBar"/>
  205.  <action name="actionCargar">
  206.   <property name="icon">
  207.    <iconset resource="resources.qrc">
  208.     <normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_action_db_comit.png</normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_action_db_comit.png</iconset>
  209.   </property>
  210.   <property name="text">
  211.    <string>Cargar imagenes...</string>
  212.   </property>
  213.  </action>
  214.  <action name="actionGrabar_en_el_disco">
  215.   <property name="icon">
  216.    <iconset resource="resources.qrc">
  217.     <normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_device_floppy_unmount.png</normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_device_floppy_unmount.png</iconset>
  218.   </property>
  219.   <property name="text">
  220.    <string>Grabar en el disco</string>
  221.   </property>
  222.  </action>
  223.  <action name="actionSalir">
  224.   <property name="icon">
  225.    <iconset resource="resources.qrc">
  226.     <normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_action_exit.png</normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_action_exit.png</iconset>
  227.   </property>
  228.   <property name="text">
  229.    <string>Salir</string>
  230.   </property>
  231.  </action>
  232.  <action name="actionAcerca_de">
  233.   <property name="checkable">
  234.    <bool>false</bool>
  235.   </property>
  236.   <property name="checked">
  237.    <bool>false</bool>
  238.   </property>
  239.   <property name="enabled">
  240.    <bool>true</bool>
  241.   </property>
  242.   <property name="icon">
  243.    <iconset resource="resources.qrc">
  244.     <normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_app_neotux.png</normaloff>:/etiquetas/Material ejercicio 2/Crystal_Clear_app_neotux.png</iconset>
  245.   </property>
  246.   <property name="text">
  247.    <string>Acerca de</string>
  248.   </property>
  249.   <property name="autoRepeat">
  250.    <bool>true</bool>
  251.   </property>
  252.   <property name="visible">
  253.    <bool>true</bool>
  254.   </property>
  255.   <property name="iconVisibleInMenu">
  256.    <bool>false</bool>
  257.   </property>
  258.  </action>
  259. </widget>
  260. <layoutdefault spacing="6" margin="11"/>
  261. <resources>
  262.  <include location="resources.qrc"/>
  263. </resources>
  264. <connections/>
  265. </ui>
  266.  
  267. -----------------------------------------------------------------------------------------------
  268. <mainwindow.ui>
  269. #ifndef MAINWINDOW_H
  270. #define MAINWINDOW_H
  271.  
  272. #include <QMainWindow>
  273. //para seleccionar origen de archivo a abrir
  274. #include <QFileDialog>
  275. //para cargar imagenes y proporciones
  276. #include <QPixmap>
  277. //para ver cantidades de color
  278. #include <QColor>
  279. //para transparencias de foto
  280. #include <QPainter>
  281.  
  282. #include <iostream>//libreria pruebas
  283. using namespace std;
  284.  
  285. namespace Ui {
  286. class MainWindow;
  287. }
  288.  
  289. class MainWindow : public QMainWindow
  290. {
  291.    Q_OBJECT
  292.  
  293. public:
  294.    explicit MainWindow(QWidget *parent = 0);
  295.    ~MainWindow();
  296.  
  297. private slots:
  298.    void on_horizontalSlider_valueChanged(int value);
  299.    void on_verticalSlider_valueChanged(int value);
  300.    void on_horizontalSlider_2_sliderMoved(int position);
  301.    void on_actionSalir_triggered();
  302.    void on_actionAcerca_de_triggered();
  303.    void croma();
  304.    void on_pushButton_clicked();
  305.    void on_actionCargar_triggered();
  306.    //void rellenarimagen();
  307.  
  308. private:
  309.    Ui::MainWindow *ui;
  310.    QFile file;
  311.  
  312.    QPixmap Img,nuevo,nuevo2,nuevo3,nuevo3copia,nuevocopia,nuevocopia2;
  313.    //Img auxiliar para las escalas
  314.    //nuevo,nuevo2 imagenes originales
  315.    //nuevo3 nuestra resultante
  316.    //nuevo3copia y nuevocopia cpoias con las que trabajar
  317.    QImage imagen1,imagen2,resul,resulzoom;
  318.    QRgb color;
  319.    QPainter painter;
  320.    int rojo,verde,azul;
  321.    float proporcion,a,b;
  322.  
  323. };
  324.  
  325. #endif // MAINWINDOW_H
  326. ---------------------------------------------------------------------------------------------
  327. <main.cpp>
  328. #include "mainwindow.h"
  329. #include <QApplication>
  330.  
  331. int main(int argc, char *argv[])
  332. {
  333.    QApplication a(argc, argv);
  334.    MainWindow w;
  335.    w.show();
  336.  
  337.    return a.exec();
  338. }
  339. ---------------------------------------------------------------------------------------------
  340. <mainwindow.cpp>
  341. #include "mainwindow.h"
  342. #include "ui_mainwindow.h"
  343. #include <QMessageBox>
  344.  
  345.  
  346. MainWindow::MainWindow(QWidget *parent) :
  347.    QMainWindow(parent),
  348.    ui(new Ui::MainWindow)
  349. {//constructor defecto
  350.    ui->setupUi(this);
  351. }
  352.  
  353. MainWindow::~MainWindow()
  354. {//destructor
  355.    delete ui;
  356. }
  357. //croma
  358. void MainWindow::croma(){
  359.    for(int i=0;i<nuevo2.width();i++){
  360.        for(int j=0;j<nuevo2.height();j++){
  361.            color=imagen1.pixel(i,j);
  362.            verde=qGreen(color);
  363.            rojo= qRed(color);
  364.            azul=qBlue(color);
  365.            //no me sale de otra manera menos patatera
  366.            if (verde==255&&azul<=30&&rojo<=30){
  367.            }else{
  368.                resul.setPixel(i,j,color);
  369.            }
  370.        }
  371.    }
  372. }
  373.  
  374. //cargamos el marco y la foto
  375. void MainWindow::on_actionCargar_triggered()
  376. {
  377.        QMessageBox::information(NULL,"Cargando...","Imagen base","Aceptar");
  378.  
  379.        QString s = QFileDialog::getOpenFileName(this, "Cargar", NULL, "*.bmp");
  380.        if(!s.isEmpty()) {
  381.            Img.load(s);
  382.        }
  383.  
  384.        if(!Img.isNull()) {
  385.            nuevo = Img.scaled(451,341);//escalo la imagen
  386.            ui->label_3->setPixmap(nuevo);
  387.        }
  388.  
  389.        QMessageBox::information(NULL,"Cargando...","Marco","Aceptar");
  390.        s = QFileDialog::getOpenFileName(this, "Cargar", NULL, "*.bmp");
  391.        if(!s.isEmpty()) {
  392.            Img.load(s);
  393.        }
  394.        if(!nuevo.isNull()){
  395.            nuevo2 = Img.scaled(451,341);//escalo la imagen
  396.            imagen1= nuevo2.toImage();
  397.            //imagen copia a modificar
  398.            resul=nuevo.toImage();
  399.            croma();
  400.  
  401.        }
  402.        nuevo3= QPixmap::fromImage(resul);
  403.        ui->label_3->setPixmap(nuevo3);
  404. }
  405. //boton de reiniciar
  406. void MainWindow::on_pushButton_clicked()
  407. {
  408.    ui->label_3->clear();
  409.    ui->label_3->setPixmap(nuevo3);
  410. }
  411. //Acerca de
  412. void MainWindow::on_actionAcerca_de_triggered()
  413. {
  414.    QMessageBox::information(NULL,"Creado por"," Alvaro","Aceptar");
  415. }
  416. //Salir del programa
  417. void MainWindow::on_actionSalir_triggered()
  418. {
  419.    qApp->exit();
  420. }
  421. /*
  422. //rellenar el resto de la imagen
  423. void MainWindow::rellenarimagen(){
  424.     nuevocopia=nuevo.scaled(a,b);
  425.     imagen1=nuevocopia.toImage();
  426.     nuevocopia2=QPixmap(451,341);
  427.     nuevocopia2.fill(Qt::gray);
  428.     resulzoom=nuevocopia2.toImage();
  429.     for(int i=0;i<nuevocopia2.width();i++){
  430.         for(int j=0;j<nuevocopia2.height();j++){
  431.             color=imagen1.pixel(i,j);
  432.             resulzoom.setPixel(i,j,color);
  433.         }
  434.     }
  435. }*/
  436. //barra horizontal para cambiar el zoom
  437. void MainWindow::on_horizontalSlider_2_sliderMoved(int position)
  438. {
  439.    ui->label_3->clear();
  440.    a=position*451*0.2;
  441.    b=position*341*0.2;
  442.    nuevocopia=nuevo.scaled(a,b);
  443.  
  444.  
  445.    nuevocopia2=nuevocopia.copy(0,0,451,341);
  446.    resul=nuevocopia2.toImage();
  447.    for(int i=0;i<nuevo2.width();i++){
  448.        for(int j=0;j<nuevo2.height();j++){
  449.            color=imagen1.pixel(i,j);
  450.            verde=qGreen(color);
  451.            rojo= qRed(color);
  452.            azul=qBlue(color);
  453.            if (verde==255&&azul<=30&&rojo<=30){
  454.            }else{
  455.                resul.setPixel(i,j,color);
  456.            }
  457.        }
  458.    }
  459.    nuevo3copia= QPixmap::fromImage(resul);
  460.    ui->label_3->setPixmap(nuevo3copia);
  461. }
  462.  
  463. //desplazamiento vertical
  464. void MainWindow::on_verticalSlider_valueChanged(int value)
  465. {
  466.  
  467. }
  468. //despalzamiento horizontal
  469. void MainWindow::on_horizontalSlider_valueChanged(int value)
  470. {
  471.    for(int i=0;i<nuevo2.width();i++){
  472.        for(int j=0;j<nuevo2.height();j++){
  473.            color=imagen1.pixel(i,j);
  474.            verde=qGreen(color);
  475.            rojo= qRed(color);
  476.            azul=qBlue(color);
  477.            //no me sale de otra manera menos patatera
  478.            if (verde==255&&azul<=30&&rojo<=30){
  479.            }else{
  480.                resul.setPixel(i,j,color);
  481.            }
  482.        }
  483.    }
  484.    //nuevo3copia.transformed();
  485. }
  486.  


Título: Re: Marcos con croma Qt Designer
Publicado por: eferion en 9 Junio 2014, 12:26 pm
Es mejor si cada archivo de código lo colocas en una etiqueta code diferente... si además a cada etiqueta de code le añades el lenguaje correspondiente, p.ej: code=cpp para C++, quedará todo mucho más legible.

No entiendo por qué usas tantas clases para las imágenes. A ver, tu partes de dos imagenes que tienes que fusionar ( imagen1 e imagen2 )... al fusionarlas vas a crear una tercera imagen ( imagenFusionada ) y esta ha de admitir zoom ... imagenFinal.

Tu estás usando 7 imágenes diferentes... te sobran 3.

Los pasos recomendados son los que te he comentado:

* Almacenas las dos imágenes originales en imagen1 e imagen2. (los nombres son orientativos).

* Fusionas las imagenes: imagenFusionada.

* Aplicas el zoom a la imagen fusionada: imagenFinal.

De esta forma:

* Si solo cambia el zoom, únicamente tienes que recalcular imagenFinal.

* Si cambias una de las dos imágenes originales tienes que calcular la fusionada y la imagen final.

La gracia de aplicar el zoom a la imagen fusionada y no al revés ( a diferencia de como tú lo haces ) es que cuando se amplía o se reduce el zoom, hay pixeles que se recalculan y pueden acabar teniendo un color que no se parezca en nada al de croma, por lo que la fusión posterior no va a funcionar.

Además al fusionar primero y hacer zoom después evitas tener que redimensionar dos imágenes... solo tienes que redimensionar una.

Por lo demás, saber si el pixel actual tiene color croma ( si no has redimensionado ) es tan sencillo como comparar colores:

Código
  1. QColor croma( 30, 30, 255 );
  2.  
  3. // ...
  4.  
  5. for(int i=0; i<imagen1.width(); i++)
  6. {
  7.  for(int j=0; j<imagen1.height(); j++)
  8.  {
  9.    color = imagen1.pixel( i ,j );
  10.    if ( color == croma )
  11.    {
  12.    }
  13.    else
  14.    {
  15.    }
  16.  }
  17. }