У минулій статті було розглянуто приклад того, як зберегти об'єкти графічної сцени у файл SVG, а потім ми змогли відкрити його в CorelDraw. А тепер спробуємо цей ж файл відкрити і відновити графічні об'єкти в QGraphicsScene .
Зазначу, що ми не будемо використовувати клас QSvgRenderer для цього з тієї причини, що він без проблем помістить вміст файлу SVG на графічну сцену, але це буде один єдиний графічний об'єкт, а якщо Вам потрібно, щоб він відновився в як окремі графічні об'єкти, наприклад, QGraphicsItem , то необхідно буде парсить файл SVG виготовляти з нього всі графічні об'єкти.
Оскільки файл SVG має структуру XML-формату, то розібрати його не уявить жодної праці за допомогою класів сімейства QDomDocument.
Структура проекта
Як приклад, використовуватиметься проект із попередньої статті, але буде розведений додатковим класом із двома статичними методами.
- SVGExample.pro - профайл проекту;
- svgreader.h - заголовний файл парсера SVG;
- svgreader.cpp – файл вихідних кодів парсера SVG;
- mainwindow.h - заголовний файл головного вікна програми;
- mainwindow.cpp - файл вихідних кодів головного вікна програми;
- mainwindow.ui - файл форми головного вікна програми;
- main.cpp – стартовий файл вихідних кодів програми.
Структура SVG файла
Оскільки нам потрібно парсить цей файл, то заглянемо в його нутрощі.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="141.111mm" height="141.111mm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny"> <title>SVG Example</title> <desc>File created by SVG Example</desc> <defs> </defs> <g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" > <g fill="#ff0000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" transform="matrix(1,0,0,1,0,0)" font-family="MS Shell Dlg 2" font-size="8.25" font-weight="400" font-style="normal" > <rect x="10" y="50" width="100" height="50"/> </g> </g>
Отже, нас цікавлять теги svg, g, rect. У тезі svg містяться розміри графічної сцени - це *viewBox. * , у який обернутий тег rect містяться кольори заливки та абрису прямокутника, а також товщина абрису. Їх і треба буде спарити.
mainwindow.ui
У цьому файлі буде додана тільки кнопка load, по сигналу від якої відкриємо діалог вибору файлу та запустимо відкриття нашого файлу SVG.
SVGExample.pro
Звертаю вашу увагу на те, що у профайлі проекту потрібно буде підключити модуль xml.
QT += xml
svgreader.h
Нічим не примітний заголовний файл із парою статичних методів у класі.
#ifndef SVGREADER_H
#define SVGREADER_H
#include <QList>
#include <QGraphicsRectItem>
class SvgReader
{
public:
SvgReader();
static QList<QGraphicsRectItem *> getElements(const QString filename);
static QRectF getSizes(const QString filename);
};
#endif // SVGREADER_H
svgreader.cpp
А ось тут і ховається вся магія. У двох вище наведених методах отримуватимемо список прямокутників та розміри графічної сцени.
#include "svgreader.h"
#include <QPen>
#include <QFile>
#include <QMessageBox>
#include <QDomDocument>
#include <QStringList>
SvgReader::SvgReader()
{
}
QList<QGraphicsRectItem *> SvgReader::getElements(const QString filename)
{
QList<QGraphicsRectItem *> rectList; // Объявим в стеке список прямоугольников
QDomDocument doc; // объект документа
QFile file(filename); // Открываем наш SVG-файл
// Если он не открылся или не удалось передать содержимое в QDocDocument
if (!file.open(QIODevice::ReadOnly) || !doc.setContent(&file))
return rectList; // то возвратим список, но пустой
// Ищем в документе все объекты с тегом g
QDomNodeList gList = doc.elementsByTagName("g");
// Начинаем их перебирать
for (int i = 0; i < gList.size(); i++) {
QDomNode gNode = gList.item(i); // Выделяем из списка ноду
QDomElement rectangle = gNode.firstChildElement("rect"); // И ищем в ней элемент c тегом rect
// Если полученный элементы не нулевой, то
if (rectangle.isNull()){
continue;
} else {
// начинаем формировать прямоугольник
QGraphicsRectItem *rect = new QGraphicsRectItem();
// Этот флаг делает объект перемещаемым, потребуется для проверки
rect->setFlag(QGraphicsItem::ItemIsMovable);
// Забираем размеры из тега rect
QDomElement gElement = gNode.toElement();
rect->setRect(rectangle.attribute("x").toInt(),
rectangle.attribute("y").toInt(),
rectangle.attribute("width").toInt(),
rectangle.attribute("height").toInt());
/* Забираем из элемента ноды gNode параметры цветов
* да да да... именно из gNode, а не из rectangle. Эти параметры храняться в теге g
* */
QColor fillColor(gElement.attribute("fill", "#ffffff")); // цвет заливки
fillColor.setAlphaF(gElement.attribute("fill-opacity","0").toFloat());
rect->setBrush(QBrush(fillColor));
// а также цвет и толщина абриса
QColor strokeColor(gElement.attribute("stroke", "#000000"));
strokeColor.setAlphaF(gElement.attribute("stroke-opacity").toFloat());
rect->setPen(QPen(strokeColor,gElement.attribute("stroke-width", "0").toInt()));
rectList.append(rect); // добавляем прямоугольник в список
}
}
file.close();
return rectList;
}
QRectF SvgReader::getSizes(const QString filename)
{
QDomDocument doc; // инициализируем в стеке объект QDomDocument
QFile file(filename); // Открываем наш SVG-файл
// Если он не открылся или не удалось передать содержимое в QDocDocument
if (!file.open(QIODevice::ReadOnly) || !doc.setContent(&file))
return QRectF(0,0,200,200); // то возвратим значения для сцены по умолчанию
/* Далее забираем список элементов с тегом svg.
* В случае, если список элементов будет не пустой,
* то заберём размеры графической сцены.
* */
QDomNodeList list = doc.elementsByTagName("svg");
if(list.length() > 0) {
QDomElement svgElement = list.item(0).toElement();
QStringList parameters = svgElement.attribute("viewBox").split(" ");
return QRectF(parameters.at(0).toInt(),
parameters.at(1).toInt(),
parameters.at(2).toInt(),
parameters.at(3).toInt());
}
return QRectF(0,0,200,200);
}
mainwindow.h
Тут додався лише слот для реакцію сигнал від кнопки відкриття файла.
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QSvgGenerator>
#include <QFileDialog>
#include <QPainter>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private slots:
void on_saveButton_clicked();
void on_loadButton_clicked();
private:
Ui::MainWindow *ui;
QGraphicsScene *scene; // Графическая сцена
QString path; // Путь сохранения файла
};
#endif // MAINWINDOW_H
mainwindow.cpp
Наведу в цьому файлі тільки вміст, що стосується безпосередньо SVG-файлу. У слоті обробки натискання кнопки вибирається за допомогою діалогового вікна файл та розбирається на графічні об'єкти.
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "svgreader.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
scene = new QGraphicsScene();
ui->graphicsView->setScene(scene);
scene->setSceneRect(0,0,400,400);
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::on_saveButton_clicked()
{
// Код из предыдущего урока по работе с SVG
}
void MainWindow::on_loadButton_clicked()
{
QString newPath = QFileDialog::getOpenFileName(this, trUtf8("Open SVG"),
path, tr("SVG files (*.svg)"));
if (newPath.isEmpty())
return;
path = newPath;
scene->clear();
scene->setSceneRect(SvgReader::getSizes(path)); // Зададим размеры графической сцены
// Установим на графическую сцену объекты, получив их с помощью метода getElements
foreach (QGraphicsRectItem *item, SvgReader::getElements(path)) {
QGraphicsRectItem *rect = item;
scene->addItem(rect);
}
}
Підсумок
В результаті ви зможете розібрати збережений SVG файл, щоб забрати з нього хоча б прямокутники. Якщо ви хочете забирати і всі інші об'єкти, то доведеться добряче попотіти і написати парсер для всіх інших об'єктів за аналогією з прямокутником. Єдине, що хочу відзначити, не намагайтеся за допомогою цього коду відкрити файл, створений спочатку в CorelDraw, справа в тому, що версії структури файлу SVG теж сильно відрізняються. І цей код призначений для парсингу файлу, який був створений у минулому уроці, а структура файлів, що генеруються пакетом CorelDraw дещо відрізняється і не буде прочитана повністю.
Докладніше ви можете з цим ознайомитись у відеоуроці. А проект, який об'єднав обидва уроки завантажити за посиланням: SvgExample
Здравствуйте!
void MoveItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) { painter->setPen(Qt::black); painter->setBrush(Qt::cyan); //painter->drawRect(-30,-30,60,60); painter->drawEllipse(-30,-30,30,30); painter->drawEllipse(-25,-25,20,20); painter->drawEllipse(-20,-20,10,10); Q_UNUSED(option); Q_UNUSED(widget); }QRectF MoveItem::boundingRect() const { return QRectF (-30,-30,30,30); }Там в коде у меня есть:
gNode.firstChildElement("rect");Вам же стоит использовать просто path в данном случае.gNode.firstChildElement("path");Аттрибуты забирать аналогично, как они забираются из rect в моём коде. Делайте по аналогии, при возникновении некоторых проблем используйте qDebug() что понять, что идёт не так.Для формирования задал объект QGraphiscPathItem
А кажется понял, я должен из атрибутов path сформировать заново элементы Ellipse, просто нужно правильно подобрать эти атрибуты.....
Ну да. Там должны быть координаты, их нужно пропарсить и по ним построить Path, либо преобразовать их в эллипс. Вообще, кое-что кривовато переносится в SVG местами.
How can I open another polygon type such as circle(ellipse) ?
The principle will be similar. You need to research content of svg file and make parsing of needed tag.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="circle.svg"> <defs id="defs4" /> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.49497475" inkscape:cx="405.75379" inkscape:cy="583.59967" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" inkscape:window-width="1366" inkscape:window-height="703" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <rect style="fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" id="rect3336" width="222.23357" height="131.31982" x="125.25892" y="219.99651" /> <ellipse style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" id="path3338" cx="287.89346" cy="466.47372" rx="89.90358" ry="74.751289" /> </g> </svg>In this code You can try to get ellipse.QList<QGraphicsEllipseItem*> SvgReader::getEllipses(const QString filename) { QList<QGraphicsEllipseItem *> ellipsesList; QDomDocument doc; QFile file(filename); if (!file.open(QIODevice::ReadOnly) || !doc.setContent(&file)) return ellipsesList; QDomNodeList gList = doc.elementsByTagName("g"); for (int i = 0; i < gList.size(); i++) { QDomNode gNode = gList.item(i); QDomElement ellipseElement = gNode.firstChildElement("ellipse"); if (ellipseElement.isNull()){ continue; } else { QGraphicsEllipseItem *ellipseItem = new QGraphicsEllipseItem(); ellipseItem->setFlag(QGraphicsItem::ItemIsMovable); QDomElement gElement = gNode.toElement(); ellipseItem->setRect(ellipseElement.attribute("cx").toFloat() - ellipseElement.attribute("rx").toFloat(), ellipseElement.attribute("cy").toFloat() - ellipseElement.attribute("ry").toFloat(), ellipseElement.attribute("rx").toFloat() * 2, ellipseElement.attribute("ry").toFloat() * 2); QColor fillColor(ellipseElement.attribute("style").split(";").at(0).split(":").at(1)); ellipseItem->setBrush(QBrush(fillColor)); QColor strokeColor(gElement.attribute("stroke", "#000000")); strokeColor.setAlphaF(gElement.attribute("stroke-opacity").toFloat()); ellipseItem->setPen(QPen(strokeColor,gElement.attribute("stroke-width", "0").toInt())); ellipsesList.append(ellipseItem); } } file.close(); return ellipsesList; }Thank You sir, So how can I change this method
QRectF SvgReader::getSizes(const QString filename) { QDomDocument doc; // initialize the stack object QDomDocument QFile file(filename); // Open your SVG-file // If it is not opened, or have failed to transmit the contents in QDocDocument if (!file.open(QIODevice::ReadOnly) || !doc.setContent(&file)) return QRectF(0,0,200,200); // the return values for the default scene /* Then pick up a list of items with the tag svg. * If a list of elements is not empty, * take the size of the graphic scenes. * */ QDomNodeList list = doc.elementsByTagName("svg"); if(list.length() > 0) { QDomElement svgElement = list.item(0).toElement(); QStringList parameters = svgElement.attribute("viewBox").split(" "); return QRectF(parameters.at(0).toInt(), parameters.at(1).toInt(), parameters.at(2).toInt(), parameters.at(3).toInt()); } return QRectF(0,0,200,200); }For what You want to use another class instead of QRectF?
Sir,I tried your code for open ellipse item.but my program not open ellipse item.what should I need to do?
QList<QGraphicsEllipseItem*> ReadSVG::getEllipses(const QString filename) { QList<QGraphicsEllipseItem *> ellipsesList; QDomDocument doc; QFile file(filename); if (!file.open(QIODevice::ReadOnly) || !doc.setContent(&file)) return ellipsesList; QDomNodeList gList = doc.elementsByTagName("g"); for (int i = 0; i < gList.size(); i++) { QDomNode gNode = gList.item(i); QDomElement ellipseElement = gNode.firstChildElement("ellipse"); if (ellipseElement.isNull()){ continue; } else { QGraphicsEllipseItem *ellipseItem = new QGraphicsEllipseItem(); ellipseItem->setFlag(QGraphicsItem::ItemIsMovable); QDomElement gElement = gNode.toElement(); ellipseItem->setRect(ellipseElement.attribute("cx").toFloat() - ellipseElement.attribute("rx").toFloat(), ellipseElement.attribute("cy").toFloat() - ellipseElement.attribute("ry").toFloat(), ellipseElement.attribute("rx").toFloat() * 2, ellipseElement.attribute("ry").toFloat() * 2); QColor fillColor(ellipseElement.attribute("style").split(";").at(0).split(":").at(1)); ellipseItem->setBrush(QBrush(fillColor)); QColor strokeColor(gElement.attribute("stroke", "#000000")); strokeColor.setAlphaF(gElement.attribute("stroke-opacity").toFloat()); ellipseItem->setPen(QPen(strokeColor,gElement.attribute("stroke-width", "0").toInt())); ellipsesList.append(ellipseItem); } } file.close(); return ellipsesList; } QRectF ReadSVG::getSizes(const QString filename) { QDomDocument doc; // initialize the QDomDocument object on the stack QFile file(filename); // Open our SVG file // If it did not open or could not transfer content to QDocDocument if (!file.open(QIODevice::ReadOnly) || !doc.setContent(&file)) return QRectF(0,0,200,200); // then return the values for the default scene QDomNodeList list = doc.elementsByTagName("svg"); if(list.length() > 0) { QDomElement svgElement = list.item(0).toElement(); QStringList parameters = svgElement.attribute("viewBox").split(" "); return QRectF(parameters.at(0).toInt(), parameters.at(1).toInt(), parameters.at(2).toInt(), parameters.at(3).toInt()); } return QRectF(0,0,200,200); }widget.cppvoid Widget::on_btnOpen_clicked() { QString newPath = QFileDialog::getOpenFileName(this, trUtf8("Open SVG"), path, tr("SVG files (*.svg)")); if (newPath.isEmpty()) return; path = newPath; scene->clear(); scene->setSceneRect(ReadSVG::getSizes(path)); foreach (QGraphicsEllipseItem *itemE, ReadSVG::getEllipses(path)) { QGraphicsEllipseItem *elips = itemE; scene->addItem(elips); } }I think You have another version of SVG file. First, need to see content of SVG file. It is simple XML-format, therefore just need to research content.
Sir I post is as a topic,please help me to solve this problem
Скажите пожалуйста, как пользоваться QSvgRenderer и загружать целиком в QGraphicsScene ?
Если делаю так, то получаю белый экран:
А если делаю с помощью вашего класса, то тоже получаю белый экрак.
Рисую на сцене так: Qt/C++ - Урок 021. Рисование мышью в Qt
Вот так целиком добавлять можно