如何使用wheelnav js沿路径弯曲navtitle答案

【问题标题】：How to curve the navtitle along the path using wheelnav js如何使用wheelnav js沿路径弯曲navtitle
【发布时间】：2019-01-28 18:08:48
【问题描述】：

如何沿着切片的路径制作导航标题曲线，如果文本很长，如何换行。

上面的轮子图片

【问题讨论】：

标签： wheelnav.js

【解决方案1】：

在长文本中，在标题中使用“\n”进行换行。 wheel.createWheel(["Long\ntext"]);

目前，沿路径的 navtitle 曲线是 RC 功能，因此请使用源代码而不是上一个版本。你可以在这个 CodePen 中找到新的属性：https://codepen.io/softwaretailoring/pen/RQYzWm

  var piemenu = new wheelnav("wheelDiv");

  // New properties in wheelnav.js v1.8.0
  piemenu.titleCurved = true;
  piemenu.titleCurvedClockwise = false;
  piemenu.titleCurvedByRotateAngle = false;

很遗憾，以上两个属性不能一起使用。 :(

更新：有一种方法可以满足您的需求。两个轮子可以互相使用。

  var piemenu = new wheelnav("wheelDiv");
  setMenu(piemenu); // Set common properties
  piemenu.titleRadiusPercent = 0.65; // Positioning first title
  piemenu.markerEnable = true;
  piemenu.slicePathFunction = slicePath().DonutSlice;
  piemenu.sliceClickablePathFunction = slicePath().DonutSlice;
  piemenu.titleHoverAttr = { fill: "#333" };
  piemenu.createWheel(["Hello", "world!", "-------"]);

  var piemenu2 = new wheelnav("wheelDiv2", piemenu.raphael);
  setMenu(piemenu2); // Set common properties
  piemenu2.wheelRadius = 520; // Positioning second title
  piemenu2.slicePathFunction = slicePath().NullSlice; // There is no slice, only title
  piemenu2.createWheel(["Bello", "space!", "*******"]);

  // Link navigateFunctions to each other
  for (var i = 0; i < piemenu.navItems.length; i++) {
    piemenu.navItems[i].navigateFunction = function () {
      piemenu2.navigateWheel(Math.abs(this.itemIndex));
    }
  }
  for (var i = 0; i < piemenu2.navItems.length; i++) {
    piemenu2.navItems[i].navigateFunction = function () {
      piemenu.navigateWheel(Math.abs(this.itemIndex));
    }
  }

这是一个用于环绕和弯曲文本的新 CodePen：https://codepen.io/softwaretailoring/pen/eLNBYz

【讨论】：