Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
Qt
Введение

В прошлом уроке мы рассматривали отрисовку примитивов на Qt/C++, в этом же уроке хотелось бы показать как создать примитивную анимацию на QML.

Для компиляции проекта, как и в прошлой статье, использовался Qt Creator.

QML (Qt Meta-Object Language) — декларативный язык программирования, основанный на JavaScript, предназначенный для дизайна приложений, делающих основной упор на пользовательский интерфейс. Является частью Qt Quick, среды разработки пользовательского интерфейса, распространяемой вместе с Qt. В основном используется для создания приложений, ориентированных на мобильные устройства с сенсорным управлением. -- Wikipedia

Часть 1. Подключение QML

Чтобы QML в проекте работал корректно, достаточно в папку с кодами поместись папку qmlapplicationviewer, который поставляется с Qt Creator последних лекций.

Чтобы работать с QML нам надо подключить его в main.cpp, создав объект класса QmlApplicationViewer и указав путь в главному qml файлу нашего проекта, что выглядит так:

QScopedPointer<QApplication> app(createApplication(argc, argv)); // стандартный класс, отвечающий за выполнение самого приложения
 
QmlApplicationViewer viewer; // класс для определения qml
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto); // задаем поворот экрана
viewer.setMainQmlFile(QLatin1String("qml/third/main.qml")); // указываем путь к главному qml файлу
viewer.showExpanded(); // выводим на экран qml

Первая строка -- создание главного объекта самого Qt.
Вторая строка -- создание объекта QmlApplicationViewer.
Третья строка -- задание поворота экрана.
Четвертая строка -- указание пути к главному qml файлу.
Пятая строка -- вывод на экран.

В дальнейшем мы создадим три qml файла: сам главный файл, файл части, где мы пропишем обработку нажатий и зададим саму анимацию, и класс клеточки, которая будет вращаться.

Часть 2. Написание qml файлов main.qml

import QtQuick 1.1
 
Item { // создание общего объекта
    id: field // задание id этого объекта
    width: 160 // задание ширины
    height: 190 // задание высоты
    Rectangle { // указываем, что ходим отобразить четырехугольник
        id: fieldrec // задаем id четырехугольника
        width: 150 // ширину
        height: 190 // высоту
        color: "#ffffff" // и цвет
        Part {} // помещаем внутрь прямоугольника объект part
    }
 
}

В самом начале нам надо подключить сам QtQuick, частью которого и является QML.
Затем мы объявляем некий объект, задаем его длину/ширину, указываем id и помещаем на него прямоугольник со своими свойствами.
Строка Part {} означает, что в этот прямоугольник мы помещаем некий объект Part.

part.qml

import QtQuick 1.1
 
Item {
    id: part
    width: 150
    height: 160
    visible: true; // указываем, что объект виден
    Flipable { // свойство, означающее поворот объекта
        id: main
        property bool flipped: false // перевернуто ли изображение 
        width: 150
        height: 160
 
        front: Cell { // помещение нашего объекта в область видимости одной стороны
            id: f
            x: 5 // смещение по х от левой границы
            y: 5 // смещение по у от верхней границы
            rang: "a" // отображаемый текст
        }
        back: Cell { // то же самое, что и выше, только с обратной стороны
            id: b
            rang: "b" // на обратной стороне пишем b
        }
 
        transform: Rotation { // способ трансформации изображения
            id: rotation // поворот
            origin.x: 75; origin.y: 85
            axis {x: 0; y: 1; z:0} // как поворачиваем
            angle: 0 // угол
        }
 
        states: State { // задаем состояние
            name: "back" // название состояния
            PropertyChanges { target: rotation; angle: 180} // изменяемые параметры
            when: main.flipped // когда переменная указывает на то, что был совершен переворот
        }
 
        transitions: Transition {
            NumberAnimation { target: rotation; property: "angle"; duration: 2000;} // задаем время анимации
        }
 
        MouseArea { // указваем, что будем делать при клике на картинку
            anchors.fill: main
            onClicked: main.flipped = !main.flipped // меняем значение переменной
 
        }
    }
}

В данном файле мы также объявили некий объект Item с определенной высотой и шириной и поместили на него объект Flipable, который и будет вращаться.
Мы объявили переменную flipped, которая равна false когда наша клеточка повернута передней стороной и true -- когда задней.
Чтобы описать вращение, нам необходимо задать некоторые атрибутые, которые указывают на то, что отображается во время показывания передней части (front), задней части (back), метод вращения (transform), состояния (states) и что мы анимируем (transitions).

1) front, back -- мы помещаем объект Cell, который и является нашей клеточкой, и указываем надпись, смещение по х, смещение по у и id.
2) transform -- чтобы описать метод вращения, мы помещаем объект Rotation и описываем его атрибуты.
3) states -- указываем какие атрибуты менять и при каких условиях.
4) transitions -- задаем саму анимацию, т.е. изменяемые атрибуты, скорость и цель

MouseArea {
    anchors.fill: main
    onClicked: main.flipped = !main.flipped
}

Этот код отвечает за нажатие по нашей "форме", мы указываем к чему привязываем обработку нажатия и изменяем переменную при нажатии.

Cell.qml

import QtQuick 1.1
 
Rectangle { // указываем, что наше изображение -- прямоугольник
    id: warrior
    width: 150
    height: 160
    color: "#ff0000" // красного цвета
    radius: 56 // с закругленными краями
    scale: 1
    property string rang: "ab"
 
    Text { // помещяем на прямоугольник текст и задаем его атрибуты
        id: text1
        text: rang
        font.bold: true
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        font.family: "SimSun"
        verticalAlignment: Text.AlignTop
        horizontalAlignment: Text.AlignLeft
        font.pixelSize: 160
    }
}

Сама наша клеточка, как вы видете, является лишь закругленным прямоугольником красного цвета с текстом. В этом коде мы создаем треугольник, задаем степень округления, цвет и помещаем текст на него, также указывая определенные атрибуты (размещение, шрифт и т.д.).

Конечный результат:

К сожалению, саму анимацию не удалось нормально заскриншотить, но пользователь может просто скомпилировать проект и посмотреть на результат сам.

Часть 3. Заключение

QML используется, в большей степени, для создания приложений под мобильные устройства, но, как вы видете, нет ничего сложного в создании и десктопных приложений. Простота и логичность QML позволяет разработчику, не прилагая особых усилий, реализовывать приятный интерфейс, например с помощью той же анимации, что, я надеюсь, и показал в этом уроке.

Прикрепленный файлРазмер
QML.zip26.48 кб