Changing the mouse cursor when you hover it over a Surface object in Famo.us is very easy. You do not have to explicitly turn on the mouseover and mouseout events of the Surface just to change cursors.

Simply specify it within the Surface property attribute when you create a new instance of it, like this:

That’s it! When you hover your mouse cursor on the Surface object, its cursor will change. It will also change the cursor back to default when your cursor moves out of the Surface area.

One might think the quickest and easiest way to hide a Surface object in Famo.us is to set its opacity to transparent.

While true, you will also have to set its other properties like text color and such which is a hassle. Okay, so if you do not find that a hassle, there is another problem.

All input events like mouse clicks will be absorbed by this surface. So if you intentionally wanted to hide the Surface because the you want the other Surface below it to receive events, it will not work.

What I did was to make use of the Modifier that was used to add the Surface to the View. It has a setOrigin method that you can take advantage of to move this Surface object away from the user’s screen.

Say, setOrigin(0.5, 0.5) moves the Surface object to the center of the screen. You can do setOrigin(-0.5, -0.5) to move it out of the user’s screen making the user think that you actually hid the Surface object when in fact, you just moved it.

To show the Surface object back, just set the values to non-negative. That’s it!

The guys in the chatroom of #famous specifically sunrising and talves helped me out in setting the vertical alignment of a text inside a Surface.

The key here is the lineHeight property. Take this Javascript code for example:

Take note there is no attribute to setting the vertical alignment in Famo.us. This is the only way to do it.

Related Posts Plugin for WordPress, Blogger...