© 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

Для Django рекомендую VDS-хостинг TIMEWEB

Вы два квадрата рисуете - а в примере один и тот же. Там смысл примера в том, что квадрат подготавливается, перемещается, рисуется, канвас поворачивается и опять отрисовывается .

Видимо пример неверен и нужно два квадрата рисовать (я немного координаты подправил чтобы результат соответствовал картинке).
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()                // Заканчиваем рисовать
           }
       }

}





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

Для Django рекомендую VDS-хостинг TIMEWEB

Ответы

Только авторизованные пользователи могут отвечать на форуме.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
15 октября 2018 г. 21:36
Allyans .

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

  • Результат 60баллов,
  • Очки рейтинга-1
15 октября 2018 г. 11:25
Екатерина Самойлова

C++ - Тест 002. Константы

  • Результат 33баллов,
  • Очки рейтинга-10
15 октября 2018 г. 11:17
Екатерина Самойлова

C++ - Тест 006. Перечисления

  • Результат 80баллов,
  • Очки рейтинга4
Последние комментарии
10 октября 2018 г. 9:50
Евгений Легоцкой

Qt/C++ - Урок 083. Создание динамической библиотеки и подключение её в другой проект

Если и начинать писать о плагинах, то нужно тогда с Qt Creator начинать, там наверняка будет одинаковый принцип, но по Qt Creator хотя бы информация есть.
10 октября 2018 г. 9:48
ost.vld

Qt/C++ - Урок 083. Создание динамической библиотеки и подключение её в другой проект

О плагинах к QtCreator в целом, тоже интересно.
10 октября 2018 г. 9:46
ost.vld

Qt/C++ - Урок 083. Создание динамической библиотеки и подключение её в другой проект

ну типа того, создание программы, функционал которой можно расширять плагинами, и, в перспективе, создание API.
10 октября 2018 г. 8:31
Евгений Легоцкой

Qt/C++ - Урок 083. Создание динамической библиотеки и подключение её в другой проект

Типо как в Qt Creator? Самому бы интересно было о таком почитать. В данный момент я бы мог написать только о написании плагинов для Qt Designer. С этим есть некоторый опыт.
Сейчас обсуждают на форуме
15 октября 2018 г. 12:45
Allyans .

QGraphicsItem change color

Хорошо)
11 октября 2018 г. 10:13
Arrow

Работа с WebView в QML

Нашел в чем проблема. Пишу на случай если кому-то попадется такое же счастье с WebView как и мне. Проблема как оказалась с Debug версией, так как в Release и Profile все работает (...
10 октября 2018 г. 12:49
Виталий Антипов

Кто что делает на Qt?

Работаем по локальной сети. Файл базы, схемы и фото лежат на сервере. Чтобы не было проблем при одновременной работе с одним файлом, все запросы обернул в транзакции, как указано в документаци...
10 октября 2018 г. 11:21
Arrow

Редактирование записи на форуме

Добрый день! К сожалению встретил небольшой баг на форуме. При создании записи на форуме и вставке кода, через соответствующую кнопку номера строк проставляются верно, но каждый...
10 октября 2018 г. 9:46
Arrow

Настройка Qt Creator для Android

Я Genymotion  ставил с VBox в комплекте для личного использования, после добавил из списка телефон с нужным API. Запустил его и при компиляции Qt Creator сам нашел его и все запустилось...
Присоединяйтесь к нам в социальных сетях