Rotate canvas QML

Question

alex_lip7 августа 2018 г. 13: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()
    }
}
}

Рекомендуем хостинг TIMEWEB

Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Подписка на обсуждение2

Подписка на раздел99

Вам это нравится? Поделитесь в социальных сетях!

7 августа 2018 г. 13:25
Ответ был помечен как решение.

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

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 г. 14:18
(ред.)

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

7 августа 2018 г. 14:33

Видимо пример неверен и нужно два квадрата рисовать (я немного координаты подправил чтобы результат соответствовал картинке).

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()                // Заканчиваем рисовать
           }
       }

}

Evgenii Legotckoi → alex_lip
#

7 августа 2018 г. 14:38

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

Rotate canvas QML

Рекомендуем хостинг TIMEWEB

Комментарии