如何使用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