使用raphaeljs的径向菜单

Question

首先我尝试过wheelnav.js，但它没有标签支持。所以我尝试使用Raphel.js并完成了扇区并放置了图标。 但是我在根据扇形角放置文本和旋转时遇到问题。

var rap = new Raphael($('#radialMenu')[0], 320, 320);

    var startAngle = 0,endAngle = 72,middleAngle = (startAngle+endAngle)/2;

    sector = rap.sector(150,150,150,startAngle,endAngle,{fill: "#fff" , stroke: '#ccc', "stroke-width": 2});

    icon = sector.paper.image('images/people1.png',150+95*Math.cos(-startAngle*rad),150+95*Math.sin(-startAngle*rad) ,7,40)
    .transform('r-'+middleAngle+','+150+','+150);

任何人请建议我使用svg或raphael.js

JSfiddle link https://jsfiddle.net/maheshchari/23ngqkfe/1/ 在这里，我遇到问题，根据需要调整图标和文字。

Answer 1

您应该添加另一个没有旋转中心坐标的旋转角度。如果cx＆amp; cy未指定形状的中心用作旋转点。

.transform('r-' + middleAngle + ',' + 150 + ',' + 150 + 'r90');