将UL列表转换为径向/圆形列表

Question

我正在尝试将信息图图像转换为可在HTML / JS / CSS中编辑的图像。

我想尽可能地像示例图片一样。我需要它足够灵活，不需要传递每个项目的CSS坐标，以便可以通过admin（添加/删除）进行编辑。

在网上得到的示例中，我尽可能地使用TweenMax。但是我被困住了。我最大的问题是如何根据文本所在的区域定位文本（如果圆圈在右边，则将标题向右对齐，如果在左边，则将文本对齐到左侧）。

function radiallist(trgt) {
      		var itemAmount = $(trgt).find('.radiallist-item').length;
      		var angle = 0,
        		currItem;
      		var itemStartDist = trgt.width() * 2;
    		for (i = 0; i < itemAmount; i++) {
    			currItem = $(trgt).find('.radiallist-item:nth-child(' + (i + 1) + ')');
    			angle = (Math.PI * 2 / itemAmount) * i;
    			x = itemStartDist * Math.cos(angle) - (currItem.width() / 2);
    			y = itemStartDist * Math.sin(angle) - (currItem.height() / 2);
    			TweenMax.to(currItem, 0, {
    				x: x,
    				y: y
    			});
    		}
      		radiallistItemPos($('.radiallist'));
    	}
    	radiallist($('.radiallist'));

    	function radiallistItemPos(trgt) {
    		var itemAmount = $(trgt).find('.radiallist-item').length;
    		var angle = 0,
    		currItem;
    		var itemEndDist = 100 * itemAmount/8;
    		for (i = 0; i < itemAmount; i++) {
    			currItem = $(trgt).find('.radiallist-item:nth-child(' + (i + 1) + ')');
    			angle = (Math.PI * 2 / itemAmount) * i;
    			x = itemEndDist * Math.cos(angle) - (currItem.width() / 2);
    			y = itemEndDist * Math.sin(angle) - (currItem.height() / 2);
    			TweenMax.to(currItem, 2, {
    				x: x,
    				y: y,
    				alpha: 1
    			});
    		}
    	}

.radiallist {
    		position:absolute;
    		height:100%;
    		width:100%;
    		top:0;
    		left:0;
    		overflow:hidden;
    	}
    	.radiallist .radiallist-btn {
    		position:relative;
    		height:330px;
    		width:330px;
    		left:50%;
    		top:50%;
    		margin-top:-165px;
    		margin-left:-165px;
    		z-index:2;
    		text-align:center;
    		border:3px dotted #CCC;
    		border-radius:165px;
    	}
    	.radiallist .radiallist-btn img {
    		position:absolute;
    		top:50%;
    		left:50%;
    		margin-left:-107px;
    		margin-top:-31px;
    	}
    	.radiallist .radiallist-items {
    		position:absolute;
    		left: 50%;
    		top: 50%;
    		margin:0;
    		list-style-type:none;
    		padding:0;
    	}
    	.radiallist .radiallist-item {
    		position:absolute;
    		background:url(https://i.imgur.com/LMgR3Pe.png) no-repeat center;
    		z-index:1;
    		text-align:right;
    		font-family:'Din';
    		font-size:14px;
    		color:#777;
    		font-weight:bold;
    		text-transform:uppercase;
    		white-space:nowrap;
    	}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>
    <script defer src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script defer src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <section id="conteudo">
    	<div class="container">
    		<div class="radiallist">
    			<div class="radiallist-btn"></div>
    			<ul class="radiallist-items">
    				<li class="radiallist-item">Televisões</li>
    				<li class="radiallist-item">Telas Touch</li>
    				<li class="radiallist-item">Notebooks</li>
    				<li class="radiallist-item">Tablets</li>
    				<li class="radiallist-item">Impressoras</li>
    				<li class="radiallist-item">Estruturas Box Truss</li>
    				<li class="radiallist-item">Backdrops</li>
    				<li class="radiallist-item">Palcos</li>
    				<li class="radiallist-item">Caixas de som</li>
    				<li class="radiallist-item">Microfones</li>
    				<li class="radiallist-item">Iluminação</li>
    				<li class="radiallist-item">Filmadoras</li>
    				<li class="radiallist-item">Máquinas fotográficas</li>
    				<li class="radiallist-item">Climatizadores</li>
    				<li class="radiallist-item">Rádios</li>
    				<li class="radiallist-item">Totens Carregadores</li>
    				<li class="radiallist-item">Tendas</li>
    				<li class="radiallist-item">Geradores de Energia</li>
    				<li class="radiallist-item">Vídeo-games</li>
    				<li class="radiallist-item">Equipamentos para transmissão</li>
    				<li class="radiallist-item">Unifilas</li>
    				<li class="radiallist-item">Pulpitos</li>
    				<li class="radiallist-item">Máquinas de neve</li>
    				<li class="radiallist-item">Máquinas de fumaça</li>
    				<li class="radiallist-item">Máquinas de gelo seco</li>
    				<li class="radiallist-item">Projetores</li>
    			</ul>
    		</div>
    	</div>
    </section>

有人可以给我一些启发吗？