I'm doing an application in flex where I draw different sprites inside a canvas. Depending of the dimensions, scrollbars can be appear. I would like to move the "image" with the movement of the mouse as you can see at the Adobe Reader when you are reading a document with zoom (hand mouse icon). In this way, you dont have to touch the scrollbar.
I'm start trying with drag and drop properties of the canvas, setting the position of the scrollbar according with the movement of the mouse but that is not as I expect.
Any ideas or suggestions?
Thanks in advance.
Recipe:
Listen for the mouseMove (MouseEvent.MOUSE_MOVE) event on the canvas
In event listener, examine event.localX, event.localY
Based on those values and the canvas's width and height, set the canvas's horizontalScrollPosition and verticalScrollPosition accordingly
Hope this helps.
What you can do is, change the position of the scrollbar , when the mouse reaches the last 20 pixels on the left or the right, or the top and bottom.
What you would really need to do is, have a mouseMove listener on the whole application, and when the mouse is within the end ranges of any of the sides, you can use the scroll.scrollTo function to move the scrollbars.
Related
The Back button in the top left corner of my touch user interface is a little hard to press on a resistive touchscreen, because the touch events are not so precise at the borders of the screen.
The visual size of the button can't really be increased because the screen space is needed for other things. Thus I would like to increase only the clickable area of the button. So when the user touches somewhere in the top left corner of the screen (as marked in red), the back button should be pressed. Note that the red area also overlaps another button. Ideally, the visual button state would also change to the "pressed" state.
Can anyone give me some pointers in the right direction? I have considered the following things, but I'm unsure which would work.
Overlaying the actual button with a larger, invisible button, painted with a transparent brush. But I have no idea how I could paint the smaller button as "pressed" when the user is pressing the invisible button.
Creating a new class based on QWidget, which has the size of the red area (with invisible background) and contains the actual button. Then relay touch events to the button so that it is pressed when the user touches the empty area.
Subclassing QPushButton and reimplementing QAbstractButton::hitButton to accept points outside of the button's area. But I guess that function would probably isn't even called when I touch outside the widget area.
To occupy more vertical space inside a layout, set buttons vertical policy to expanding.
To increase the clickable area without increasing the visual size, increase the margin.
To have the back button overlapping other buttons, don't put it to a layout. Instead set its parent directly and move it to the corner.
backButton = new QPushButton("< Back", mainWindow);
backButton->setStyleSheet("margin: 30;");
backButton->show();
backButton->resize(150, 90);
backButton->move(-30, -30);
I have a Canvas with a VGroup inside that is populated with objects of various types, some of which have mouseEvents such as MOUSE_OVER.
The problem I am having is getting the Canvas to scroll properly with the mouse wheel. It will only work if the mouse is over the scrollbars.
I tried faking it by listening for the mouse wheel on the stage, then manually scrolling the Canvas. But when the the Canvas scrolls to where an object moves under the mouse, things get screwey.
Any suggestions?
take care,
lee
UPdate:
Ok. I found that if I use the canvas without my addition, it scrolls only when the mouse is over an object inside it. If the mouse is in an empty area, it does not scroll.
When I say 'the mouse is over an object inside it', I mean text fields and other objects that have visual elements.
Ok. I've found a partial solution. If I intercept the mouseWHeel event on the VGroup, the scrolling works. However, when I get to a RichEditableText object in the VGroup, the scrolling stops. Before, it scrolled just fine.
Found an interesting solution here. The mouseWheel event is not triggered in a canvas unless it is over an InteractiveObject, i.e. text fields etc. However, as I was testing to make sure my mouse was actually in the canvas I discovered that the event is triggered in the 'white' space between objects if the canvas has it's backgroundColor property set. So, set that backgroundColor and, if you didn't want a background, then set backgroundAlpha to 0.
I have an image that I show inside a canvas which I can zoom in on.
The problem is that when zoomed in, I try to drag the image, I can see the outline of the image in the foreground, (i.e.) outside the canvas boundary.
Is there anyway to tell the dragHandler to crop the "grabbed" image outside the canvas boundary?
In my experience using the built in drag/drop flex stuff is overkill for something that involves moving a component around in a canvas.
The easier way to do this (in my opinion) would be to listen for mouse down/up/move the image around in the canvas yourself.
When you detect a mouse down on your image, add a listener for mouse move (pro tip: make sure you set useCapture to true when calling addEventListener) and store the position of the mouse relative the origin of your image. Then whenever you get a mouse move, change the position of your image within your canvas taking into account the position of the mouse within the image (which you stored on mouse down). Keep doing this until mouse up occurs, then remove your mouse move listener.
There are some additional finer points to account for (what if the user drags outside of the canvas? Or outside of the browser window?), but this will get you started.
Hope that helps.
When I was starting to drag any element, mouse wheel scrolling is turned off, how to scroll while dragging?
I'm newbie here, so I can't insert a picture, here's a link http://i.stack.imgur.com/4tp69.gif
Hm... I would say it is because the scrolling is caught by the dragged element, as it is on top of the VGroup. So - I guess the solution would be to listen to scrolling event in the dragged element and send that to the VGroup / something that will handle the drag'n'scrolling of the VGroup.
Also - I am not sure, but when you are dragging, the VGroup might no more be specified as the dragged element's parent - so, just add a realParent reference or whatever so you can always access it.
To draw a "selection rectangle" from the mouse down , mouse move then remove it on mouse up i currently do the following:
My board is a canvas,
On mouse down i create a new UIcontainer i set his borders.
I update his width and height related the the mouse move position,
on mouse up i remove this child UIcontainer.
Do i have to create a new component for this kind of task or there is a better (lighter way) in flex ?
Thanks,
Here is an Flex selection rectangle example, although I think it won't be a better/lighter way, perhaps you can get some nice ideas from it.
I'd say you got it right.