alex_lip
alex_lipAug. 7, 2018, 3:14 a.m.

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()
}
} }
We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

4
Evgenii Legotckoi
  • Aug. 7, 2018, 3:25 a.m.
  • The answer was marked as a solution.

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

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
    alex_lip
    • Aug. 7, 2018, 4:18 a.m.
    • (edited)
    Вы два квадрата рисуете - а в примере один и тот же. Там смысл примера в том, что квадрат подготавливается, перемещается, рисуется, канвас поворачивается и опять отрисовывается .

      alex_lip
      • Aug. 7, 2018, 4:33 a.m.
      Видимо пример неверен и нужно два квадрата рисовать (я немного координаты подправил чтобы результат соответствовал картинке).
      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
        • Aug. 7, 2018, 4:38 a.m.

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

          Comments

          Only authorized users can post comments.
          Please, Log in or Sign up
          B

          C++ - Test 002. Constants

          • Result:16points,
          • Rating points-10
          B

          C++ - Test 001. The first program and data types

          • Result:46points,
          • Rating points-6
          FL

          C++ - Test 006. Enumerations

          • Result:80points,
          • Rating points4
          Last comments
          k
          kmssrFeb. 8, 2024, 3:43 p.m.
          Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
          Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
          EVA
          EVADec. 25, 2023, 7:30 a.m.
          Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
          J
          JonnyJoDec. 25, 2023, 5:38 a.m.
          Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
          G
          GvozdikDec. 18, 2023, 6:01 p.m.
          Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
          Now discuss on the forum
          AC
          Alexandru CodreanuJan. 19, 2024, 8:57 a.m.
          QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
          BlinCT
          BlinCTDec. 27, 2023, 5:57 a.m.
          Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
          Дмитрий
          ДмитрийJan. 10, 2024, 1:18 a.m.
          Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
          Evgenii Legotckoi
          Evgenii LegotckoiDec. 12, 2023, 3:48 a.m.
          Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

          Follow us in social networks