How to arrange titles around a `oval` shape by `even` and `odd` values based

问题

I am working in angular application. i have a scenario here, when i am getting the titles from back-end the client requires that to be arranged around a oval (it contains some image)

and when the tiles length are odd then the firs element ( balance ) should be in the top. rest of the titles need to arrange the both side of the oval.

when i am getting the title length as even there is no need to keep the title in the top.

i tried some point. but i didn't get any valuable output.

my be the way i am doing (directive) is wrong? or this should be handle with some other way?

any one help me to find the mathematical logic here please?

click the bottom button to create random titles

Live Demo of my try

回答1:

If I understand it correctly, you want something like this:

var radiusX = 250,
    radiusY = 100,
    texts = [],
    oval = document.getElementById('oval'),
    inp = document.querySelector('input');
document.querySelector('button').onclick = function() {
  texts.push(inp.value);
  inp.value = '';
  while(oval.firstChild) oval.removeChild(oval.firstChild);
  texts.forEach(function(text, i, arr){
    var angle = Math.PI + (i*2 + 1 - arr.length%2) * Math.PI / arr.length;
    var el = document.createElement('div');
    el.style.top = radiusY + Math.cos(angle) * radiusY + 'px';
    el.style.left = radiusX -Math.sin(angle) * radiusX + 'px';
    el.textContent = text;
    oval.appendChild(el);
  });
};

#oval {
  width: 500px;
  height: 200px;
  background: red;
  border-radius: 100%;
  margin: 0 auto;
  position: relative;
  margin-top: 20px;
}
#oval > div {
  position: absolute;
  line-height: 1.2;
  height: 1.2em;
  width: 3em;
  margin-top: -.6em;
  margin-left: -1.5em;
  text-align: center;
}

<input id="text" placeholder="Write text..."/>
<button>Add text</button>
<div id="oval"></div>

Basically, divide 2 * Math.PI (360deg) into n equal angles, where n is the number of texts.

Then use Math.cos and Math.sin on that angle, and multiply it by the horizontal or vertical radius of the ellipse. That will give the coordinates relatively to the center of the ellipse.

来源：https://stackoverflow.com/questions/32070130/how-to-arrange-titles-around-a-oval-shape-by-even-and-odd-values-based

标签

angularjs

angularjs-directive