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

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 中的 navItemsContinously 属性。

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

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