javascript - 在随其旋转的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);

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


如果可以使用其他替代方法，请对我的任何想法提出建议。

最佳答案

您必须为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，它产生以下内容：

关于javascript - 在随其旋转的wheelnav项的边缘添加圆圈，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43340589/