如何使用 wheelnav js 沿路径弯曲导航标题

Question

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

上面的轮子图片

Answer 1

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

目前，沿路径的导航标题曲线是一个 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

如何使用 wheelnav js 沿路径弯曲导航标题

How to curve the navtitle along the path using wheelnav js

wheelnav.js