Wheelnav js将标题与圆圈对齐

Question

我正在使用Wheelnav js并尝试将每个标题对齐到圆圈的内部（红色区域）。但是我错过了一些东西，任何人都可以指出我可能缺少的东西。 我需要能够使用mousescrolling滚动项目，但它也没有发生。 （在点击菜单上滚动正在运行）。

感谢。

var wheel = new wheelnav("wheelDiv");
wheel.wheelRadius = wheel.wheelRadius * 2;//2
wheel.navItemsContinuous = true;
wheel.sliceAngle = 8;
wheel.colors = colorpalette.gamebookers;
wheel.slicePathFunction = slicePath().NullSlice;

var anchorAttr = "middle";
wheel.titleFont1 = "200 24px Impact, Charcoal, sans-serif";
wheel.titleFont2 = "200 34px Impact, Charcoal, sans-serif";
wheel.titleAttr = {fill: "#bbb", textAlign: "left", font: wheel.titleFont1,"text-anchor":anchorAttr};
wheel.titleHoverAttr = {font: wheel.titleFont1, cursor: 'pointer',"text-anchor":anchorAttr};
wheel.titleSelectedAttr = { fill: "#000", textAlign: "left", font: wheel.titleFont2,"text-anchor":anchorAttr};

wheel.animatetime = 500;
wheel.animateeffect = 'linear';

wheel.createWheel(["Menu Item -1","Menu - 2","Active Menu Item","Menu - 4","Menu Item - 5","Menu - 6","Active Menu Item","Menu - 8"]);

Answer 1

您可以在initWheel函数之后修改每个navItem的属性。 可以通过slicePathCustomization进行标题定位。

wheel.initWheel(["Menu Item -1", "Menu - 2", "Active Menu Item", "Menu - 4", "Menu Item - 5", "Menu - 6", "Active Menu Item", "Menu - 8"]);

//Initial
wheel.sliceInitPathFunction = slicePath().NullSlice;
wheel.navItems[0].sliceInitPathCustom = new slicePathCustomization();
wheel.navItems[0].sliceInitPathCustom.titleRadiusPercent = 0.1;
//Default
wheel.slicePathFunction = slicePath().NullSlice;
wheel.navItems[0].slicePathCustom = new slicePathCustomization();
wheel.navItems[0].slicePathCustom.titleRadiusPercent = 0.2;
//Hover
wheel.sliceHoverPathFunction = slicePath().NullSlice;
wheel.navItems[0].sliceHoverPathCustom = new slicePathCustomization();
wheel.navItems[0].sliceHoverPathCustom.titleRadiusPercent = 0.3;
//Selected
wheel.sliceSelectedPathFunction = slicePath().NullSlice;
wheel.navItems[0].sliceSelectedPathCustom = new slicePathCustomization();
wheel.navItems[0].sliceSelectedPathCustom.titleRadiusPercent = 0.4;

wheel.createWheel();

有关自定义here的更多信息。