使用 raphaeljs 的径向菜单答案

【问题标题】：radial menu using raphaeljs使用 raphaeljs 的径向菜单
【发布时间】：2015-12-15 15:15:10
【问题描述】：

首先我尝试了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 链接https://jsfiddle.net/maheshchari/23ngqkfe/1/ 在这里，我遇到了根据需要对齐图标和文本的问题。

【问题讨论】：

我会发布一个 jsfiddle 并进一步解释问题。
谢谢伊恩，如果我的问题需要任何澄清，请告诉我，实际上我只发布了单个扇区的代码，但它应该从菜单数组中动态构建。
如前所述，张贴小提琴解释哪些部分不起作用将对任何人都有帮助。
Jsfiddle : jsfiddle.net/maheshchari/23ngqkfe/1

标签： javascript svg raphael wheelnav.js

【解决方案1】：

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

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

【讨论】：