Babylon Js children that follow parent withouth the scaling - babylonjs

I work with Babylon JS and I want some meshes to follow the displacement but not the scaling of the 'parent mesh'
Is there an easy way to do this? Or do I have to do this by hand?
Thanks.

Perhaps the best way would be to not inherit but instead use scene.registerBeforeRender and just clone parent position to child position

This is a late answer, but the way I solved this is to set the child's scaling to be the inverse of the parent.
childMesh.parent = parentMesh;
...
parentMesh.computeWorldMatrix(true);
childMesh.scaling = Vector3.One().divide(parentMesh.absoluteScaling);
The computeWorldMatrix on the parent is important if you want to use parentMesh.absoluteScaling - it forces the parent to compute its world matrix before rendering, so that you can get an accurate reading on its absolute scaling or position.
You can substitute parentMesh.scaling instead of absoluteScaling if you only want to undo the scaling of the parent, but still want to respect scaling from grandparents.
I'm not sure if this is a good practice, but it's worked well for me.

Related

Is there a way to force updating the size of the non-active child of QStackedWidget when it's resized?

I have a QStackedWidget (QSW) with 2 child components, both are configured to expand to the size of their parents.
One of the child components (CC) resizes its content based on CC's size. These
calculated sizes are also used to determine the size of components which are always visible in a sibling of QSW. In order for these sizes to be always correct, CC needs to be resized even when it's not the active component in QSW.
What's the most straightforward way to accomplish this?
Edit: CC's sizePolicy is MinimumExpanding/MinimumExpanding, so the requirement is that CC's size is set to expand to the maximum size QSW allows it to, even when CC is not the active component.
This is a fine matter of whether or not the size hint works and what size policy is. In such cases the call of QWdiget::adjustSize is usually helping but to answer with confidence more context of your code is needed. Anyway, the docs say when it helps. I would trap the moment when the size is not correct and apply adjustSize. Mind that the scope where you apply adjustSize matters too.
Using a QStackedLayout with the StackAll stacking mode solves the issue. When the stacking mode is set to StackAll, all child widgets are showing, they just cover each other.

Expanded hover area?

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.

Raphael JS resize Canvas

I'm programming a debate-graph with Raphael JS. Users can add nodes to the graph. Eventually the graph gets really big and the canvas is still the same size. the canvas (in raphael js: paper) is inside another div with "overflow: scroll;", so lets ignore screen real estate
Is there a way that I resize the canvas without reloading the page (to assign new X/Y values)?
Alternatively, can I create a second bigger canvas in parallel and copying all the elements over? is there a way?
If I understand your question, just call setSize() to expand the size of the canvas to the size needed as you need it. I've used this in a div with overflow:scroll to get the effect you describe.
In my case, I didn't want to resize, I wanted to zoom.
In other words, show the user the growing graph inside a constant-sized div.
So I needed: setViewBox()

Any advice on 'breaking' an object out of its layout in Flex - for animation purposes?

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.

Flex: Setting the resgistration point on a display object

What is the best way to change/set a registration point on a Flex 3 display object? I know this isn't really built in to easily change, but does anyone have any suggestions on how I could extend UIComponent to achieve this?
For some reason, the Flash Player API doesn't expose the registration point of DisplayObjects (and the Flash IDE makes them a pain to modify once an object is created). The best solution, as David pointed out, is to add your component as a child of another component (UIComponent would be fine). So, for example, if I had a Button and I wanted its registration point at its center, I'd add it as a child of a UIComponent (not Canvas) and offset the child by setting its position to (-button.width/2, -button.height/2).
Put your DisplayObject inside a sprite and set the DisplayObject's x & y positions to the negitive of your target registration point. Apply all transforms to the Sprite container.
Put it inside a Canvas container, with its clipContent attribute set to false. Within the canvas, you can put your object wherever you like.

Resources