加入圈子

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，它會產生這樣的：