Qt quick foundation 2 (including translation, rotation, zoom and qml control capitalization)

Qt quick foundation 2 (including translation, rotation, zoom and qml control capitalization)

foreword

In the previous tutorial, we have described the use of the basic element Text Image Rectangle, and it also involves the Mousearea mouse area. This section is still for the learning and practice of the basic elements for subsequent review.

Previous link: [May Day Creation] Qt quick foundation 1 (including the use of the basic element Text Image Rectangle)_ADi_hhh's Blog-CSDN Blog

Simple pan, rotate and zoom

• Translation is achieved by changing the position of x, y
• Rotate through the rotation property, the value is 0~360
• Scaling is achieved through the scale attribute, <1 means zooming out, >1 means zooming in.

To better interact with images, recreate a defined "clickable image" element, which is based on the Image element.

Create a new folder at the project and name it "Components"

In the "Components" folder, click "New", click New File, create a qml file, and name it "ClickableImage.qml"

Modify the CMakeList file and add the newly created file

Write the following code in the ClickableImage.qml file:

import QtQuick

//simple image which can be clicked
Image{
    id:root1
    signal clicked
    MouseArea{
        anchors.fill: parent
        onClicked: root1.clicked()
    }

}

The above code is created based on the Image element, and then ClickableImagethe image is created using the element, and the image is clickable.

Write the following code in main.qml and add in frontimport "components"

  Image{
        id:bg
        source:"https://ts1.cn.mm.bing.net/th/id/R-C.13881c555584a29d4d2f3788232ef730?rik=jkE1V0bQyMVOaA&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f4%2f31%2f65b9d39e84.jpg&ehk=dnq80Zih3kNPSCZoSNF3ET6kWi0vN40flGVN1QP458I%3d&risl=&pid=ImgRaw&r=0"
    } //背景图片
    MouseArea{
        id:bgclicker
        anchors.fill: parent
        onClicked: {
            cat.x =12
            beauty.x =150
            beauty.rotation =0
            beauty.scale =1.0

        } //鼠标区域，点击这一区域，图片归位
    }
 
 ClickableImage{
        id:cat
        x:12;y:250
        source: "https://ts1.cn.mm.bing.net/th/id/R-C.c1ef7c28ec0c3a03671bf8c5b84824a9?rik=gtgH8z39ogolSA&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f230101%2f1_010120010R534.jpg&ehk=%2bP%2fA9Bc1Xw28uBxAFWEP0qGpscER%2bd8hq%2flkynX4qUw%3d&risl=&pid=ImgRaw&r=0"
        //可以加载网页图片
        antialiasing: true //抗锯齿,图片过渡更加平滑
        onClicked: {
            x+=20// x方向平移
        }
    }
    ClickableImage{
        id:beauty
        x:150;y:350
        source: "https://ts1.cn.mm.bing.net/th/id/R-C.6ea41fdad2fdbe324a84b6b68969ae4d?rik=nsNtS0in5lEFjw&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f221229%2f1_12291Q03140R.jpg&ehk=Irzz7kT29gRfpRgrn7Z7KipUPsJuV6HR0yZGdyFD41M%3d&risl=&pid=ImgRaw&r=0"
        //可以加载网页图片
        antialiasing: true
        onClicked: {
            x+=20
            rotation +=15 //旋转
            scale -=0.05 //放缩
        }
    }

The pictures above are all pictures I used on the Internet. The Mousearea is to ensure that when you click on other places in the window, the picture will return to the initial state; the first picture id is cat, and the translation in the x direction will occur after clicking; the second The id of the two pictures is beauty. After clicking, it will translate in the x direction, rotate clockwise and shrink by 5%.

Compile and run, the result is as follows:

Note that when you click on the blank area, both pictures are restored to their original state.

Some basic uses of other elements

New properties can be added to new elements using the property qualifier, followed by the type, name, and optional initial value

property<类型><名称>：<值>

Another important way to declare properties is to use the alias keyword

property alias<名称>：<引用>

property alias 赵子龙：赵云

A visual element is something like a Rectangle that has a geometric shape

Non-visual elements such as Timer provide general functionality and are usually used to control visual elements

Item is the base element of all visual elements, so all other visual elements inherit from Item. It doesn't draw anything itself, but defines common properties for all visual elements

When the qml file is used as a control, be sure to start the name with an uppercase letter

I encountered such a problem today. When the name starts with a lowercase letter, it is not successful to use this element control, but it is successful to rebuild a file named with an uppercase letter. Forgive my ignorance.

summary

This article mainly introduces simple transformations including translation, rotation and scaling, as well as some other elements using basic specifications and a pit that I stepped on. I originally wanted to introduce text input TextEdit and other content related to anchoring anchor and Positioning, but I wrote It's a bit messy, so let's review it in the code when we encounter it, so I sent out only a part of the content, and the next section will continue to introduce animation-related content.

If you think my writing is good, please give me a free like! If there are errors in the content, please also give me feedback.