加入圈子

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，它会产生这样的：