javascript - 将外部冰柱的导航与内部圆的选定导航对齐

这是我的代码，用于演示
https://jsbin.com/mugosec/65/edit?js,output

这是我要达到的目标：
如果单击内圆，则希望外圆的可见导航项居中于内圆的导航项。到目前为止，我可以成功并始终如一地使外圈navItems从内圈nav项的开头开始。我使用内圈navitem的baseAngle +外圈的可见navItems度来适当地排列我的外圈。

let wheelSliceAngle = 360 / this.wheel.navItemCount;
let text_labels = (mod_options.length) + 1;
let subWheelSliceAngle = 360 / (sub_wheel_labels.length);
let labels_length = sub_wheel_labels.length
let non_text_labels = non_text_labels_length
let x  = (subWheelSliceAngle * non_text_labels);
let y = (subWheelSliceAngle * text_labels);
for (let portion of this.wheel.navItems) {
    console.log('portion baseAngle',portion)
    let sub_wheel_var = y
    let wheel_var = portion.baseAngle
    let angle = wheel_var + sub_wheel_var
    portion.sub_wheel = initSubWheel(this.wheel, angle);
    portion.sub_wheel.hide()
    let wheel_nav = portion;
    let _that = this;
    let old_refresh = wheel_nav.refreshNavItem;
    //     console.log(portion);
    wheel_nav.refreshNavItem = function() {
        old_refresh.apply(this, arguments);
    };
    wheel_nav.navigateFunction = function() {
        resetMarkers()
        this.wheelnav.hideSubMenus();
        full_portion_sub_wheel.hide()
        this.sub_wheel.show();
        setTimeout(() => {
            this.sub_wheel.navItems.map(x => x.selected = false);
            this.sub_wheel.navItems.forEach((v, i) => { v.setSelected() })
            this.refreshNavItem();
        }, 0)
    }
}

如果我从以下位置调整变量sub_wheel_var和wheel_var：

let y = (subWheelSliceAngle * text_labels);
let sub_wheel_var = y
let wheel_var = portion.baseAngle
let angle = wheel_var + sub_wheel_var

至：

let y = (subWheelSliceAngle * text_labels);
let sub_wheel_var = y
let wheel_var = portion.navAngle
let angle = wheel_var + sub_wheel_var

我可以在ICNI的中间开始OuterCircleNav。

我真正想做的是让OCN的中间层与ICNI的中间层匹配。

这样做：

let y = (subWheelSliceAngle * text_labels);
let sub_wheel_var = y/2
let wheel_var = portion.navAngle
let angle = wheel_var + sub_wheel_var

让我靠近。问题是它不太准确！！！！而且无论我做什么，我都无法使它成为死胡同。

为了更轻松地处理代码，我还添加了变量sections和extras，以使分别添加其他部分或其他外部nav元素更加容易。 Ive发现，如果我可以将某部分和其他部分组合使用，则将导致另一种组合倾斜。我知道答案就在于我如何计算y或subWheelSliceAngle或sub_wheel_var。

再一次，您可以在这里查看代码：
https://jsbin.com/mugosec/65/edit?js,output

我将非常感谢任何帮助。

非常感谢。

最佳答案

您必须在navItemsContinuous中使用initSubWheel属性。

  sub_wheel.navAngle = nav_angle-30;
  sub_wheel.sliceAngle = 30;
  sub_wheel.navItemsContinuous = true;

这是我修改过的垃圾箱：https://jsbin.com/bicunuqexu/edit?js,output

关于javascript - 将外部冰柱的导航与内部圆的选定导航对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56799110/