javascript - Add circles at the edges of wheelnav items that rotates along with it

Question

Here's a jsFiddle link:

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);

I'm trying to achieve the following:

Any ideas on how to do it will be appreciated, if alternative approaches are available then please enlighten me.

Answer 1

You must create a custom slicePath for 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
    };
};

Then use it in your initialization:

wheel.slicePathFunction = CircleEdgeSlice;

Here is a modified JSFiddle, it produces this: