如何根据安排由`even`围绕`oval`形状冠军和`odd`值 [英] How to arrange titles around a `oval` shape by `even` and `odd` values based

问题描述

我在角应用程序的工作。我有一个场景在这里，当我收到从标题后端的客户端需要被安排围绕椭圆（它包含了一些图片）

当砖长度奇则杉杉元（平衡）应该在上面。标题的其余部分需要在椭圆形的两侧安排。

当我收到标题长度甚至有没有必要保持标题中名列前茅。

我尝试了一些点。但我没有得到任何有价值的输出。

我的是我做的方式（指令）是错误的？或者这应该是一些其他的方式来处理？

任何一个可以帮助我在这里找到了数理逻辑吗？

单击底部的按钮来创建随机标题

住我尝试的演示

解决方案

如果我理解正确的话，你想是这样的：

\r

\r

VAR半径X = 250，\r
    半径Y = 100，\r
    文本= []，\r
    椭圆=的document.getElementById（'椭圆'），\r
    INP = document.querySelector（'输入'）;\r
document.querySelector（'按钮'）。=的onclick功能（）{\r
  texts.push（inp.value）;\r
  inp.value ='';\r
  而（oval.firstChild）oval.removeChild（oval.firstChild）;\r
  texts.forEach（功能（文​​字，我，编曲）{\r
    VAR角= Math.PI +（I * 2 + 1 - arr.length％2）* Math.PI / arr.length;\r
    VAR EL =使用document.createElement（'DIV'）;\r
    el.style.top =半径Y + Math.cos（角度）*半径Y +'像素';\r
    el.style.left =半径X -Math.sin（角度）*半径X +'像素';\r
    el.textContent =文本;\r
    oval.appendChild（EL）;\r
  }）;\r
};

\r

#oval {\r
  宽度：500像素;\r
  高度：200像素;\r
  背景：红色;\r
  边界半径：100％;\r
  保证金：0汽车;\r
  位置：相对;\r
  的margin-top：20px的;\r
}\r
#oval＆GT; DIV {\r
  位置：绝对的;\r
  行高：1.2;\r
  高度：1.2em;\r
  宽度：3EM;\r
  的margin-top：-.6em;\r
  利润率左：-1.5em;\r
  文本对齐：中心;\r
}

\r

＆LT;输入ID =文本占位符=输入文字...... /＆GT;\r
＆LT;按钮＆gt;添加文字＆lt; /按钮＆GT;\r
＆LT; D​​IV ID =椭圆形＆GT;＆LT; / DIV＆GT;

\r

\r

\r

基本上，除 2 * Math.PI （360deg）为 N 角相等，其中<$ C $ ç> N 是文本的数量。

然后使用 Math.cos 和 Math.sin 上的角度，并通过水平或垂直乘以椭圆的半径。将相对给予坐标以椭圆的中心

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

解决方案

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.

这篇关于如何根据安排由`even`围绕`oval`形状冠军和`odd`值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！