如何实现wheelnav.js中两个关联轮盘的同步旋转？

核心前提 #

确保两个轮盘的分段数量完全一致，否则无法实现一一对应的同步旋转。

方法一：绑定点击事件同步旋转 #

既然你已经共享了Raphael实例，只需给两个轮盘的分段绑定点击事件，触发对方的旋转方法即可：

// 初始化内圈图标轮盘
var wheel1 = new wheelnav("wheelDiv", null, 650, 650);
// 配置内圈的图标路径（替换为你的图标数组）
wheel1.iconPathFunction = [iconPath().Sun, iconPath().Moon, iconPath().Star];
wheel1.createWheel();

// 初始化外圈文本轮盘，共享Raphael实例
var wheel2 = new wheelnav("wheel2", wheel1.raphael);
// 配置外圈文本（数量和内圈图标一致）
wheel2.navItems = ["太阳", "月亮", "星星"];
wheel2.createWheel();

// 绑定内圈点击事件，同步外圈旋转
wheel1.navItems.forEach((item, idx) => {
    item.onmouseup = () => {
        wheel2.rotateWheel(idx);
    };
});

// 绑定外圈点击事件，同步内圈旋转
wheel2.navItems.forEach((item, idx) => {
    item.onmouseup = () => {
        wheel1.rotateWheel(idx);
    };
});

方法二：利用旋转回调自动同步 #

通过重写afterRotateWheel回调，让一个轮盘旋转完成后自动触发另一个的旋转，避免重复绑定点击事件：

// 初始化两个轮盘（省略配置代码，确保分段数量一致）
var wheel1 = new wheelnav("wheelDiv", null, 650, 650);
var wheel2 = new wheelnav("wheel2", wheel1.raphael);

// 内圈旋转后同步外圈
wheel1.afterRotateWheel = function() {
    // 第二个参数传false，避免触发外圈的回调造成循环
    wheel2.rotateWheel(wheel1.selectedNavItemIndex, false);
};

// 外圈旋转后同步内圈
wheel2.afterRotateWheel = function() {
    wheel1.rotateWheel(wheel2.selectedNavItemIndex, false);
};

wheel1.createWheel();
wheel2.createWheel();

更简洁的替代方案：单轮盘实现双层级内容 #

如果不需要两个独立轮盘，推荐直接用一个轮盘，通过customNavItemCreation自定义每个分段的内容，同时绘制内圈图标和外圈文本，从根源避免同步问题：

var wheel = new wheelnav("wheelDiv", null, 650, 650);
wheel.slicePathFunction = slicePath().WheelSlice;
// 定义文本列表
wheel.navItems = ["太阳", "月亮", "星星"];

// 自定义每个分段的内容绘制
wheel.customNavItemCreation = function(navItem, index) {
    // 绘制内圈图标，0.3是图标距离中心的比例（可调整）
    var icon = wheel.raphael.path([iconPath().Sun, iconPath().Moon, iconPath().Star][index]);
    icon.attr({fill: "#ffffff", stroke: "#333333"});
    wheel.navItemCenter(icon, index, 0.3);

    // 绘制外圈文本，0.8是文本距离中心的比例（可调整）
    var text = wheel.raphael.text(0, 0, wheel.navItems[index]);
    text.attr({fontSize: 18, fill: "#333333"});
    wheel.navItemCenter(text, index, 0.8);
};

wheel.createWheel();

内容的提问来源于stack exchange，提问作者Jan Matyáš