Wheelnav js将标题与圆圈对齐

Question

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

谢谢。

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。

Wheelnav js将标题与圆圈对齐

Wheelnav js align Title to the circle

html

javascript

css

jquery

wheelnav.js