在与之一起旋转的wheelnav项的边缘添加圆圈 [英] Add circles at the edges of wheelnav items that rotates along with it

问题描述

这是一个jsFiddle链接:

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.

推荐答案

您必须创建自定义

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;

这是经过修改的 JSFiddle ，它会产生以下内容:

Here is a modified JSFiddle, it produces this:

这篇关于在与之一起旋转的wheelnav项的边缘添加圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！