What's the "right" way to expand the hover area of a certain component? In other words, how do I turn a component's state to hovered when my mouse pointer is closer than a certain distance X? I can think of a bunch of ways to do this, but they all seem hacks and I'm curious if anyone has strong feelings about a better designed way to do something like this.
And since we're at it, how would you make alpha of the component proportional to the mouse cursor distance from the component, so that the component fades in as we approach it? Again I can think of various hacks, but not sure what a clean approach would be.
thank you!
f
I would suggest centering the component inside a Canvas that is sized to pad the target component by the desired amount. You can then listen to the Canvas for mouseover and trigger your logic to enable hover. That seems to be the cleanest approach to me -- alternately you could listen for mousemove on the Stage and constantly check the mouse distance to the target component... but that seems messy.
As for alpha I would take a similar approach. Let the outer edge of the alpha container represent the minimum alpha and the inner edge represent the maximum alpha. How you scale in between (linear, etc..) is up to you.
Related
I'm writing a "3D navigation" where moving the mouse cursor subtlely rotates the contents of the screen. When something is clicked I want it to zoom (scale).
The rotation is achieved with transform property, and evoked when the cursor moves. This part works fine!
Now I want the scale to be animated at 500ms. But if I set this transition speed, it wrecks the nice smoothness of the cursor move property.
I tried solving with JavaScirpt, but the problem is that if I start working the "scale" segment alone, it overwrites the rotation property. CSS doesn't remember that I've set the rotation at some point, if I set transform again, during animation, with only the scale.
I have a work-around, but I don't think it's very nice and I suspect it will difficult to understand and refactor it in the future.
So like I can separate the timing for "background" and "color", is there a way to "go deeper", and also separate for the different transform properties?
Thanks in advance!
I'm using Qt's GraphicsView/GraphicsScene framework, and I have to draw some line items.
To be sure these items are always visible (independant of the zoom level) I use a cosmetic pen, with a size of 3 (for example) so I always get lines of 3 pixels width drawn on screen.
But these items doesn't receive mouse events (such as hoverEnterEvent/hoverLeaveEvent) when I'm zooming out a lot.
I've digged in the code, and it appears that all collisions tests are done with the return value of the shape() function.
So I've tried to re-implement "shape()" and also "contains()" and "collidesWithPath()" methods, but I still have problems to detect collisions (because when zoom is changed, I need to re-update the shape for example).
Is there any tricks to do that ?
In an efficient way ? (without re-updating the item's shape at every zoom change)
Thanks
I want to introduce a canvas component by zooming from a height & width of 0.0 to 1.0. I want the component to be invisible until the zoom begins and then for it to be visible when it begins zooming.
However, if I bind the zoom effect to a showEffect trigger on the component and then make the component visible, it will first show the component at its regular size for a split second before it begins the zoom effect. If I combine the zoom effect and setting the component visible together in a parallel, it will also flash the component at its regular size for a split second before the zoom. If I make the component visible when the zoom effect starts through its effectStart event, it still does it. Does anyone know how to make it visible only when the zoom effect begins so that it doesn't flash the component at its regular size for a split second before the zoom effect?
It'd be easier to provide suggestions if you were giving us code.
That said, the reason the component "Flashes" at full size before the effect starts probably relates to the positioning and sizing of the component before the effect starts. So, before you start the effect just set the height and width of the component to the zoomHeightFrom and zoomWidthFrom of the effect.
These things can be tricky to debug, though. Especially without code.
Found an easy solution: Put the zoom effect and set property action, which sets the component to visible, in a Parallel together but add a nominal start delay of 50 ms to the set property action.
I have a component which draws a grid of things and I want a small highlight square to follow the mouse around highlighting the square that the mouse is currently over.
The whole grid is basically just one big sprite (it's a very large grid and this was faster than using pre-existing components) and the highlight square is another sprite which I'm trying to move around according to the mouse position.
So, what I have is a MouseEvent.MOUSE_MOVE handler attached to the grid sprite and this tries to determine where the mouse is and what square it's over so that it can move the highlight square to the right place. I was using localX/localY for this, but as soon as I move the highlight sprite under the mouse, these become local to the highlight and not the grid!
I was toying with stageX/Y as well, but these seemed to become pretty useless when the stage is scrolled or your component is hiding in nested display containers.
Basically, i think, you want to check the the grid components mouseX and mouseY property which will give you the mouse coordinates relative to that component. Then a little bit of maths should be able to give you what grid element you are over.
Assuming your highlight sprite is a sibling to the grid and they are both children of the main application, and you've drawn child sprites (squares) within the grid: You could add event listeners to each of the grid's square sprites. On rollover, highlight the square. Then you probably won't need to perform any translation of grid or mouse coordinates using grid.localToGlobal(new Point(targetSquare.x, targetSquare.y)) or highlightSquare.globalToLocal(grid_point).
If I have an object in a layout in Flex what is a good way to 'break it out' of that layout to be able to animate it.
For instance I have an image and a caption arranged at an angle. I want to make the image 'zoom out' slightly when the mouse rolls over it. Since its in a layout container is active if I were to resize it then obviously it would move around everything else.
I dont think I can achieve what I want by just setting includeinlayout=false.
Any experience with best practices on this?
My best idea I'm wondering about is making the image invisible and creating another image at the same location by using the screen coordinate conversion functions. This jsut semes clumsy
Wrap your object in a fixed size Canvas so that the layout upstream will remain the same. Then position the object manually within that container and then set its includeInLayout to false. At that point, you could do whatever you wanted with the interior object. Oh, also set clipContent to false. This should work whether you want it to grow or shrink.
If this is an itemrenderer or something that you've wrapped into a class, you could handle all of this in the class definition and make it transparent to consumers of the object. You'd also be able to write a mouseOver function that did what you wanted with the interior object that should zoom.