javascript - 在随其旋转的 wheelnav 元素的边缘添加圆圈

Question

这是一个 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

您必须创建自定义 slicePath用于 wheelnav。

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 ，它产生这个: