How To Hide A Surface in Famo.us
Posted by blogmeister on
July 16, 2014
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!
tags: 0.5, backgroundcolor, color, famo.us, hide, opacity, origin, setorigin, show, surface, transparency, transparent, view
No Comments
How To Vertical Align Text In Famo.us Surface
Posted by blogmeister on
July 11, 2014
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:
|
1 2 3 4 5 6 7 8 9 10 |
new Surface({ size: [150, 200], content: 'Sample text', properties: { color: 'white', textAlign: 'center', backgroundColor: 'black', lineHeight:'100px' } }); |
Take note there is no attribute to setting the vertical alignment in Famo.us. This is the only way to do it.
Share the post "How To Vertical Align Text In Famo.us Surface"
tags: align, center, lineheight, surface, text, vertical, vertical alignment
No Comments
How To Create A Surface With Background Opacity But Not Text
Posted by blogmeister on
July 4, 2014
Simply set the property backgroundColor with an rgba() value. RGBA means RGB (red, green, blue) + Alpha where you set the opacity.
If you want it to be invisible, set it to 0, else 1. If you want it to be semi transparent then set values between 0 and 1.
This is an example on how to set the background of a Surface to transparent.
|
1 |
surface.setProperties({ backgroundColor: 'rgba(0, 0, 0, 0)' }); |
And this is how to set it back to normal.
|
1 |
surface.setProperties({ backgroundColor: 'rgba(0, 0, 0, 1)' }); |
Share the post "How To Create A Surface With Background Opacity But Not Text"
