将外圈的导航与内圈的选定导航对齐

Question

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

这就是我想要实现的目标：如果我点击内圈，我希望外圈的可见导航项目以内圈的导航项目为中心。到目前为止，我可以成功且始终如一地让外圈导航项从内圈导航项的开头开始。我使用内圈 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

我可以让 OuterCircleNav 从 ICNI 的中间开始。

我真正想做的是让 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 以便分别添加额外的部分或额外的外部导航元素。我发现，如果我能为部分和附加部分的一种组合工作，那么不同的组合就会出现偏差。我知道答案在于我如何计算 y，或 subWheelSliceAngle，或 sub_wheel_var。

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

我非常感谢任何帮助。

非常感谢。

Answer 1

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

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

这是我修改后的 bin：https://jsbin.com/bicunuqexu/edit?js,output

将外圈的导航与内圈的选定导航对齐

Align outer cricle's navigation to inner circle's selected navigation

javascript

geometry

wheelnav.js