如何调整wheelnav.js中切片间隙及切片与路径线条的间距？

嗨，我之前也折腾过wheelnav.js的切片布局问题，刚好能帮到你！

你遇到的两个问题，其实都可以通过给slicePath().WheelSlice传递参数来解决，之前没找到方法是因为这个路径函数默认隐藏了可配置参数，咱们一步步来调整：

一、缩小切片之间的间隙 #

slicePath().WheelSlice的第一个参数就是切片间隙的比例，默认值大概是0.05（相当于每个切片会留出自身角度5%的空隙）。数值越小，间隙就越窄，设为0的话切片就完全连在一起了。

把你代码里的这一行：

wheel.slicePathFunction = slicePath().WheelSlice;

改成这样：

// 这里把间隙比例设为0.01，你可以根据需求调整，比如0.02、0.005都可以
wheel.slicePathFunction = slicePath().WheelSlice(0.01);

要是想完全消除间隙，直接传0就行：

wheel.slicePathFunction = slicePath().WheelSlice(0);

二、让线条完全贴紧切片 #

你说的线条和切片之间的空隙，主要是两个设置在影响：

1. 首先把maxPercent改成1.0，避免切片被过度放大导致和线条错位：

wheel.maxPercent = 1.0;

2. 然后设置navLineOffset为0，让线条和切片的外边缘完全重合：

wheel.navLineOffset = 0;

另外，WheelSlice的第二个参数是控制切片的内凹比例（默认0.7，也就是内半径是外半径的70%），如果需要调整切片的内凹大小，也可以一起传进去，比如设为0.8就是内半径是外半径的80%：

wheel.slicePathFunction = slicePath().WheelSlice(0.01, 0.8);

调整后的完整代码 #

把这些参数整合到你的代码里，就是这样：

wheel = new wheelnav('wheelDiv');
wheel.wheelRadius = 130;
wheel.maxPercent = 1.0; // 避免切片过度放大
wheel.colors = colorpalette.oceanfive;
wheel.clickModeRotate = false;
// 第一个参数是切片间隙比例，第二个是内凹比例
wheel.slicePathFunction = slicePath().WheelSlice(0.01, 0.8);
wheel.navLineOffset = 0; // 让线条贴紧切片
wheel.navAngle = 30;
wheel.createWheel(['basic', 'hover', 'select', null, null, null]);

你可以先把间隙比例设为0测试一下，确认切片能完全贴合，再慢慢调整到你需要的间隙大小，这样更容易找到合适的数值~

备注：内容来源于stack exchange，提问作者user15227672