在与其一起旋转的wheelnav项目的边缘添加圆圈

这是一个jsFiddle链接：

https://jsfiddle.net/zv3mb0wp/

var wheel = new wheelnav("divWheel"); wheel.cssMode = true; wheel.wheelRadius = wheel.wheelRadius * 0.9; wheel.titleRotateAngle = 90; wheel.animatetime = 500; wheel.animateeffect = 'linear'; wheel.spreaderEnable = true; wheel.spreaderRadius = 80; wheel.spreaderInTitle = "content" wheel.spreaderOutTitle = "content" wheel.spreaderTitleFont = "500 14px Impact, Charcoal, sans-serif"; wheel.sliceTransformFunction = sliceTransform().MoveMiddleTransform; var arr = ["Content","Content","Content","Content","Content","Content","Content"]; wheel.createWheel(arr); 

我正在努力实现以下目标：

任何有关如何做的想法将不胜感激，如果有其他方法，请赐教。

Answer 1

您必须为wheelnav创建自定义slicePath。

 var CircleEdgeSlice = function (helper, percent, custom) { var custom = new slicePathCustomization(); custom.titleRadiusPercent = 0.7; helper.setBaseValue(percent, custom); slicePathString = []; slicePathString.push(helper.MoveToCenter()); slicePathString.push(helper.LineTo(helper.startAngle+5, helper.sliceRadius)); slicePathString.push(helper.ArcTo(helper.sliceRadius, helper.middleAngle-10, helper.sliceRadius)); slicePathString.push(helper.ArcTo(30, helper.middleAngle+10, helper.sliceRadius)); slicePathString.push(helper.ArcTo(helper.sliceRadius, helper.endAngle-5, helper.sliceRadius)); slicePathString.push(helper.Close()); return { slicePathString: slicePathString, linePathString: "", titlePosX: helper.titlePosX, titlePosY: helper.titlePosY }; }; 

然后在初始化中使用它：

 wheel.slicePathFunction = CircleEdgeSlice; 

这是一个修改过的JSFiddle ，它产生了这个：