それに伴って回転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

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あり、これを生成します。