如何根据“偶数"和“奇数"值围绕“椭圆"形状排列标题 [英] How to arrange titles around a `oval` shape by `even` and `odd` values based

问题描述

我在 angular 应用程序中工作.我在这里有一个场景，当我从后端获取标题时，客户端要求将标题排列在 oval 周围(它包含一些图像)

并且当瓷砖长度为 odd 时，第一个元素( balance )应该在顶部.其余的标题需要排列在oval的两侧.

当我将标题长度设为 even 时，无需将标题保留在顶部.

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

我的方式(directive)是错误的?或者这应该用其他方式处理?

有人帮我找到这里的数学逻辑吗?

点击底部按钮创建随机标题

我尝试的现场演示

解决方案

如果我理解正确，你想要这样的东西:

var radiusX = 250,半径Y = 100，文本 = [],椭圆 = document.getElementById('椭圆'),inp = document.querySelector('输入');document.querySelector('button').onclick = function() {texts.push(inp.value);inp.value = '';而(oval.firstChild)oval.removeChild(oval.firstChild)；texts.forEach(function(text, i, arr){var 角度 = 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 = 文本；椭圆形.appendChild(el);});};

#oval {宽度:500px；高度:200px；背景:红色；边界半径:100%；边距:0 自动；位置:相对；边距顶部:20px；}#椭圆形>div {位置:绝对；行高:1.2；高度:1.2em；宽度:3em；边距顶部:-.6em；左边距:-1.5em；文本对齐:居中；}

<input id="text" placeholder="Write text..."/><button>添加文本</button><div id="椭圆形"></div>

基本上，将2 * Math.PI (360deg) 分成n 个相等的角度，其中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.

这篇关于如何根据“偶数"和“奇数"值围绕“椭圆"形状排列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！