I want my program to create a new rectangle whenever I click on a button. So if I click it five times, it will create five Rectangles. How can I do this in QML?
I want my program to create a new rectangle whenever I click on a button. So if I click it five times, it will create five Rectangles. How can I do this in QML?
You need to have a component and create an object from it every time a click occurs on a mouse area.
chong_kimkeang (14th November 2012)
Now I can create the object but the problem is the objects that I create are standing on the same x,y whenever I zoom the image that is the background. How can the objects go to the right position whenever i zoom the background? Ex:
I have an image that is the background then I create some rectangles by click a button. When I want this app to be bigger or expend its height or width, how can I make all the objects of rectangle to be zoom in their position? because when I change the side of the background, all the width and height have change but the rectangle's x and y are not change. Can you help me?
it not the thing easy like this. it like you are using StickyNote to stick it on the background and while the background is zooming, all the stickyNote will zoom according to the parent and they are at the correct location. But I can't get the right location of all the stickyNote when zoom.
In my app, i create the rectangle as the component that i use it as the stickyNote and I call it using function createObject(parent,{x,y}) in onClicked event. of course I can create them but when I zoom the background they are not change their position to the correct location(x,y) but they still remember their old position(x,y) that is not fit with the background that have been zoomed. What can I do that?
Press the Maximize button or zoom by the width or height that we have these functionality from the form.
Last edited by chong_kimkeang; 22nd November 2012 at 04:32.
So that's not zooming, that's resizing. In this case setting absolute values for x and y will not work because they will still be at the same place when the item is resized. You need to specify the position in fractions of the position of the resized item (e.g. by putting the items you create in a layout or making a property bind between the width/height of the parent item and x/y of the created item.
chong_kimkeang (22nd November 2012)
It sound complex, how can I bind the width/ height of the parent item and x/y of the created item if the x/y of the item are not change while I resize the background? could you give me example of code because I have never use binding?
Of course you have, here is a simple binding between two items:
javascript Code:
Rectangle { id: root Rectangle { x: root.width/3 y: 10+root.height/4 width: 100 height: 100 } }To copy to clipboard, switch view to plain text mode
This is not the dynamic re-locate that stickyNote. If I create many stickyNote then when I resize they will go to the same place and all my sticky note can be moved over the background. So how can they catch their new location(x,y) when I resize the background?
Last edited by chong_kimkeang; 22nd November 2012 at 05:14.
Create a binding for the dynamic objects you create. You'll have to lookup in the docs, how to do that as I have never done that before. I know it is possible from within C++, possibly from JavaScript you can do that too. If not then recalculate all the positions yourself after you resize the parent item.
chong_kimkeang (22nd November 2012), TheIndependentAquarius (30th July 2014)
I have calculate to find the distance between each stickyNote and the background in percentage. I think it can work because after that I can multiply it with the width and height of the background. Unfortunately, when I resize, the percentage is also changed to lower than before that cause the stickyNote location unchangeable. The problem only that the component's location don't change while resizing. How can I change them?
Is there any property or function for controlling resize?
You set it by changing the "x" and "y" properties of the object. Here is a basic example:
javascript Code:
import QtQuick 1.0 Rectangle { width: 500 height: 500 Rectangle { id: obj x: 0 y: 0 width: 20 height: 20 color: "red" } Timer { property bool reverse: false interval: 10 running: true repeat: true triggeredOnStart: true onTriggered: { obj.x += reverse ? -1 : 1; obj.y += reverse ? -1 : 1; if(obj.x == 0 || obj.x == parent.width) reverse = !reverse; } } }To copy to clipboard, switch view to plain text mode
Just remember that's an imperative approach in a declarative world.
When create the object of rectangle or others that is in main.qml, the coordination(x,y) are correctly change according to their parent whenever we zoom or what but my problem is that the object that I create is not in the same file, in ButtonStickyNote.qml file that when I press on a button, the stickyNote is created with the code
createStickyNote.qml
Qt Code:
function createObjectStickyNote() { var component=Qt.createComponent("ButtonStickyNote.qml") if(component.status == Component.Ready) { component.createObject(imageInside,{"x":10,"y":10}) //imageInside is its parent } }To copy to clipboard, switch view to plain text mode
So when I move the stickyNote, its x,y changed Ex: 100,138 to 200,400 but when I resize it, still it is 200 and 400. I t must change to other x and y to be suitable for the whole background. So how can I change it correctly?
Capture.jpg
How many times do I have to repeat it? Change the "x" and "y" properties of the object you created earlier.
Only whenever the user resize the background because when I resize the background, it seems the app refresh. all the item and object in my app have refresh to the correct location but only stickyNote is not at the correct location, it stand on the same location. Like when u resize Ms Power point , the slide in Ms Power point must be smaller or bigger and change is x,y to fit with the whole App. So I just want to know how can I make my stickyNote get the correct x,y when I resize it?
Last edited by chong_kimkeang; 23rd November 2012 at 02:26.
Bookmarks