© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB
7 августа 2018 г. 7:14

Rotate canvas QML

Разбираю пример , который должен нарисовать квадрат и такой же квадрат повернутый на 45 градусов.
Почему-то не работает ни translate ни rotate. Пример из книжки(мои только заголовки) - где может быть проблема?

import QtQuick.Window 2.2
import QtQuick 2.10
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

import "content" ApplicationWindow { id:window visible: true width: 840 height: 480 title: qsTr("TEST")
Canvas {
id: root
width: 240; height: 120
onPaint: {
var ctx = getContext("2d")
ctx.strokeStyle = "blue"
ctx.lineWidth = 4

ctx.beginPath()
ctx.rect(-20, -20, 40, 40)
ctx.translate(120,60)
ctx.stroke()

// draw path now rotated
ctx.strokeStyle = "green"
ctx.rotate(Math.PI/4)
ctx.stroke()
}
} }

Ну вот так это будет работать

import QtQuick.Window 2.2
import QtQuick 2.10
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3


//import "content"
ApplicationWindow {
    id:window
    visible: true
    width: 840
    height: 480
    title: qsTr("TEST")


    Canvas {
        anchors.centerIn: parent
        id: root
        width: 200; height: 200
        onPaint: {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4

            ctx.beginPath()             // Начинаем рисовать
            ctx.translate(120,60)       // Устанавливаем translation перед началом рисования
            ctx.rect(0, 0, 40, 40)      // Отрисовываем квадрат
            ctx.stroke()                // Заканчиваем рисовать

            // draw path now rotated
            ctx.strokeStyle = "green"
            ctx.beginPath()             // Начинаем рисовать
            ctx.rotate(Math.PI/4)       // Поворачиваем
            ctx.rect(-20, -20, 40, 40)  // Отрисовываем квадрат
            ctx.stroke()                // Заканчиваем рисовать
        }
    }
}

Получается, что изменения translate и rotate нужно устанавливать перед отрисовкой квадратов. Также, если отрисовываем квадраты выходят за область Canvas, это у вас там отрицательные координаты были, то те части квадратов не отрисовываются. Возможно, это можно настроить, но нужно внимательно читать документацию, поскольку
clip: false

не сработало для того, что отрисовывается в обработчике onPaint
  • #
  • отредактировано7 августа 2018 г. 8:19
  • 7 августа 2018 г. 8:18
Вы два квадрата рисуете - а в примере один и тот же. Там смысл примера в том, что квадрат подготавливается, перемещается, рисуется, канвас поворачивается и опять отрисовывается .

Видимо пример неверен и нужно два квадрата рисовать (я немного координаты подправил чтобы результат соответствовал картинке).
ApplicationWindow {
    id:window
    visible: true
    width: 840
    height: 480
    title: qsTr("TEST")


    Canvas {
           anchors.centerIn: parent
           id: root
           width: 200; height: 200
           onPaint: {
               var ctx = getContext("2d")
               ctx.strokeStyle = "blue"
               ctx.lineWidth = 4

               ctx.beginPath()             // Начинаем рисовать
               ctx.translate(120,60)       // Устанавливаем translation перед началом рисования
               ctx.rect(-20, -20, 40, 40)      // Отрисовываем квадрат
               ctx.stroke()                // Заканчиваем рисовать

               // draw path now rotated
               ctx.strokeStyle = "green"
               ctx.beginPath()             // Начинаем рисовать
               ctx.rotate(Math.PI/4)       // Поворачиваем
               ctx.rect(-20, -20, 40, 40)  // Отрисовываем квадрат
               ctx.stroke()                // Заканчиваем рисовать
           }
       }

}





Мне тоже кажется, что пример ошибочный.. просто совсем никак иначе не работает.

Ответы

Только авторизованные пользователи могут отвечать на форуме.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
15 августа 2018 г. 19:02
Lord Inquisitoris

C++ - Тест 003. Условия и циклы

  • Результат 57баллов,
  • Очки рейтинга-2
15 августа 2018 г. 18:58
Lord Inquisitoris

C++ - Тест 005. Структуры и Классы

  • Результат 83баллов,
  • Очки рейтинга4
15 августа 2018 г. 9:29
Леха Завистович

C++ - Тест 001. Первая программа и типы данных

  • Результат 86баллов,
  • Очки рейтинга6
Последние комментарии
10 августа 2018 г. 13:40
Alex

Работа с триггерными функциями в PostgreSQL

Приветствую! Если вы создаете новую таблицу, почему бы просто не сделать вьюху ? Просто от одного названия "триггер" как-то не хочется его использовать, а уж кода сколько писа...
10 августа 2018 г. 11:46
Евгений Легоцкой

Bash скрипт для создания и скачивания дампа базы данных и медиа файлов с удаленного сервера

Вон оно что. Не сталкивался с таким, надо будет глянуть исходники дефолтного менеджера объектов. Возможно там кеширование просто. Пробовали добавить запись через adminer, перезапусти...
10 августа 2018 г. 11:34
Alex

Bash скрипт для создания и скачивания дампа базы данных и медиа файлов с удаленного сервера

допустим у нас есть любая таблица, созданная джангой. через админку добавляем пару записей. все ок. далее, лично в моем случае , я открываю adminer, и в эту таблицу добавляю еще одну зап...
Сейчас обсуждают на форуме
15 августа 2018 г. 14:06
Олег Корнев

Как подключить QtCharts в QML?

После некоторых манипуляций (переустановил креатор) смог запустить экземплы с использованием QtCharts, но все они работают с подключениями в файлах .pro .cpp, у меня таких файлов нет. Как...
14 августа 2018 г. 7:02
Ruslan-maniak

Переключение страниц и перевод фокуса на потомка новой страницы

Большое спасибо. Подтолкнули меня на мысль вынести обработку клавиш из PathView на всю страницу. И тогда - да, ваша подсказка работает. добавил в StackView onCurrentItemChanged: currentItem.fo...
14 августа 2018 г. 6:39
Евгений Легоцкой

Как сделать аудиовизуализацию для плеера на qt?

Добрый день. Просмотрите пример в Qt Creator, который на QML, там реализовано визуализация, возможно вам понравится использовать, QML, да и кастомные интерфейсы на нём всё-таки лучше...
11 августа 2018 г. 10:12
Евгений Легоцкой

Qt C++ vs QML

Добрый день. Если Андроид предполагается, то конечно нужно использовать QML. Я занимался разработкой арканоида на QML и ещё одной игры. Пытался реализовывать логику на QML, но это ...
11 августа 2018 г. 9:24
Евгений Легоцкой

Помогите со слоями

Проверочное сообщение

Рекомендуемые страницы