Canvas Scrolling - apache-flex

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.

Related

QListView Transparent Scrollbar with Image in QT

I am having QListWidget, i want to have a Transparent Scrollbar with Image.
Initially that scrollbar should be hidden on scroll only it should show.
How i Can achieve this in Qt ?
Any examples or ideas are welcomed.
How i can apply image to Listview Scrollbar.
Here are the three things you can look at to be able to control the scroll bar for most kinds of widgets in Qt:
VerticalScrollBarPolicy
HorizontalScrollBarPolicy
enum Qt::ScrollBarPolicy.
To be able to track how the user interacts with your QListWidget or any Widget for that matter you need to subclass it and implement the virtual methods from the QWheelEvent and possibly the QKeyEvent.
Scrolling is typically done with the mouse wheel and with the keyboard arrow keys and sometimes page-up and page-down and spacebar. I haven't done a lot with QListWidget, but you should double check which keyboard events/mouse events trigger scrolling.
These events will cause scrolling event even after you set either or both of the ScrollBarPolicies for the widget to be Qt::ScrollBarAlwaysOff.
First you should put in the constructor of your widget
this->setVerticalScrollBar(Qt::ScrollBarAlwaysOff);
this->setHorizontalScrollBar(Qt::ScrollBarAlwaysOff);
So you just need to setMouseTracking(true) for the widget (so that it tracks more than just the clicks) and reimplement at the very least wheelEvent(), and when a wheel event occurs, set the vertical/horizontal scroll bar policies to true and call update on your widget.
If you want to turn the scrollbars back off after a few milliseconds after they have started scrolling, you will need to create a QTimer in your constructor for your subclassed widget and connect it to a slot that sets the scroll bar polices on the timeout. Then you start/restart that timer every time the user does a wheelEvent().
As far as applying an image to the ListView Scrollbar, you should look into subclassing QAbstractScrollBar, if you want to actually put an image on it or change the way it looks. Setting up some tool buttons may also be the way to go if you are trying to put buttons with different icons in place of the scrollbar.

Not allowing a component underneath a canvas to be clickable when the canvas is visible in Flex 3

I have a component (a canvas) that has a click event listener on it. However, there is sometimes an opaque canvas that lays over that component. When that overlaying canvas is visible, I don't want the underlying component to be clickable.
Is there a way to do this without manually removing the click event listener when the overlaying canvas becomes visible and adding back the click event listener when the overlaying canvas becomes invisible?
As a side note, interestingly enough, the overlaying canvas contains label elements and when the overlaying canvas is visible, the underlaying component is only clickable for the area of the overlaying canvas where there is not a label element.
Also, since this is Flex, I should note that the click event listener was originally added through Actionscript and not through mxml.
I believe what you want to do is set mouseEnabled="true" and useHandCursor="false" on the opaque canvas. That should stop any mouse events to go 'through' the canvas.
I'm pretty sure if you set the mouseEnabled and mouseFocusEnabled properties to false, then the canvas will not fire the click event handler.
Of course, I didn't think canvases (or any Container) could be Clickable; so for the event to fire; there has to be something inside the canvas that actually fires the click event. I'm not sure if the mouseEnabled and mouseFocusEnabled properties trickle down to the container's children.
Just mask the opaque canvas so it wont be over the canvas with the click effect

Flex Drag and Drop

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.

drag and drop in Canvas

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.

Draggable scrolling. How to scroll while dragging?

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.

Resources