The PLAY button is not optical alignment / by Gavin Lau

Lots of people say that you can not center align the play button,the physics center is not the visual center . Well,actually I think you can,the key is to find the real center of the triangle.

When you select a triangle in a design tool,usually it has a rectangle selection area,so the center is the rectangle’s center but not the triangle’s center.

The real triangle’s center is at the 1/3's place.

when you set the real center point,and align with the circle

it works!and it’s 100% physics center alignment.

but how to find the center point for a irregular shape easily?

the center point means the distance between longest edges to the center are the same.So just using a circle behind and make the edge point to the circle edge,because circle’s edge to the center is radius,all radius have same size.

See the difference between using rectangle and circle.

This method can be used to align irregular shape,using circle to find the center point is much better than using a rectangle,but it’s just better,not perfect.

it's nice to adjust with your eyes to make it perfect,add a circle is just a suggestion.The main point is finding the true center point of the inner object.

This is a example,add circle won’t work,because it’s not the real center,you can rotate to check if it’s the real center.

 

 

 

 

Source: https://medium.com/@erqiudao/the-play-butt...